Kurs HTML

Wprowadzenie: Alternatywne modele i wartości

Oprócz popularnych metod HEX i RGB/RGBA, CSS oferuje inne sposoby definiowania kolorów, które mogą być bardziej intuicyjne lub przydatne w specyficznych sytuacjach. W tej lekcji przyjrzymy się modelowi HSL/HSLA, dynamicznemu słowu kluczowemu currentColor oraz specjalnej wartości transparent.

1. Model HSL (Hue, Saturation, Lightness)

Model HSL opisuje kolor za pomocą trzech komponentów:

• Hue (Barwa): Określa odcień koloru na kole barw. Jest to wartość kąta od 0 do 360 stopni:
  • 0° = czerwony
  • 120° = zielony
  • 240° = niebieski
  • Inne wartości reprezentują pośrednie odcienie (np. 60° = żółty, 180° = cyjan, 300° = magenta).
• Saturation (Nasycenie): Określa intensywność (czystość) koloru. Jest to wartość procentowa od 0% do 100%:
  • 0% = odcień szarości (brak koloru).
  • 100% = pełne nasycenie (żywy kolor).
• Lightness (Jasność): Określa ilość bieli lub czerni w kolorze. Jest to wartość procentowa od 0% do 100%:
  • 0% = czarny.
  • 50% = "czysty" kolor (najbardziej nasycony przy danym odcieniu).
  • 100% = biały.

Składnia funkcji hsl():

• hsl(barwa, nasycenie%, jasność%)

.czerwony {
  color: hsl(0, 100%, 50%); /* Czysty czerwony */
}

.pastelowy-niebieski {
  background-color: hsl(210, 80%, 75%); /* Jasny, lekko nasycony niebieski */
}

.ciemny-zielony {
  border-color: hsl(120, 60%, 25%); /* Ciemny, dość nasycony zielony */
}

.szary {
  color: hsl(0, 0%, 50%); /* Średni szary (barwa i nasycenie nie mają znaczenia przy 0% nasycenia) */
}Kopiuj

Zalety HSL: Jest często uważany za bardziej intuicyjny niż RGB/HEX, ponieważ pozwala łatwo manipulować poszczególnymi aspektami koloru. Chcesz jaśniejszy kolor? Zwiększ jasność (Lightness). Chcesz bardziej stonowany? Zmniejsz nasycenie (Saturation). Chcesz inny odcień tego samego koloru? Zmień tylko barwę (Hue).

2. Funkcja hsla() - HSL z przezroczystością

Podobnie jak rgba() rozszerza rgb(), funkcja hsla() rozszerza hsl() o czwarty parametr: **kanał alfa (alpha)**, kontrolujący przezroczystość.

Składnia:

• hsla(barwa, nasycenie%, jasność%, alfa)

Wartość alfa działa tak samo jak w rgba(): od 0.0 (całkowicie przezroczysty) do 1.0 (całkowicie nieprzezroczysty).

.nakladka-hsl {
  /* Półprzezroczyste niebieskie tło */
  background-color: hsla(240, 100%, 50%, 0.5);
}

.subtelny-akcent {
  /* Bardzo jasny, lekko nasycony zielony z dużą przezroczystością */
  background-color: hsla(100, 50%, 90%, 0.2);
}Kopiuj

Nowsza składnia (CSS Colors Level 4): Podobnie jak w RGB, można używać ukośnika w funkcji hsl():

• hsl(barwa nasycenie% jasność% / alfa)

.nakladka-hsl-nowa {
  /* Półprzezroczyste niebieskie tło - nowa składnia */
  background-color: hsl(240 100% 50% / 0.5);
  /* lub */
  background-color: hsl(240 100% 50% / 50%);
}Kopiuj

Zalety HSLA: Łączy intuicyjność modelu HSL z możliwością kontrolowania przezroczystości.

3. Słowo kluczowe currentColor

currentColor to specjalne, dynamiczne słowo kluczowe, które reprezentuje **obliczoną wartość właściwości color danego elementu**. Oznacza to, że jeśli użyjesz currentColor jako wartości dla innej właściwości (np. border-color, background-color), ta właściwość przyjmie aktualny kolor tekstu elementu.

button {
  color: blue;
  /* Obramowanie przycisku będzie miało ten sam kolor co jego tekst (niebieski) */
  border: 2px solid currentColor; 
  padding: 0.5em 1em;
}

button:hover {
  color: red;
  /* Po najechaniu zmieni się zarówno kolor tekstu, jak i obramowania na czerwony */
  background-color: rgba(0, 0, 0, 0.1); /* Lekkie tło dla kontrastu */
}

svg.ikona {
  /* Kolor wypełnienia ikony SVG będzie taki sam jak kolor tekstu jej rodzica */
  fill: currentColor; 
  width: 1em;
  height: 1em;
  vertical-align: middle;
}Kopiuj

Zalety currentColor:

• DRY (Don't Repeat Yourself): Pozwala uniknąć powtarzania tej samej wartości koloru dla tekstu i innych właściwości (np. obramowania, tła, ikon SVG).
• Dynamiczność: Jeśli zmienisz właściwość color elementu (np. w stanie :hover lub przez JavaScript), wszystkie właściwości ustawione na currentColor automatycznie się zaktualizują.
• Komponenty i ikony: Szczególnie przydatne przy tworzeniu reużywalnych komponentów i stylizowaniu ikon SVG, które powinny dopasowywać się do koloru otaczającego tekstu.

4. Wartość transparent

transparent to słowo kluczowe oznaczające **całkowicie przezroczysty kolor**. Jest to równoważne z użyciem rgba(0,0,0,0) lub hsla(0,0%,0%,0), ale jest bardziej zwięzłe i czytelne.

Jest to wartość początkowa (initial value) dla właściwości background-color.

.element-z-nalozonym-tlem {
  background-image: url('tlo.jpg');
  /* Upewnienie się, że nie ma jednolitego koloru tła pod obrazkiem */
  background-color: transparent; 
}

.przycisk-duch {
  background-color: transparent;
  border: 1px solid blue;
  color: blue;
}

.gradient-do-przezroczystosci {
  background: linear-gradient(to right, red, transparent);
}Kopiuj

Zastosowanie: Używane, gdy chcemy jawnie określić brak widocznego koloru, np. dla tła, aby widoczne było tło elementu nadrzędnego, lub jako jeden z kolorów w gradiencie.