Osnove CSS -a: Rad s bojama

Prilikom projektiranja web stranice potrebno je uzeti u obzir mnoge čimbenike; font, UX tok i još mnogo toga. Jedan vrlo važan element dizajna je boja. Čak i jednostavne odluke poput boje robne marke, boje obruba i boje pozadine daju definitivan i zamjetan utjecaj.

U ovom ćemo članku obraditi osnove CSS boja i naučiti kako pretvoriti HTML web mjesto u web mjesto besprijekornog izgleda.

Početak rada s CSS bojama

Postoji određeni način za opisivanje boja u CSS -u koje računalo može razumjeti. Obično se radi razbijanjem boje na različite komponente, izračunavanjem mješovitog skupa primarnih boja kako bi se dobila željena boja. Postoji nekoliko različitih načina za opisivanje boje u CSS -u.

Korištenje naziva boja kao ključnih riječi

Postoji približno 140 naziva boja CSS -a koje većina modernih preglednika podržava. Moglo bi biti jednostavno kao Crvena ili cijan za ključnu riječ u boji. Iako pomaže s umjerenim rasponom boja, ograničeni ste na nekoliko postavljenih boja s nultom kontrolom nijansi i nijansi. Ovdje ćete morati skočiti na viši raspon opcija boja CSS -a.

/*Syntax*/
boja: crvena;
boja: grimizna;
boja: slateblue;

Korištenje RGB vrijednosti

Prilikom projektiranja web stranice ili aplikacije, Shema boja jako je važno - definitivno ne bi trebalo biti posljednje na što mislite. U CSS -u možete koristiti tri metode za predstavljanje RGB boje. To su heksadecimalni zapis niza, RGB funkcionalni zapis i HSL funkcionalni zapis. Evo pobliže svakog od njih.

Heksadecimalni zapis niza

Heksadecimalni zapis niza uvijek počinje znakom #. Nakon ovog znaka, boje navodite heksadecimalnim znamenkama određenog koda boje. Niz ne razlikuje velika i mala slova, ali uobičajeno je koristiti mala slova. Evo nekoliko slučajeva uporabe:

#rrggbb

To je najčešći način opisivanja numeričke boje. To je potpuno neprozirna boja s crvenim, zelenim i plavim komponentama 0xrr, 0xgg, i 0xbb odnosno.

#rrggbbaa

Slijedi gore navedene RGB kriterije s alfa kanalom koji obrađuje čistoću boje. Što je niži 0xaa vrijednost je što boja postaje prozirnija.

#rgb

Ako imate boju #556677, možete jednostavno napisati kao #567 budući da predstavlja 0xrr, 0xgg, i 0xbb odnosno. Na primjer, #000 (ili #000000) je crna dok #F F F (ili #ffffff) je bijela.

#rgba

Slijedi gornje kriterije s alfa kanalom navedenim 0xaa za kontrolu neprozirnosti.

RGB Funkcionalni zapis

RGB funkcionalni zapis predstavlja boje koje koriste crvene, zelene i plave komponente. Definira se pomoću rgb () funkcija koji prihvaća ulazne parametre u obliku primarne crvene, zelene i plave komponente (i izborni alfa kanal). Crvene, zelene i plave vrijednosti moraju biti cijeli broj između 0 do 255 (uključujući) ili postotak koji varira od 0% do 100%. S druge strane, alfa kanal prihvaća vrijednosti od 0,0 (potpuno proziran) do 1,0 (potpuno neproziran). Također prihvaća postotnu vrijednost od 0% (isto kao 0,0) i 100% (isto kao 1,0).

/*Syntax*/
boja: rgb (rr, gg, bb);
boja: rgba (rr, gg, bb, a);

Funkcionalna oznaka HSL -a

Funkcionalna oznaka HSL -a predstavlja boju pomoću boje, zasićenja i svjetline. Vrlo je sličan rgb () funkciju u smislu korištenja. Možete lako pronaći hex vrijednost bilo koje boje na ekranu vašeg računala. U ovoj metodi boje, nijansa definira stvarnu boju prema položaju na kotaču boja. Zasićenost je postotak sive s najvećom mogućom nijansom. Sjajnost mijenja boju s najtamnije u najsvjetliju moguću pojavu kako se povećava.

Vrijednost nijanse (H) određena je podržanom jedinicom kuta u CSS -u. Uključuje stup, rad, grad, i skretanje. Zasićenost (S) određuje postotak konačne boje koja se sastoji od nijanse. Komponenta svjetline (L) definira razinu sive boje.

/*Syntax*/
boja: hsl (XXdeg, XX%, XX%);
boja: hsl (XXturn, XX%, XX%);

Primjena boja na HTML elemente

U CSS -u, boja svojstvo definira boju sadržaja u prvom planu i boja pozadine definira boju pozadine sadržaja strukturiranog HTML -om. Kada se element iscrta, možete ga koristiti za svojstvo boje.

Svojstvo boje za tekstove

The boja svojstvo koristi se za crtanje teksta i kada vam je potrebna bilo kakva vrsta ukrasa za tekst. Možete koristiti tekst-ukras-boja svojstvo za iscrtavanje, podcrtavanje ili precrtavanje linija različitih boja. Boju pozadine teksta možete promijeniti pomoću boja pozadine imovine. Na tekst možete primijeniti efekt sjene pomoću tekst-sjena imovine. Možete odabrati tekst-naglasak-boja dok crtate simbole naglaska u tekstualnim poljima.

Svojstvo boje za kutije

Kao što znate, sve na web stranici slijedi model okvira. Dakle, svaki je element kutija s nekom vrstom sadržaja i opcionalnim uloškom, rubom i rubnim područjem. Možete koristiti boja pozadine svojstvo kada nema sadržaja u prvom planu. Kada crtate liniju kako biste odvojili stupce teksta, možete koristiti stupac-pravilo-boja imovine za to. Postoji jedan obris-boja svojstvo boje obrisa. Imajte na umu da se obris razlikuje od obruba - djeluje kao pokazatelj fokusa.

Svojstvo boje za granice

Svaki HTML element može imati obrub. Možete postaviti bordura nekretnina kao bordura-gornja-boja, obrub-desno-boja, boja obruba-dna, i obrub-lijevo-boja za postavljanje boje obruba odgovarajućih stranica. Korištenje stenografskog svojstva ipak je dobra praksa.

The border-inline-start-color Svojstvo vam omogućuje da obojite rubove obruba koji su najbliži početku. S druge strane, border-inline-end-color Svojstvo vam omogućuje da obojite kraj početka redaka teksta unutar okvira. Iako varira ovisno o vašem način pisanja, tekstualna orijentacija, i smjer.

Zaključak: Boja i pristupačnost

Iako je lijepo dizajnirana web stranica pod velikim utjecajem korištene boje, uvijek biste trebali biti sigurni da je dostupna. Nepravilna upotreba boja može dovesti do gubitka značajnog prometa na vašoj web stranici.

Korištenje heksadecimalnih zapisa niza, naziva boja ili RGB vrijednosti potpuno je na vama. Samo pazite da koristite boje za jačanje postojećeg teksta i neka slijedi utvrđenu vizualnu hijerarhiju. Naučiti više o teoriji boja i stvoriti vlastitu paletu izvrsna je ideja ako ste početnik u razvoju web stranica. Do tada, sretno i šareno kodiranje!

Kako koristiti teoriju boja za podizanje vaših kreativnih projekata

Korištenjem odgovarajućih boja na pravi način možete podići svoje kreativne projekte na potpuno novu razinu.

Pročitajte Dalje

O autoru