Kolory na stronach internetowych są sprawą kluczową, jeżeli chodzi o estetykę. W poprzednim wpisie napisałem 3 kroki do estetycznej strony. Zawarłem tam informację o tym, że kolory nie powinny być jaskrawe i nie powinno korzystać się z więcej niż 4 kolorów na stronie. W tym wpisie przedstawię sposoby umieszczanie kolorów na stronie WWW.
Po angielsku
div {color: red;}Zapisujemy go w sposób przedstawiony powyżej. Kolor przedstawiony jest w postaci języka angielskiego gdzie red oznacza kolor czerwony.
Zapis heksadecymalny (szesnastkowy)
div {color: #ff00ff;}
Gdzie 2 pierwsze znaki oznaczają odcień koloru czerwonego, dwie kolejne koloru zielonego i dwie ostatnie koloru niebieskiego. W powyższym zapisie liczby dają połączenie kolorów czerwonego i niebieskiego co daje kolor fioletowy.
Skrócony zapis heksadecymalny
div {color: #f0f;}
Stosuje się go jedynie, gdy dwie pierwsze litery są takie same, ponieważ ten zapis bez skracania go wygląda jak zwykły zapis szesnastkowy przedstawiony powyżej.
Zapis RGB (Red, Green, Blue)
div {color: rgb(255,0,0);}
Identycznie jak w zapisie heksadecymalnym z wyjątkiem tego, że kolory przedstawione są w postaci liczb z zakresu od 0 do 255 lub w postaci procentów jak w przykładzie poniżej:
div {color: rgb(100%,0,0);}
W obu powyższych przypadkach zostanie wyświetlony kolor czerwony.
Zapis RGBA
Zupełnie taka sama sytuacja jak z kolorem RGB lecz zapis ten został ulepszony o krycie (przeźroczystość) elementu. Przeźroczystość określamy wartościami od 0 do 1 np. 0.5.
div {color:rgba(255,0,0,0.5);}
Zapis HSL (Odcień, Nasycenie, Jasność)
Zapis podobny jak w przypadku wyżej przedstawionych sposobów, lecz zamiast kolorów mamy bardziej szczegółowe dane jak nasycenie oraz jasność. Barwa to przedział od 0 do 255, a nasycenie i jasność jako wartość procentowa.
div {color: hsl(255,50%,70%);}
Zapis HSLA (Odcień, Nasycenie, Jasność, Krycie)
Zapisujemy go w taki sam sposób w jaki kolor HSL, lecz zostało dodane krycie.
div {color: hsl(255,50%,70%,0.5);}
currentColor
Jest to nic innego jak pobieranie koloru z innego elementu w divie.
divbackground-color oznacza kolor tła diva i zostanie on pobrany z koloru czcionki "color", który znajduje się powyżej, czyli będzie on czerwony.
{
color: red;
background-color: currentColor;
}
