Podstawy CSS: praca z kolorami

Podczas projektowania strony internetowej należy wziąć pod uwagę wiele czynników; czcionka, przepływ UX i wiele więcej. Bardzo ważnym elementem projektu jest kolor. Nawet proste decyzje, takie jak kolor marki, kolor obramowania i kolor tła, mają wyraźny i zauważalny wpływ.

W tym artykule omówimy podstawy kolorów CSS i dowiemy się, jak przekształcić witrynę HTML w nienagannie wyglądającą witrynę.

Pierwsze kroki z kolorami CSS

Istnieje pewien sposób opisywania kolorów w CSS, który komputer może zrozumieć. Zwykle odbywa się to poprzez rozbicie koloru na różne składniki, obliczanie mieszanego zestawu kolorów podstawowych w celu uzyskania pożądanego koloru. Istnieje kilka różnych sposobów na opisanie koloru w CSS.

Używanie nazw kolorów jako słów kluczowych

Istnieje około 140 nazw kolorów CSS obsługiwanych przez większość nowoczesnych przeglądarek. To może być tak proste, jak czerwony lub cyjan dla słowa kluczowego kolor. Chociaż pomaga to w umiarkowanej gamie kolorów, jesteś ograniczony do kilku ustawionych kolorów z zerową kontrolą odcieni i odcieni. W tym miejscu musisz przejść do wyższego zakresu opcji kolorów CSS.

/*Syntax*/
kolor czerwony;
kolor: karmazynowy;
kolor: łupkowoniebieski;

Korzystanie z wartości RGB

Projektując stronę internetową lub aplikację, schemat kolorów ma duże znaczenie — zdecydowanie nie powinna to być ostatnia rzecz, którą bierzesz pod uwagę. W CSS możesz użyć trzech metod do reprezentowania koloru RGB. Są to szesnastkowa notacja ciągów, funkcjonalna notacja RGB i funkcjonalna notacja HSL. Oto bliższe spojrzenie na każdy z nich.

Notacja ciągu szesnastkowego

Notacja ciągów szesnastkowych zawsze zaczyna się od znaku #. Po tym znaku określasz kolory za pomocą cyfr szesnastkowych określonego kodu koloru. W ciągu nie jest rozróżniana wielkość liter, ale zwykle używa się małych liter. Oto kilka przypadków użycia:

#rrggbb

Jest to najczęstszy sposób opisywania koloru liczbowego. Jest to całkowicie nieprzezroczysty kolor z czerwonymi, zielonymi i niebieskimi składnikami, ponieważ 0xrr, 0xgg, oraz 0xbb odpowiednio.

#rrggbba

Jest zgodny z opisanymi powyżej kryteriami RGB z kanałem alfa, który obsługuje przejrzystość koloru. Im niższy 0xaa wartość jest, tym bardziej półprzezroczysty staje się kolor.

#rgb

Jeśli masz kolor #556677, możesz po prostu napisać to jako #567 ponieważ reprezentuje 0xrr, 0xgg, oraz 0xbb odpowiednio. Na przykład, #000 (lub #000000) jest czarny, podczas gdy #ffff (lub #ffffff) jest biały.

#rgba

Jest zgodny z powyższymi kryteriami z kanałem alfa określonym przez 0xaa do kontrolowania zmętnienia.

Notacja funkcjonalna RGB

Notacja funkcjonalna RGB przedstawia kolory za pomocą składowych czerwonego, zielonego i niebieskiego. Jest zdefiniowany za pomocą funkcja rgb() który akceptuje parametry wejściowe w postaci głównych składowych czerwonego, zielonego i niebieskiego (oraz opcjonalnego kanału alfa). Wartości czerwony, zielony i niebieski muszą być liczbą całkowitą między 0 do 255 (włącznie) lub odsetek wahający się od 0% do 100%. Z drugiej strony kanał alfa akceptuje wartości od 0,0 (całkowicie przezroczysty) do 1,0 (całkowicie nieprzezroczysty). Przyjmuje również wartość procentową od 0% (tak samo jak 0.0) i 100% (tak samo jak 1.0).

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

Notacja funkcjonalna HSL

Notacja funkcjonalna HSL reprezentuje kolor za pomocą odcienia, nasycenia i jasności. Jest bardzo podobny do rgb() funkcjonować pod względem użytkowania. Możesz łatwo znajdź wartość szesnastkową dowolnego koloru na ekranie komputera. W tej metodzie kolorów odcień określa rzeczywisty kolor zgodnie z pozycją na kole kolorów. Nasycenie to procent szarości o maksymalnym możliwym odcieniu. Jasność zmienia kolor od najciemniejszego do najjaśniejszego możliwego wraz ze wzrostem.

Wartość barwy (H) jest określona przez obsługiwaną jednostkę kąta w CSS. Obejmuje stopnie, rad, stopień, oraz zakręt. Nasycenie (S) określa procent końcowego koloru, na który składa się odcień. Składnik luminancji (L) określa poziom szarości.

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

Stosowanie kolorów do elementów HTML

W CSS kolor właściwość określa kolor pierwszego planu treści, a kolor tła definiuje kolor tła treści ustrukturyzowanej przez HTML. Kiedy element jest renderowany, możesz użyć właściwości koloru, aby nadać mu styl.

Właściwość koloru dla tekstów

ten kolor Właściwość jest używana podczas rysowania tekstu i gdy potrzebujesz wszelkiego rodzaju dekoracji tekstu. Możesz użyć kolor-dekoracji tekstu Właściwość do renderowania podkreśleń, nadkreśleń lub przekreślonych linii w różnych kolorach. Możesz zmienić kolor tła tekstu za pomocą kolor tła własność. Możesz zastosować efekt cienia na tekście, używając cień tekstu własność. Możesz wybrać kolor podkreślenia tekstu podczas rysowania symboli wyróżnienia w polach tekstowych.

Właściwość koloru dla pudełek

Jak wiesz, wszystko na stronie internetowej jest zgodne z modelem pudełkowym. W ten sposób każdy element jest pudełkiem z pewną zawartością i opcjonalnym dopełnieniem, obramowaniem i obszarem marginesu. Możesz użyć kolor tła właściwość, gdy nie ma zawartości pierwszego planu. Kiedy rysujesz linię w celu oddzielenia kolumn tekstu, możesz użyć kolumna-reguła-kolor za to własność. Jest kolor konturu właściwość, aby pokolorować kontur. Zauważ, że kontur różni się od obramowania — działa jak wskaźnik ostrości.

Właściwość koloru dla obramowań

Każdy element HTML może mieć obramowanie. Możesz ustawić kolor ramki nieruchomość jako kolor górnego obramowania, obramowanie-prawo-kolor, kolor-dolny-obramowania, oraz kolor-lewy-obramowania aby ustawić kolor obramowania odpowiednich boków. Korzystanie ze skrótowej własności jest jednak dobrą praktyką.

ten border-inline-start-color właściwość pozwala pokolorować krawędzie obramowania, które są najbliżej początku. Z drugiej strony border-inline-end-color właściwość pozwala pokolorować koniec początku linii tekstu w ramce. Chociaż różni się w zależności od twojego tryb pisania, orientacja tekstowa, oraz kierunek.

Podsumowanie: kolor i dostępność

Chociaż na pięknie zaprojektowaną stronę internetową duży wpływ ma użyty kolor, zawsze powinieneś upewnić się, że jest ona dostępna. Niewłaściwe użycie koloru może spowodować utratę znacznego ruchu na Twojej stronie.

Korzystanie z notacji ciągów szesnastkowych, nazw kolorów lub wartości RGB zależy wyłącznie od Ciebie. Upewnij się tylko, że używasz kolorów, aby wzmocnić istniejący tekst i aby był on zgodny z określoną hierarchią wizualną. Dowiedzenie się więcej o teorii kolorów i stworzeniu własnej palety to doskonały pomysł, jeśli jesteś początkującym twórcą stron internetowych. Do tego czasu szczęśliwe i kolorowe kodowanie!

Jak wykorzystać teorię kolorów, aby podnieść poziom swoich kreatywnych projektów?

Używając odpowiednich kolorów we właściwy sposób, możesz przenieść swoje kreatywne projekty na zupełnie nowy poziom.

Czytaj dalej

O autorze