CSS alapjai: Színekkel való munka

A weboldal tervezésekor sok tényezőt kell figyelembe venni; betűtípus, UX folyamat és még sok más. A tervezés egyik nagyon fontos eleme a szín. Még az olyan egyszerű döntések is, mint a márka színe, a szegély színe és a háttérszín, határozott és észrevehető hatást eredményeznek.

Ebben a cikkben a CSS színek alapjaival foglalkozunk, és megtanuljuk, hogyan lehet HTML-webhelyet kifogástalan kinézetű webhellyé alakítani.

Első lépések a CSS színekkel

Van egy bizonyos módszer a színek leírására a CSS -ben, amelyet a számítógép is megért. Ez általában úgy történik, hogy a színt különböző összetevőkre bontják, és kiszámítják az elsődleges színek vegyes készletét a kívánt szín kialakításához. Számos különböző módon lehet leírni a színt a CSS -ben.

Színnevek használata kulcsszóként

A legtöbb modern böngésző támogatja körülbelül 140 CSS színnevet. Ez olyan egyszerű lehet, mint piros vagy ciánkék a színes kulcsszóhoz. Bár ez segít a mérsékelt színtartományban, néhány színre korlátozódik, az árnyalatok és árnyalatok zéró szabályozása nélkül. Itt kell ugrani a CSS színválaszték magasabb tartományába.

/*Syntax*/
piros szín;
szín: bíborvörös;
szín: pala kék;

RGB értékek használata

Webhely vagy alkalmazás tervezése közben a színösszeállítás sokat számít - ez biztosan nem az utolsó dolog, amire gondol. A CSS -ben három módszert használhat az RGB szín ábrázolására. Ezek a hexadecimális karakterlánc jelölés, az RGB funkcionális jelölés és a HSL funkcionális jelölés. Íme közelebbről mindegyikük.

Hexadecimális karakterlánc jelölés

A hexadecimális karakterlánc mindig a karakterrel kezdődik #. Ezt a karaktert követve adja meg a színeket egy adott színkód hexadecimális számjegyeivel. A karakterlánc nem különbözteti meg a kis- és nagybetűket, de hagyományos a kisbetűk használata. Íme néhány használati eset:

#rrggbb

Ez a leggyakoribb módja a numerikus szín leírásának. Teljesen átlátszatlan szín, piros, zöld és kék komponensekkel 0xrr, 0xgg, és 0xbb illetőleg.

#rrggbbaa

A fentiekben vázolt RGB -kritériumokat követi egy alfa -csatornával, amely kezeli a szín fényességét. Minél alacsonyabb a 0xaa érték, annál átlátszóbb lesz a szín.

#rgb

Ha van színe #556677, egyszerűen úgy írhatja #567 hiszen képviseli 0xrr, 0xgg, és 0xbb illetőleg. Például, #000 (vagy #000000) közben fekete #fff (vagy #ffffff) fehér.

#rgba

A fenti kritériumokat követi egy által meghatározott alfa csatornával 0xaa az átlátszatlanság szabályozására.

RGB funkcionális jelölés

Az RGB funkcionális jelölés a vörös, zöld és kék összetevőket használó színeket jelöli. A segítségével definiálható rgb () függvény amely beviteli paramétereket fogad el elsődleges piros, zöld és kék komponensek (és opcionális alfa -csatorna) formájában. A piros, zöld és kék értékeknek egész számnak kell lenniük 0 nak nek 255 (beleértve), vagy 0% és 100% között változik. Másrészt az alfa -csatorna 0,0 (teljesen átlátszó) és 1,0 (teljesen átlátszatlan) értékeket fogad el. Ezenkívül elfogadja a százalékos értéket 0% (ugyanaz, mint 0,0) és 100% (ugyanaz, mint 1,0) között.

/*Syntax*/
szín: rgb (rr, gg, bb);
szín: rgba (rr, gg, bb, a);

HSL funkcionális jelölés

A HSL funkcionális jelölés a színeket árnyalatok, telítettség és fényerő segítségével képviseli. Nagyon hasonlít a rgb () funkciója a használat szempontjából. Könnyedén keresse meg bármely szín hexadecimális értékét a számítógép képernyőjén. Ennél a színmódszernél a színárnyalat határozza meg a tényleges színt a színkörön lévő pozíciónak megfelelően. A telítettség a szürke százalékos aránya a lehető legnagyobb árnyalattal. A fényesség növeli a színt a legsötétebbről a legfényesebb megjelenésre.

A színárnyalat értékét (H) a támogatott szög egység határozza meg a CSS -ben. Magába foglalja fok, rad, grád, és fordulat. A telítettség (S) határozza meg a színárnyalat végső színének százalékos arányát. A fényerő (L) összetevő határozza meg a szürke szintet.

/*Syntax*/
szín: hsl (XXdeg, XX%, XX%);
szín: hsl (XXfordulat, XX%, XX%);

Színek alkalmazása HTML elemekre

A CSS -ben a szín tulajdonság határozza meg a tartalom előtér színét, és háttérszín a HTML által strukturált tartalom háttérszínét határozza meg. Amikor egy elem renderelt, a színtulajdonságokat használhatja a stílushoz.

Színes tulajdonság a szövegekhez

Az szín tulajdonságot a szöveg rajzolásakor és bármilyen szövegdekorációra használja. Használhatja a szöveg-dekoráció-szín tulajdonság, amely különböző színű aláhúzásokat, felülhúzásokat vagy áthúzott vonalakat jelenít meg. A szöveg segítségével megváltoztathatja a szöveg háttérszínét háttérszín ingatlan. A szöveg használatával árnyékhatást alkalmazhat a szöveg használatával szöveg-árnyék ingatlan. Kiválaszthatja szöveg-kiemelés-szín miközben kiemelési szimbólumokat rajzol a szövegmezőkbe.

Színes tulajdonság a dobozokhoz

Mint tudják, egy weboldalon minden a doboz modelljét követi. Így minden elem egy doboz valamilyen tartalommal és opcionális kitöltéssel, szegéllyel és margóterülettel. Használhatja a háttérszín tulajdonság, ha nincs előtérben lévő tartalom. Amikor vonalat rajzol, hogy elválassza a szöveg oszlopait, használhatja a oszlop-szabály-szín vagyon hozzá. Van egy körvonal-szín tulajdonság a körvonal színezésére. Vegye figyelembe, hogy a körvonal eltér a szegélytől - fókuszmutatóként működik.

Színes tulajdonság a szegélyekhez

Bármely HTML elem rendelkezik szegéllyel. Beállíthatja a szegély színű ingatlan mint border-top-color, border-right-color, szegély-alsó-színű, és border-left-color a megfelelő oldalak szegélyszínének beállításához. A gyorsított tulajdonság használata azonban jó gyakorlat.

Az border-inline-start-color tulajdonság lehetővé teszi a szegély elejének legközelebbi széleinek kiszínezését. Másrészt a border-inline-end-color tulajdonság lehetővé teszi, hogy a mezőben lévő szövegsorok elejének végét kiszínezze. Bár az Öntől függően változik írásmód, szöveg-orientáció, és irány.

Csomagolás: szín és hozzáférhetőség

Annak ellenére, hogy egy gyönyörűen megtervezett webhelyet erősen befolyásol a használt szín, mindig ügyeljen arra, hogy hozzáférhető legyen. A szín nem megfelelő használata jelentős forgalom elvesztéséhez vezethet webhelyén.

A hexadecimális karakterlánc -jelölések, színnevek vagy RGB -értékek használata teljesen rajtad múlik. Csak győződjön meg arról, hogy színeket használ a meglévő szöveg megerősítésére, és kövesse a meghatározott vizuális hierarchiát. Ha többet szeretne megtudni a színelméletről és saját palettájának létrehozásáról, akkor kiváló ötlet, ha kezdő webfejlesztő. Addig is boldog és színes kódolást!

Hogyan használjuk a színelméletet a kreatív projektek fejlesztéséhez

A megfelelő színek megfelelő használatával teljesen új szintre emelheti kreatív projektjeit.

Olvassa tovább

A szerzőről