Základy CSS: Práca s farbami

Pri navrhovaní webovej stránky je potrebné vziať do úvahy mnoho faktorov; písmo, tok UX a mnoho ďalších. Veľmi dôležitým prvkom dizajnu je farba. Dokonca aj jednoduché rozhodnutia, ako je farba značky, farba okraja a farba pozadia, poskytujú jednoznačný a viditeľný vplyv.

V tomto článku sa budeme zaoberať základmi farieb CSS a naučíme sa, ako premeniť web HTML na bezchybne vyzerajúci web.

Začíname s farbami CSS

Existuje určitý spôsob, ako popísať farby v CSS, ktorému počítač rozumie. Obvykle sa to robí tak, že sa farba rozdelí na rôzne zložky a vypočíta sa zmiešaná sada základných farieb, aby sa vytvorila požadovaná farba. Existuje niekoľko rôznych spôsobov, ako popísať farbu v CSS.

Používanie názvov farieb ako kľúčových slov

Väčšina moderných prehliadačov podporuje približne 140 názvov farieb CSS. Mohlo by to byť také jednoduché ako červená alebo tyrkysový pre farebné kľúčové slovo. Napriek tomu, že pomáha pri miernom rozsahu farieb, máte k dispozícii iba niekoľko nastavených farieb s nulovou kontrolou odtieňov a odtieňov. Tu budete musieť skočiť na vyšší rozsah možností farieb CSS.

/*Syntax*/
farba: červená;
farba: karmínová;
farba: slateblue;

Použitie hodnôt RGB

Pri navrhovaní webovej stránky alebo aplikácie, farebná schéma na veľa záleží - rozhodne by to nemalo byť to posledné, čo zvažujete. V CSS môžete na zobrazenie farby RGB použiť tri metódy. Jedná sa o hexadecimálny reťazcový zápis, funkčný zápis RGB a funkčný zápis HSL. Tu je bližší pohľad na každého z nich.

Hexadecimal String Notation

Hexadecimálny reťazcový zápis vždy začína znakom #. Za týmto znakom určujete farby pomocou hexadecimálnych číslic konkrétneho kódu farby. V reťazci sa nerozlišujú malé a veľké písmená, ale bežne sa používajú malé písmená. Tu je niekoľko prípadov použitia:

#rrggbb

Je to najbežnejší spôsob popisu numerickej farby. Je to úplne nepriehľadná farba s červenými, zelenými a modrými komponentmi ako 0xrr, 0xgga 0xbb resp.

#rrggbbaa

Dodržiava vyššie uvedené kritériá RGB s alfa kanálom, ktorý zvláda čistotu farby. Čím nižšia je 0xaa hodnota je, čím je farba priesvitnejšia.

#rgb

Ak máte farbu #556677, môžete to jednoducho napísať ako #567 pretože predstavuje 0xrr, 0xgga 0xbb resp. Napríklad #000 (alebo #000000) je čierna #fff (alebo #ffffff) je biela.

#rgba

Dodržiava vyššie uvedené kritériá s alfa kanálom špecifikovaným 0xaa kontrolovať nepriehľadnosť.

Funkčný zápis RGB

Funkčný zápis RGB predstavuje farby pomocou červených, zelených a modrých komponentov. Je definovaný pomocou rgb () funkcia ktorý prijíma vstupné parametre vo forme primárnych červených, zelených a modrých komponentov (a voliteľného alfa kanála). Červená, zelená a modrá hodnota musia byť celé čísla medzi nimi 0 do 255 (vrátane) alebo percento pohybujúce sa od 0% do 100%. Na druhej strane alfa kanál prijíma hodnoty od 0,0 (úplne priehľadný) do 1,0 (úplne nepriehľadný). Prijíma tiež percentuálnu hodnotu od 0% (rovnako ako 0,0) a 100% (rovnako ako 1,0).

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

Funkčný zápis HSL

Funkčný zápis HSL predstavuje farbu s použitím odtieňa, sýtosti a svietivosti. Je to veľmi podobné ako rgb () funkciu z hľadiska použitia. Môžete ľahko nájdite hexadecimálnu hodnotu akejkoľvek farby na obrazovke vášho počítača. Pri tejto farebnej metóde odtieň definuje skutočnú farbu podľa polohy na farebnom koliesku. Sýtosť je percento šedej s maximálnym možným odtieňom. Svietivosť pri zvyšovaní mení farbu z jej najtmavšieho na najjasnejší vzhľad.

Hodnota odtieňa (H) je určená podporovanou uhlovou jednotkou v CSS. Obsahuje deg, rad, grada otočiť. Saturation (S) určuje percento konečnej farby tvorenej odtieňom. Zložka svietivosti (L) definuje úroveň šedej.

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

Použitie farieb na prvky HTML

V CSS sa farba vlastnosť definuje farbu popredia obsahu a farba pozadia definuje farbu pozadia obsahu štruktúrovaného pomocou HTML. Keď je prvok vykreslený, môžete použiť vlastnosti farby na jeho štylizáciu.

Farebná vlastnosť pre texty

The farba Táto vlastnosť sa používa pri kreslení textu a keď potrebujete akýkoľvek druh textových dekorácií. Môžete použiť text-dekorácia-farba vlastnosť vykresľovať podčiarknutia, podčiarknutia alebo prečiarknuté čiary rôznych farieb. Farbu pozadia textu môžete zmeniť pomocou farba pozadia nehnuteľnosť. Na text môžete použiť tieňový efekt pomocou text-tieň nehnuteľnosť. Môžete si vybrať text-dôraz-farba pri kreslení zvýrazňovacích symbolov do textových polí.

Farebná vlastnosť pre škatule

Ako viete, všetko na webovej stránke nasleduje podľa krabicového modelu. Každý prvok je teda rámček s nejakým druhom obsahu a voliteľným polstrovaním, okrajom a okrajovou oblasťou. Môžete použiť farba pozadia vlastnosť, keď neexistuje žiadny obsah v popredí. Keď kreslíte čiaru, aby ste oddelili stĺpce textu, môžete použiť farba pravidla stĺpca majetok za to. K dispozícii je farba obrysu vlastnosť na zafarbenie obrysu. Všimnite si, že obrys sa líši od okraja - slúži ako indikátor zaostrenia.

Farebná vlastnosť pre okraje

Akýkoľvek prvok HTML môže mať orámovanie. Môžete nastaviť farba okraja majetok ako border-top-color, border-right-color, farba dolného okrajaa orámovanie-ľavá farba na nastavenie farby orámovania zodpovedajúcich strán. Používanie skratky je však dobrou praxou.

The border-inline-start-color Táto vlastnosť vám umožňuje zafarbiť okraje okraja, ktoré sú najbližšie k začiatku. Na druhej strane, border-inline-end-color Táto vlastnosť vám umožňuje zafarbiť koniec začiatku riadkov textu v poli. Aj keď sa líši v závislosti od vášho režim písania, orientácia na texta smer.

Balenie: farba a dostupnosť

Aj keď je krásne navrhnutá webová stránka výrazne ovplyvnená použitou farbou, vždy by ste sa mali uistiť, že je prístupná. Nesprávne používanie farieb môže viesť k strate značnej návštevnosti vašich webových stránok.

Použitie hexadecimálnych zápisov reťazcov, názvov farieb alebo hodnôt RGB je úplne na vás. Len sa uistite, že používate farby na posilnenie existujúceho textu a dodržujte stanovenú vizuálnu hierarchiu. Naučiť sa viac o teórii farieb a vytvárať si vlastnú paletu je vynikajúci nápad, ak ste začínajúci webový vývojár. Do tej doby šťastné a farebné kódovanie!

Ako používať teóriu farieb na zlepšenie svojich kreatívnych projektov

Použitím správnych farieb správnym spôsobom môžete posunúť svoje kreatívne projekty na úplne novú úroveň.

Čítajte ďalej

O autorovi