Baš o kompliciranom ili naučite CSS3. Dio 3. Načini postavljanja boja u CSS-u. Postavite transparentnost elementu HTML dokumenta

Pozdrav, dragi čitatelji web stranice remontcompa.ru! Moje ime je Roman Nahvat i predstavljam vam treći dio niza članaka o jeziku CSS stila. U prvom i drugom dijelu pogledali smo načine dodavanja stilova web stranici, proučavali koncept CSS selektora i njihove vrste. Počevši s ovim dijelom počet ćemo proučavati svojstva CSS jezika koja se primjenjuju na različite elemente HTML stranice: tekst, tablice, popise, obrasce i tako dalje. Konkretno, u ovom ćemo članku razmotriti načine postavljanja boje i prozirnosti elemenata na web stranici pomoću svojstava boje, boje pozadine i neprozirnosti..

Baš o kompliciranom ili naučite CSS3. Dio 3. Načini postavljanja boja u CSS-u. Postavite transparentnost elementu HTML dokumenta

Napravite sljedeću strukturu HTML dokumenta kao što je prikazano u nastavku.

Spremite ovaj dokument kao color.html na flash pogon u CSS mapi

Također ćemo kreirati i spremati na flash pogon u CSS mapu datoteku stilova color.css

Dodajte nekoliko odlomaka na web stranicu color.html (oznake)

...

s bilo kojim tekstom (u našem slučaju 4 stavka)

Dobivamo sljedeću vrstu web stranice

Za svaki odlomak napišite naziv klase (class1, class2, class3 i class4) kao što je prikazano u nastavku

Svojstvo CSS boje omogućuje vam da odredite boju teksta unutar elementa u HTML dokumentu. Nakon svojstva boje označava se njegova vrijednost koja se može napisati na različite načine

Bilo koju boju u CSS-u možete postaviti na sljedeće načine: Korištenje engleskih naziva boja. Kroz šesterokutni kôd koji određuje količinu crvene, plave i zelene boje. Ovaj se kôd piše nakon znaka # RGB koja izražava boju u proporcijama crvene, plave i zelene prema RGB modelu. RGBA vrijednost i dalje je ista RGB vrijednost, kojoj se dodaje četvrti parametar, takozvani alfa kanal, koji uzima vrijednost od 0,0 (prozirnost) do 1,0 (neprozirnost) i omogućava vam određivanje stupnja neprozirnosti elementa. HSL vrijednost dodana u CSS3 kao alternativni način određivanja boje. Ova vrijednost počinje slovima hsl, zatim parametrima u zagradama koji izražavaju nijansu, zasićenost i lakoću boje. HSLA vrijednost ista je HSL vrijednost kojoj se, kao u slučaju RGBA vrijednosti, dodaje četvrti parametar takozvani alfa kanal uzimajući vrijednosti u rasponu od 0,0 do 1,0

Na web stranici https://colorscheme.ru/ imena, heksadecimalni kodovi, RGB vrijednosti HTML boja predstavljeni su u prikladnom obliku

Također na web stranici https://colorscheme.ru/ predstavljen je univerzalni pretvarač boja, koji ćemo koristiti u budućnosti. Ovaj pretvarač omogućuje pretvaranje boja s jednog modela boje u drugi, na primjer iz RGB u HSL, pretvaranje šesterokutnog koda boje u RGB vrijednost i tako dalje..

Za prvi odlomak stavite tekst u plavu boju (ovom stavku dodijelili smo klasu pod nazivom class1)

U datoteci stila color.css nakon svojstva boje odredite naziv boje (plavu) kao vrijednost

Kao što vidite, tekst prvog stavka promijenio je boju u plavu (plavu)

Promijenite boju teksta iz drugog stavka (class2) u darkorchid

Kao vrijednost svojstva boje napišite boju darkorchida kao šesterokutni kod, naime # 9932cc

Kao što vidite, boja teksta drugog stavka promijenjena je u darkorchid (# 9932cc)

Promijenite boju teksta trećeg stavka (klasa 3) u fuksiju boje (magenta), označavajući je kao RGB vrijednost nakon svojstva boje. Primijetit ćete da su boje fuksije i magenta u osnovi identične i imaju iste heksadecimalne kodove (# ff00ff) i RGB vrijednosti (255,0255)

Nakon RGB svojstva boje pišemo vrijednost boje fuksije (magenta) na sljedeći način: boja: rgb (255,0255)

Boja teksta trećeg stavka promijenjena je u fuksiju (magenta)

Promijenite boju teksta četvrtog stavka (klasa 4) koristeći HSL vrijednost. Kao što je gore spomenuto, vrijednost HSL određena je s tri parametra: nijansom, zasićenošću i svjetlošću

Svaki od ovih parametara smatramo zasebno. Da biste naznačili nijansu, na kotaču u boji morate odrediti kut rotacije (od 0 ° do 360 °), kao što je prikazano na donjoj slici. Na primjer, zelena odgovara kutu rotacije od 120 °, a plava kutu rotacije od 270 °

Parametar zasićenja određuje zasićenost odabrane nijanse. Zasićenost u modelu HSL boja prikazana je kao postotak u rasponu od 0% do 100%. Što se bliži vrijednost ovog parametra 100%, boja izgleda čistija, a ako zasićenost ima tendenciju do 0%, tada boja postaje izblijedjela. Parametar svjetlosti određuje svjetlinu boje i, poput parametra zasićenja, određuje se kao postotak u rasponu od 0% do 100%. Što je veća vrijednost ovog parametra, boja postaje svjetlija. Promijenite boju teksta četvrtog stavka u lawngreen

Budući da želimo specificirati HSL vrijednost kao vrijednost za svojstvo boje, moramo pretvoriti boju zakonskog zaslona (# 7CFC00 ili 124.252.0) u model boje HSL. Da biste to učinili, upotrijebite internetski pretvarač boja na https://colorscheme.ru/color-converter.html. Na primjer, u liniji modela u boji odredite zakonsku vrijednost boje, na primjer RGB, točnije 124.252.0, i malo niže možemo vidjeti rezultat pretvorbe u HSL (hsl (90.100%, 49%))

Nakon svojstva boje navedite vrijednost hsl (90,100%, 49%)

Kao što vidite, boja teksta četvrtog stavka promijenjena je u lawngreen

Razmotrite drugo svojstvo CSS-a kao boju pozadine. Svojstvo boje pozadine postavlja boju pozadine elementa u HTML dokumentu. Možete postaviti vrijednost za svojstvo boje pozadine na iste načine koji smo smatrali za određivanje boje teksta: korištenjem engleskih naziva boja, šesterokutnog koda boje, RGB vrijednosti i HSL vrijednosti Promijenite boju pozadine za četiri stavka koristeći svojstvo boje pozadine na različite načine da odredite boju , Za prvi odlomak postavite boju pozadine pomoću engleskog naziva boje, na primjer darkgray. Na listu stilova napišite boju pozadine: darkgray

Boja pozadine prvog stavka promijenjena je u tamnoplavu

Promijenite boju teksta drugog stavka u aqua (cijan)

Postavite heksadecimalni kod boje aqua (cijan) kao vrijednost za svojstvo boje pozadine

Dobivamo sljedeće

Za treći odlomak postavite boju pozadine na zelenu boju koristeći RGB vrijednost (173,255,47)

U datoteci stilova color.css navedite boju pozadine: rgb (173,255,47)

Četvrti odlomak postavite na crnu boju pozadine pomoću vrijednosti hsl

U datoteci stilova color.css određujemo svojstvo boje pozadine sa vrijednošću hsl (0,0%, 0%)

Kao rezultat, dobivamo sljedeće

U CSS3 postoji nekoliko načina za postavljanje transparentnosti elemenata u HTML dokumentu:

Svojstvo neprozirnosti omogućuje vam određivanje stupnja prozirnosti elementa i bilo kojeg njegovog podređenog. Svojstvo neprozirnosti prihvaća vrijednosti u rasponu od 0,0 (potpuno prozirno) do 1,0 (neprozirno) Korištenjem RGBA modela u boji, koji vam omogućuje postavljanje boje na isti način kao i RGB. Za razliku od RGB, RGBA ima četvrti parametar, takozvani alfa kanal, koji vam omogućuje da odredite stupanj prozirnosti elementa. Ovaj parametar prihvaća vrijednosti u rasponu od 0,0 do 1,0. HSLA model boja, koji omogućava izražavanje boje s obzirom na nijansu, zasićenost i svjetlost, a na isti način kao i RGBA model boja, dodaje vrijednost prozirnosti kao četvrti parametar, takozvani alfa kanal. Ovaj parametar, kao u slučaju RGBA, može primiti vrijednosti od 0,0 do 1,0. Razmotrite sve metode za postavljanje transparentnosti (koristeći tekst kao primjer) koristeći posebne primjere. U datoteci color.css izbrišite sva svojstva boje pozadine

Nakon svojstva neprozirnosti prikazuje se njegova vrijednost koja može biti u rasponu od 0,0 do 1,0. Što se bliži vrijednost ovog svojstva 1, veća je neprozirnost elementa

U svakom odlomku postavite sljedeće vrijednosti svojstva neprozirnosti: Za prvi odlomak (kojem je dodijeljena klasa s imenom class1) navedite broj 0,2 kao vrijednost za svojstvo neprozirnosti. Za drugi odlomak (dodijeljen razredu s imenom class2), odredite vrijednost 0,3 za svojstvo neprozirnosti. Za treći odlomak (dodijeljena klasa s imenom class3) kao vrijednost za svojstvo neprozirnosti, navedite broj 0,4. Za četvrti odlomak (kojem je dodijeljena klasa s imenom class4) kao vrijednost za svojstvo neprozirnosti, navedite broj 1,0

Kao rezultat, vidimo da je tekst prva tri stavka (na koji se primjenjuje svojstvo neprozirnosti s vrijednostima 0,2, 0,3 i 0,4) transparentniji od teksta četvrtog stavka (svojstvo neprozirnosti u vrijednosti od 1,0)

Uklonite svojstva boje i neprozirnosti iz datoteke color.css i postavite prozirnost teksta odlomaka pomoću funkcije hsla

U hsla funkciji postavlja se transparentnost, kao što je gore spomenuto, korištenjem parametra nazvanog alfa kanalom (alfa), koji uzima vrijednosti od 0,0 do 1,0.

U datoteku color.css za svaki odlomak upisujemo vrijednosti funkcije hsla:

Kao rezultat toga, dobivamo isti rezultat kao i pomoću svojstva neprozirnosti.

Postavite prozirnost teksta u odlomke pomoću rgba funkcije, gdje je četvrti parametar (alfa) odgovoran za razinu prozirnosti i uzima vrijednosti od 0,0 do 1,0

Dobivamo isti rezultat kao u slučaju hsla funkcije i svojstva neprozirnosti

Nastavak u članku: Samo o kompliciranom ili naučite CSS3. Dio 4. 1. Fontovi u HTML dokumentu. Obitelj fontova i @ font-face svojstva