Osnove CSS: Delo z barvami

Pri oblikovanju spletne strani je treba upoštevati veliko dejavnikov; pisave, tok UX in še veliko več. Zelo pomemben element oblikovanja je barva. Tudi preproste odločitve, kot so barva blagovne znamke, barva obrobe in barva ozadja, prinašajo določen in opazen učinek.

V tem članku bomo obravnavali osnove barv CSS in se naučili, kako spletno mesto HTML spremeniti v brezhibno videti spletno mesto.

Začnite z barvami CSS

Računalnik lahko razume barve v CSS na določen način. Običajno to naredimo tako, da barvo razdelimo na različne komponente in izračunamo mešani nabor osnovnih barv, da dobimo želeno barvo. Obstaja več različnih načinov za opis barve v CSS.

Uporaba imen barv kot ključnih besed

Večina sodobnih brskalnikov podpira približno 140 barvnih imen CSS. Lahko je tako preprosto kot rdeča ali cijan za barvno ključno besedo. Čeprav pomaga pri zmerni paleti barv, ste omejeni na nekaj nastavljenih barv brez nadzora nad odtenki in odtenki. Tukaj boste morali skočiti na višji razpon barvnih možnosti CSS.

/*Syntax*/
barva: rdeča;
barva: škrlatna;
barva: škrlatna modra;

Uporaba vrednosti RGB

Med oblikovanjem spletnega mesta ali aplikacije je barvna shema zelo pomembno - vsekakor ne bi smelo biti zadnje, na kar pomislite. V CSS lahko uporabite tri metode za predstavitev barve RGB. To so šestnajstiški zapis niza, funkcijski zapis RGB in funkcijski zapis HSL. Tukaj je podrobnejši pogled na vsakega od njih.

Šestnajstiški zapis niza

Šestnajstiški zapis niza se vedno začne z znakom #. Po tem znaku določite barve s šestnajstiškimi števkami določene barvne kode. Niz ne razlikuje velikih in malih črk, vendar je običajno uporabljati male črke. Tu je nekaj primerov uporabe:

#rrggbb

To je najpogostejši način za opis številske barve. Je popolnoma neprozorna barva z rdečimi, zelenimi in modrimi komponentami 0xrr, 0xgg, in 0xbb oz.

#rrggbbaa

Sledi zgoraj opisanim kriterijem RGB z alfa kanalom, ki obravnava čistost barve. Nižje kot je 0xaa vrednost je, bolj barva postane bolj prosojna.

#rgb

Če imaš barvo #556677, lahko preprosto zapišete kot #567 saj predstavlja 0xrr, 0xgg, in 0xbb oz. Na primer, #000 (oz #000000) je medtem črna #fff (oz #ffffff) je bela.

#rgba

Sledi zgornjim merilom z alfa kanalom, ki ga določa 0xaa za nadzor motnosti.

Funkcionalni zapis RGB

Funkcionalni zapis RGB predstavlja barve z uporabo rdečih, zelenih in modrih komponent. Določeno je z uporabo funkcija rgb () ki sprejema vhodne parametre v obliki primarnih rdečih, zelenih in modrih komponent (in izbirni alfa kanal). Rdeča, zelena in modra vrednost morajo biti celo število med 0 do 255 (vključno) ali odstotek od 0% do 100%. Po drugi strani alfa kanal sprejema vrednosti od 0,0 (popolnoma pregleden) do 1,0 (popolnoma nepregleden). Sprejema tudi odstotno vrednost od 0% (enako kot 0,0) in 100% (enako kot 1,0).

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

Funkcionalni zapis HSL

Funkcionalni zapis HSL predstavlja barvo z odtenkom, nasičenostjo in svetilnostjo. Je zelo podoben rgb () funkcijo glede uporabe. Z lahkoto lahko poiščite šestnajstiško vrednost katere koli barve na zaslonu računalnika. Pri tej barvni metodi odtenek definira dejansko barvo glede na položaj na barvnem kolesu. Nasičenost je odstotek sive z največjim možnim odtenkom. Svetilnost ob naraščanju prehaja barvo iz najtemnejše v najsvetlejšo možno podobo.

Vrednost odtenka (H) določa podprta kotna enota v CSS. Vključuje deg, rad, grad, in obrat. Zasičenost (S) določa odstotek končne barve, sestavljene iz odtenka. Komponenta svetilnosti (L) določa raven sivine.

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

Uporaba barv elementom HTML

V CSS -ju je barvo lastnost določa barvo ospredja vsebine in Barva ozadja definira barvo ozadja vsebine, strukturirane s HTML. Ko je element upodobljen, ga lahko uporabite za oblikovanje barvnih lastnosti.

Barvna lastnost za besedila

The barvo lastnost se uporablja pri risanju besedila in kadar potrebujete kakršne koli okraske za besedilo. Uporabite lahko besedilo-dekoracija-barva lastnost za podčrtavanje, podčrtavanje ali prečrtane črte različnih barv. Barvo ozadja besedila lahko spremenite z Barva ozadja lastnine. Na besedilo lahko uporabite učinek sence senca besedila lastnine. Izberete lahko besedilo-poudarek-barva med risanjem simbolov poudarka v besedilnih poljih.

Barvna lastnost za škatle

Kot veste, vse na spletni strani sledi modelu škatle. Tako je vsak element polje z nekakšno vsebino in izbirnim oblazinjenjem, obrobo in robom. Uporabite lahko Barva ozadja lastnine, kadar ni vsebine v ospredju. Ko rišete črto, da ločite stolpce besedila, lahko uporabite barva stolpca-pravilo premoženje zanj. Obstaja an obris-barve lastnost obarvanja obrisa. Upoštevajte, da se obris razlikuje od obrobe - deluje kot kazalnik ostrenja.

Barvna lastnost za meje

Vsak element HTML ima lahko obrobo. Lahko nastavite obrobna barva premoženje kot barva na vrhu obrobe, obrobno-desne barve, barva meje-dna, in obrobno-levo-barva za nastavitev barve obrobe ustreznih strani. Uporaba stenopisne lastnine pa je dobra praksa.

The border-inline-start-color lastnost vam omogoča barvanje robov obrobe, ki so najbližje začetku. Po drugi strani pa border-inline-end-color lastnost vam omogoča, da obarvate konec začetka vrstic besedila v polju. Čeprav je odvisno od vašega pisni način, besedilno usmerjenost, in smer.

Zaključek: Barva in dostopnost

Čeprav na lepo oblikovano spletno stran močno vpliva uporabljena barva, se morate vedno prepričati, da je dostopna. Nepravilna uporaba barv lahko povzroči izgubo velikega prometa na vašem spletnem mestu.

Uporaba šestnajstiških zapisov nizov, imen barv ali vrednosti RGB je popolnoma vaša. Prepričajte se, da uporabljate barve za krepitev obstoječega besedila in naj sledi določeni vizualni hierarhiji. Več o teoriji barv in ustvarjanju lastne palete je izjemna ideja, če ste nadobudni spletni razvijalec. Do takrat pa veselo in barvito kodiranje!

Kako uporabiti barvno teorijo za dvig vaših ustvarjalnih projektov

Z uporabo pravih barv na pravi način lahko svoje ustvarjalne projekte dvignete na povsem novo raven.

Preberite Naprej

O avtorju