Základy CSS: Práce s barvami

Při navrhování webové stránky je třeba vzít v úvahu mnoho faktorů; písmo, tok UX a mnoho dalšího. Jedním velmi důležitým designovým prvkem je barva. Dokonce i jednoduchá rozhodnutí, jako je barva značky, barva ohraničení a barva pozadí, poskytují jednoznačný a viditelný dopad.

V tomto článku se budeme zabývat základy barev CSS a naučíme se, jak transformovat web HTML na bezvadně vypadající web.

Začínáme s barvami CSS

Existuje určitý způsob, jak popsat barvy v CSS, kterému počítač rozumí. Obvykle se to dělá tak, že se barva rozdělí na různé složky a vypočítá se smíšená sada primárních barev, aby se vytvořila požadovaná barva. Existuje několik různých způsobů, jak popsat barvu v CSS.

Používání názvů barev jako klíčových slov

Většina moderních prohlížečů podporuje přibližně 140 názvů barev CSS. Mohlo by to být tak jednoduché jako Červené nebo tyrkysová pro klíčové slovo barva. Ačkoli to pomáhá s mírným rozsahem barev, jste omezeni na několik nastavených barev s nulovou kontrolou odstínů a odstínů. Zde budete muset přeskočit na vyšší rozsah barevných možností CSS.

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

Použití hodnot RGB

Při navrhování webové stránky nebo aplikace barevné schéma na tom hodně záleží - rozhodně by to nemělo být to poslední, co zvažuješ. V CSS můžete k zobrazení barvy RGB použít tři metody. Jedná se o hexadecimální notaci řetězců, funkční notaci RGB a funkční notaci HSL. Zde je bližší pohled na každého z nich.

Šestnáctkový řetězec

Šestnáctkový řetězec vždy začíná znakem #. Za tímto znakem určujete barvy pomocí hexadecimálních číslic konkrétního barevného kódu. Řetězec nerozlišuje velká a malá písmena, ale je běžné používat malá písmena. Zde je několik případů použití:

#rrggbb

Je to nejběžnější způsob popisu číselné barvy. Je to zcela neprůhledná barva s červenými, zelenými a modrými komponenty jako 0xrr, 0xgg, a 0xbb resp.

#rrggbbaa

Dodržuje kritéria RGB nastíněná výše s alfa kanálem, který zvládá čistotu barvy. Čím nižší je 0xaa hodnota je, čím je barva průsvitnější.

#rgb

Pokud máte barvu #556677, můžete to jednoduše napsat jako #567 protože to představuje 0xrr, 0xgg, a 0xbb resp. Například, #000 (nebo #000000) je černá #fff (nebo #ffffff) je bílá.

#rgba

Dodržuje výše uvedená kritéria s alfa kanálem určeným 0xaa ovládat neprůhlednost.

Funkční zápis RGB

Funkční zápis RGB představuje barvy pomocí červené, zelené a modré složky. Je definován pomocí rgb () funkce který přijímá vstupní parametry ve formě primárních červených, zelených a modrých komponent (a volitelný alfa kanál). Červená, zelená a modrá hodnota musí být celé číslo mezi 0 na 255 (včetně), nebo procento pohybující se od 0% do 100%. Na druhou stranu alfa kanál přijímá hodnoty od 0,0 (zcela transparentní) do 1,0 (zcela neprůhledné). Přijímá také procentuální hodnotu od 0% (stejné jako 0,0) a 100% (stejné jako 1,0).

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

Funkční notace HSL

Funkční notace HSL představuje barvu pomocí odstínu, sytosti a svítivosti. Je to velmi podobné rgb () funkce z hlediska použití. Můžete snadno najděte hexadecimální hodnotu jakékoli barvy na obrazovce vašeho počítače. V této barevné metodě odstín definuje skutečnou barvu podle polohy na barevném kolečku. Sytost je procento šedé barvy s maximálním možným odstínem. Světelnost mění barvu z jejího nejtmavšího na nejjasnější vzhled, jak se zvyšuje.

Hodnota odstínu (H) je určena podporovanou úhlovou jednotkou v CSS. To zahrnuje deg, rad, grad, a otáčet se. Sytost (S) určuje procento konečné barvy tvořené odstínem. Složka svítivosti (L) definuje úroveň šedé.

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

Použití barev na prvky HTML

V CSS se barva vlastnost definuje barvu popředí obsahu a barva pozadí definuje barvu pozadí obsahu strukturovaného HTML. Když je prvek vykreslen, můžete použít vlastnosti barev k jeho stylu.

Vlastnost barev pro texty

The barva vlastnost se používá při kreslení textu a když potřebujete jakýkoli druh textových dekorací. Můžete použít text-dekorace-barva vlastnost k vykreslení podtržení, podtržení nebo přeškrtnutí čar různých barev. Barvu pozadí textu můžete změnit pomocí barva pozadí vlastnictví. Na text můžete použít stínový efekt pomocí textový stín vlastnictví. Můžete vybrat text-důraz-barva při kreslení symbolů důrazu do textových polí.

Barevná vlastnost pro krabice

Jak víte, vše na webové stránce odpovídá krabicovému modelu. Každý prvek je tedy rámeček s nějakým druhem obsahu a volitelným odsazením, ohraničením a okrajovou oblastí. Můžete použít barva pozadí vlastnost, když není žádný obsah v popředí. Když kreslíte čáru, abyste oddělili sloupce textu, můžete použít sloupec-pravidlo-barva majetek za to. Existuje obrysová barva vlastnost k vybarvení obrysu. Všimněte si, že obrys se liší od ohraničení - funguje jako indikátor zaostření.

Vlastnost barvy pro ohraničení

Jakýkoli prvek HTML může mít ohraničení. Můžete nastavit barva okraje majetek jako border-top-color, border-right-color, barva spodního okraje, a border-left-color pro nastavení barvy ohraničení odpovídajících stran. Dobrou praxí je však použití zkratkové vlastnosti.

The border-inline-start-color vlastnost vám umožňuje vybarvit okraje okraje, které jsou nejblíže začátku. Na druhou stranu, border-inline-end-color vlastnost umožňuje vybarvit konec začátku řádků textu v poli. Ačkoli se liší v závislosti na vašem režim psaní, orientace textu, a směr.

Balení: barva a přístupnost

Ačkoli krásně navržený web je silně ovlivněn použitou barvou, měli byste se vždy ujistit, že je přístupný. Nesprávné použití barev může mít za následek ztrátu značného provozu na vašem webu.

Použití šestnáctkových řetězcových zápisů, názvů barev nebo hodnot RGB je zcela na vás. Jen se ujistěte, že používáte barvy k posílení stávajícího textu, a dodržujte určenou vizuální hierarchii. Zjistit více o teorii barev a vytvořit si vlastní paletu je skvělý nápad, pokud jste začínající webový vývojář. Do té doby šťastné a barevné kódování!

Jak používat teorii barev ke zvýšení vašich kreativních projektů

Použitím správných barev správným způsobem můžete své kreativní projekty posunout na zcela novou úroveň.

Číst dále

O autorovi