CSS -i põhialused: värvidega töötamine

Veebisaidi kujundamisel tuleb arvestada paljude teguritega; font, UX -voog ja palju muud. Üks väga oluline disainielement on värv. Isegi lihtsad otsused, nagu kaubamärgi värv, äärisevärv ja taustavärv, annavad kindla ja märgatava mõju.

Selles artiklis käsitleme CSS-i värvide põhialuseid ja õpime, kuidas muuta HTML-sait laitmatu välimusega veebisaidiks.

CSS -värvidega alustamine

CSS -is värve saab kirjeldada teatud viisil, millest arvuti saab aru. Tavaliselt tehakse see värvi purustamiseks erinevateks komponentideks, arvutades soovitud värvi saamiseks kokku põhivärvide komplekti. CSS -is on värvi kirjeldamiseks mitmeid erinevaid viise.

Värvinimede kasutamine märksõnadena

Enamik kaasaegseid brausereid toetab umbes 140 CSS -värvinime. See võib olla nii lihtne kui punane või tsüaan värvi märksõna jaoks. Ehkki see aitab mõõduka värvivaliku puhul, piirdute mõne värviga, mille toone ja toone ei kontrollita. Siin peate liikuma CSS -i värvivalikute kõrgema vahemiku juurde.

/*Syntax*/
värv: punane;
värv: karmiinpunane;
värv: kiltkivi sinine;

RGB väärtuste kasutamine

Veebisaidi või rakenduse kujundamisel kasutatakse värviskeem on oluline - see ei tohiks kindlasti olla viimane asi, mida kaalute. CSS -is saate RGB -värvi esitamiseks kasutada kolme meetodit. Need on kuueteistkümnendsüsteem, RGB funktsionaalne märge ja HSL funktsionaalne märge. Siin on igaüks neist lähemalt.

Kuueteistkümnendsüsteemi stringide märge

Kuueteistkümnendsüsteemi tähistamine algab alati märgiga #. Selle märgi järel määrate värvid, kasutades konkreetse värvikoodi kuueteistkümnendnumbreid. String ei ole tõstutundlik, kuid tavapärane on kasutada väiketähti. Siin on mõned kasutusjuhud:

#rrggbb

See on kõige tavalisem viis numbrilise värvi kirjeldamiseks. See on täiesti läbipaistmatu värv punaste, roheliste ja siniste komponentidega 0xrr, 0xggja 0xbb vastavalt.

#rrggbbaa

See järgib eespool kirjeldatud RGB kriteeriume koos alfa -kanaliga, mis tegeleb värvi õrnusega. Mida madalam on 0xaa väärtus on, seda läbipaistvamaks värv muutub.

#rgb

Kui teil on värvi #556677, saate selle lihtsalt kirjutada #567 kuna see esindab 0xrr, 0xggja 0xbb vastavalt. Näiteks, #000 (või #000000) on samal ajal must #fff (või #ffffff) on valge.

#rgba

See järgib ülaltoodud kriteeriume alfa -kanaliga, mille on määranud 0xaa läbipaistmatuse kontrollimiseks.

RGB funktsionaalne märge

RGB funktsionaalne märge tähistab värve, kasutades punast, rohelist ja sinist komponenti. See on määratletud, kasutades rgb () funktsioon mis aktsepteerib sisendparameetreid esmaste punaste, roheliste ja siniste komponentide kujul (ja valikuline alfa -kanal). Punase, rohelise ja sinise väärtused peavad olema täisarv 0 et 255 (kaasa arvatud) või protsent varieerub vahemikus 0% kuni 100%. Teisest küljest aktsepteerib alfa -kanal väärtusi 0,0 (täiesti läbipaistev) kuni 1,0 (täiesti läbipaistmatu). See aktsepteerib ka protsentuaalset väärtust alates 0% (sama kui 0,0) ja 100% (sama kui 1,0).

/*Syntax*/
värv: rgb (rr, gg, bb);
värv: rgba (rr, gg, bb, a);

HSL funktsionaalne märge

HSL funktsionaalne märge tähistab värvi, kasutades tooni, küllastust ja heledust. See on väga sarnane rgb () funktsiooni poolest. Saate hõlpsalt leidke mis tahes värvi kuuskantväärtus arvuti ekraanil. Selle värvimeetodi puhul määrab toon tegeliku värvi vastavalt värviratta asukohale. Küllastus on halli protsent maksimaalse võimaliku tooniga. Heledus muudab värvi suurenedes selle tumedamalt võimalikult heledaks.

Tooni väärtuse (H) määrab CSS -i toetatud nurgaühik. See sisaldab kraadi, rad, gradja pööre. Küllastus (S) määrab tooni moodustava lõpliku värvi protsendi. Heleduse (L) komponent määrab halli taseme.

/*Syntax*/
värv: hsl (XXdeg, XX%, XX%);
värv: hsl (XXpööre, XX%, XX%);

Värvide rakendamine HTML -elementidele

CSS -is on värvi atribuut määrab sisu esiplaani värvi ja taustavärv määrab HTML -i struktureeritud sisu taustavärvi. Kui element on renderdatud, saate selle stiilimiseks kasutada värviomadusi.

Värvide omadus tekstide jaoks

The värvi atribuuti kasutatakse teksti joonistamisel ja kui vajate mis tahes teksti kaunistusi. Võite kasutada teksti kaunistamise värv atribuudid, mis muudavad erinevate värvidega allajoonitud, ülejoonitud või läbikriipsutatud jooned. Teksti taustavärvi saate muuta nupu abil taustavärv vara. Saate tekstile rakendada variefekti, kasutades tekst-vari vara. Saate valida teksti rõhutamine-värv joonistades tekstiväljadele rõhusümbolid.

Värvide omadus kastidele

Nagu teate, järgib kõik veebilehel olevad asjad kasti mudelit. Seega on iga element kast, millel on mingi sisu ja valikuline polster, ääris ja veeriste ala. Võite kasutada taustavärv vara, kui esiplaanil olevat sisu pole. Kui joonistate teksti veergude eraldamiseks joone, saate kasutada tulp-reegel-värv vara selle eest. Seal on kontuur-värv omadus kontuuri värvida. Pange tähele, et kontuur erineb piirist - see toimib fookusnäidikuna.

Ääriste värviomadused

Igal HTML -elemendil võib olla ääris. Saate määrata äärisevärv vara nagu ääris-top-värv, ääris-parem-värv, ääris-alt-värvja ääris-vasak-värv vastavate külgede äärise värvi määramiseks. Kiirkirjelduse kasutamine on siiski hea tava.

The border-inline-start-color atribuut võimaldab teil värvida ääre servad, mis on kõige lähemal algusele. Teisest küljest, border-inline-end-color atribuut võimaldab teil värvida kastis olevate tekstiridade alguse lõpu. Kuigi see sõltub teie omadest kirjutamisrežiim, tekstile orienteeritusja suunda.

Ümbramine: värv ja juurdepääsetavus

Kuigi kaunilt kujundatud veebisaiti mõjutab suuresti kasutatud värv, peaksite alati veenduma, et see on juurdepääsetav. Värvide ebaõige kasutamine võib põhjustada teie veebisaidi märkimisväärse liikluse kadumise.

Kuueteistkümnendsüsteemi tähiste, värvide nimede või RGB väärtuste kasutamine on täielikult teie otsustada. Lihtsalt veenduge, et kasutate olemasoleva teksti tugevdamiseks värve ja järgige seda kindla visuaalse hierarhia järgi. Värviteooria kohta lisateabe saamine ja oma paleti loomine on suurepärane idee, kui olete algaja veebiarendaja. Seniks aga rõõmsat ja värvikat kodeerimist!

Kuidas kasutada värviteooriat oma loominguliste projektide tõstmiseks

Õigeid värve õigesti kasutades saate oma loomingulised projektid viia täiesti uuele tasemele.

Loe edasi

Autori kohta