Kolory i tła w CSS

Po co się tego uczymy?

Kolor to pierwsza rzecz, jaką widzi użytkownik na stronie — bez pewnego posługiwania się różnymi zapisami kolorów i właściwościami tła nie da się świadomie zaprojektować wyglądu żadnej strony, karty produktu czy przycisku.

Teoria

Lekcja 5 pokazała CSS "od ogólnej strony" — teraz czas na konkretne, praktyczne właściwości, których naprawdę użyjesz do wystylizowania strony. Zaczynamy od kolorów, bo pojawiają się praktycznie w każdej regule CSS.

Sposoby zapisu koloru w CSS (wszystkie poniższe zapisy dają identyczny czerwony kolor):
color: red; — nazwana wartość (ograniczony zestaw ok. 140 nazw, wygodne do szybkich testów).
color: #ff0000; — zapis szesnastkowy (HEX) — dwie cyfry na kanał: czerwony, zielony, niebieski. Można też skrócić do #f00, gdy cyfry się powtarzają.
color: rgb(255, 0, 0); — trzy liczby 0-255 (czerwony, zielony, niebieski).
color: rgba(255, 0, 0, 0.5); — jak rgb, plus czwarta wartość (0-1) to kanał alfa, czyli przezroczystość TEGO KONKRETNEGO koloru.
color: hsl(0, 100%, 50%); — odcień (0-360°), nasycenie i jasność w procentach — wygodne, gdy chcesz np. rozjaśnić/przyciemnić kolor bez liczenia RGB od nowa.

Najważniejsze właściwości koloru i tła:
color — kolor TEKSTU.
background-color — kolor TŁA elementu.
background-image: url("sciezka.jpg") — obrazek jako tło.
background-size: cover; — obrazek tła wypełnia cały element (przycinany, jeśli proporcje się nie zgadzają), contain — cały obrazek widoczny, może zostawić puste pasy.
background-position: center; — wyśrodkowanie obrazka tła.
background-repeat: no-repeat; — wyłącza domyślne "kafelkowanie" obrazka tła.

Różnica między opacity a rgba: opacity: 0.5; robi przezroczysty CAŁY element razem z jego zawartością (dziećmi) — tekst wewnątrz też wyblednie. background-color: rgba(0,0,0,0.5) robi przezroczyste TYLKO tło, tekst wewnątrz zostaje w pełni czytelny. To bardzo częsty błąd początkujących.

Przykład z życia

Ciemne tło strony z jasnym tekstem (dokładnie taki motyw, jak w tym serwisie bitedu) to po prostu odpowiednio dobrane background-color i color na poziomie całej strony — reszta elementów dziedziczy te ustawienia, chyba że nadpiszesz je lokalnie.

Kod (CSS)

.karta-ciemna {
    background-color: #1a1a2e;
    color: white;
}

.karta-gradient {
    background-color: rgb(91, 124, 248);
}

.przycisk-czerwony {
    background-color: red;
    color: white;
}

.nakladka-polprzezroczysta {
    background-color: rgba(, , , 0.6); /* tło przyciemnione, tekst w pełni widoczny */
    color: white;
    padding: 16px;
}

.caly-element-przezroczysty {
    background-color: yellow;
    opacity: 0.5; /* przyciemnia WSZYSTKO wewnątrz, łącznie z tekstem */
}

.tlo-obrazkowe {
    background-image: url("plakat-filmu.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 300px;
}

Komentarz i wyjaśnienie kodu

Zwróć uwagę na różnicę między .nakladka-polprzezroczysta (używa rgba na background-color) a .caly-element-przezroczysty (używa opacity) — w pierwszym przypadku tekst "Twoja treść" byłby w pełni czytelny na przyciemnionym tle, w drugim CAŁY blok, razem z tekstem, staje się w połowie przezroczysty. To rozróżnienie jest jednym z częstszych pytań praktycznych przy stylowaniu nakładek i modali.

Ćwiczenie samodzielne

Zbuduj trzy kwadratowe <div>, każdy w innym zapisie tego samego koloru: nazwanym, HEX i RGB — porównaj wynik.

Zadania do pracy własnej

Ostyluj przycisk tak, żeby miał kolorowe tło i biały tekst, zapisz kolor w formacie HEX.
Zbuduj "nakładkę" (np. baner promocyjny) z półprzezroczystym czarnym tłem (rgba) i w pełni czytelnym białym tekstem na wierzchu.
Ostyluj kartę filmu z obrazkiem plakatu jako tło (background-image, background-size: cover) i nałożoną na dole półprzezroczystą belką z tytułem filmu (rgba na osobnym elemencie wewnątrz karty) — to typowy efekt "plakatu z podpisem" używany w prawdziwych serwisach filmowych.

Typowe błędy

Częsty błąd to użycie opacity zamiast rgba, gdy celem jest tylko przyciemnienie tła — traci się wtedy czytelność tekstu wewnątrz elementu. Drugi błąd: zapomnienie background-size: cover przy obrazku tła, przez co obrazek wyświetla się w oryginalnym rozmiarze i może się "kafelkować" (powtarzać). Trzeci: pomylenie kolejności wartości w rgba() — czwarta wartość to zawsze przezroczystość (0 = niewidoczne, 1 = w pełni widoczne), nie "jasność".

Nawiązanie do egzaminu zawodowego

Właściwości koloru i tła nie mają osobnego efektu w podstawie programowej INF.03.5 (podobnie jak reszta CSS), ale są niezbędnym, praktycznym narzędziem oczekiwanym przy ocenie jakości wykonania każdego zadania webowego na egzaminie — sucha struktura HTML bez stylowania nie robi dobrego wrażenia na oceniającym.