Trzy sposoby zapisania tego samego koloru i skąd bierze się przezroczystość
Nazwa koloru, zapis szesnastkowy, funkcja rgb()
Trzy kanały: czerwony, zielony, niebieski
Przezroczystość: kanał alfa
Ćwiczenie: kolory w Waszym pliku style.css
Rozgrzewka · 3 minuty
Trzy pytania z poprzedniej lekcji
Czym różni się selektor klasy od selektora id?
Co zaznacza selektor uniwersalny *?
Który selektor wygrywa, gdy na ten sam element działają #id i .box?
Część 1 · trzy zapisy jednego koloru
Ten sam kolor, trzy zapisy
CSS pozwala zapisać kolor na kilka sposobów. Trzy zapisy poniżej nazywają dokładnie tę samą barwę, każdy w inny sposób.
Ciekawostka z Wikipedii: jeden z nazwanych kolorów CSS nazywa się rebeccapurple i ma kod szesnastkowy #663399. Grupa robocza CSS dodała go 21 czerwca 2014 roku na pamiątkę Rebekki, sześcioletniej córki twórcy standardów webowych Erica Meyera, zmarłej kilka dni wcześniej.
MDN: „You will see the color keywords (or 'named colors') used in many MDN code examples” · „the rgb() function takes three parameters representing red, green, and blue channel values” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Values_and_units · ciekawostka: en.wikipedia.org/wiki/Web_colors
Część 2 · zapis szesnastkowy
Co znaczy #ff0000?
Zapis szesnastkowy zaczyna się znakiem #, potem ma sześć znaków z zakresu 0-9 i a-f. Znaki są pogrupowane w trzy pary - każda para to jeden kanał koloru: czerwony, zielony, niebieski.
#ff0000
Jedna para cyfr szesnastkowych daje 256 możliwych wartości (16 × 16), dokładnie tyle, ile ma kanał koloru w zapisie rgb().
MDN: „Each hex color value consists of a hash/pound symbol (#) followed by six hexadecimal characters... Each pair of hexadecimal characters represents one of the channels of an RGB color: red, green, and blue... allows us to specify any of the 256 available values for each (16 x 16 = 256)” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Values_and_units
Część 3 · trzy kanały RGB
RGB to trzy żarówki
Wyobraźcie sobie trzy żarówki: czerwoną, zieloną i niebieską. Każda świeci z jasnością od 0 (zgaszona) do 255 (pełna jasność). To, jak mocno świeci każda z nich, daje ostateczny kolor.
MDN: „each channel is represented not by two hex digits, but by a decimal number ranging from 0 and 255” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Values_and_units
Część 4 · przezroczystość
Czwarta liczba: kanał alfa
Do koloru można dodać czwartą wartość - kanał alfa, od 0 do 1. Mówi ona, jak bardzo kolor jest przezroczysty: 0 to całkowita przezroczystość, 1 to pełne krycie.
MDN: „If you set this value to 0 it will make the color fully transparent, whereas 1 will make it fully opaque. Values in between give you different levels of transparency” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Values_and_units
Część 5 · dwie właściwości
Kolor tekstu i kolor tła
Właściwość color ustawia kolor tekstu. Właściwość background-color ustawia kolor tła elementu. To dwie osobne właściwości - można ustawić tylko jedną, obie naraz albo żadną.
h1 {
color: white;
background-color: #1976d2;
}
Starszy zapis rgba(255, 0, 0, 0.5) z czterema wartościami po przecinkach wciąż działa - to ten sam kanał alfa, tylko zapisany po staremu, tak jak w banku pytań CKE.
MDN: „we have set the text color of our heading using a color keyword, and the background using a different type of color value” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Values_and_units
CSS · egzamin
Tak pytają na egzaminie
1. Zapisując kolor w notacji RGBA, np. rgba(100, 40, 50, 0.2), ostatnia wartość dotyczy
saturacji barw RGB
nasycenia koloru czarnego
przezroczystości, gdzie 0 oznacza całkowitą przezroczystość, a 1 jej brak
przezroczystości, gdzie 1 oznacza całkowitą przezroczystość, a 0 jej brak
2. Kolor zielony ma w notacji szesnastkowej wartość #008000. Wartość ta zapisana w notacji RGB to
W style.css ustaw kolor tła strony: body { background-color: ...; } - użyj nazwy koloru (np. whitesmoke).
Ustaw kolor tekstu akapitów zapisem szesnastkowym: p { color: #333333; }.
Ustaw kolor linków w menu funkcją rgb(): nav a { color: rgb(25, 118, 210); }.
Zapisz plik, wciśnij F5 i sprawdź trzy różne kolory na stronie.
Ma się pojawić: inne tło strony, ciemnoszary tekst akapitów, niebieskie linki w menu - trzy kolory, trzy różne zapisy.
Pytania kontrolne
Trzy pytania na koniec
Ile par cyfr szesnastkowych ma zapis #rrggbb i co oznacza każda para?
Jakie wartości może przyjąć kanał alfa i co oznaczają jego skrajne wartości?
Czym różni się właściwość color od background-color?
To tyle na dziś: na następnej lekcji czcionka i wygląd tekstu.
Z realnych wdrożeń
A jak to wygląda w produkcji?
Na lekcji
W produkcji
Status
Nazwy kolorów (red, blue)
Skończony zestaw kilkuset nazw nie starcza do dopasowanego motywu marki - projekty produkcyjne prawie zawsze używają hex albo rgb().
unikane
Jeden zapis koloru w style.css
Duże projekty trzymają kolory w zmiennych CSS (--main-color: #1976d2;), żeby zmienić kolor motywu w jednym miejscu zamiast w dziesiątkach reguł.
rozbudowane
Starszy zapis rgba(r, g, b, a)
Aktualna dokumentacja CSS zapisuje przezroczystość jako czwartą wartość w samym rgb(), oddzieloną ukośnikiem (rgb(25 118 210 / 0.5)); starszy zapis wciąż działa w każdej przeglądarce.
zastępowane
Kontrastowe kolory dobierane „na oko”
Wytyczne dostępności WCAG (ang. Web Content Accessibility Guidelines, czyli międzynarodowe wytyczne dostępności treści internetowych) wymagają minimalnego kontrastu tekstu do tła; narzędzia deweloperskie przeglądarki pokazują, czy kontrast wystarcza.