Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

CSS: Notacja HSLA

środa,

CSS: Notacja HSLA

HSLA to rozszerzenie modelu kolorów HSL (Hue, Saturation, Lightness) z dodatkowo uwzględnionym poziomem przezroczystości (alfa). Pozwala to na tworzenie kolorów z określoną przejrzystością i jest potężnym narzędziem w arsenale każdego front-end developera i projektanta, umożliwiając tworzenie bardziej dynamicznych i angażujących projektów wizualnych.

Składniki HSLA

  1. Hue (odcień): Określa kolor i jest wyrażony w stopniach od 0 do 360°.
  2. Saturation (nasycenie): Wyraża intensywność koloru w procentach od 0% (szary) do 100% (pełny kolor).
  3. Lightness (jasność): Określa jasność koloru; 0% to czarny, 100% to biały, a 50% to pełny kolor.
  4. Alpha (przezroczystość): Określa stopień przezroczystości koloru w skali od 0.0 (całkowicie przezroczysty) do 1.0 (całkowicie nieprzezroczysty).

Przykłady

.transparent-red {
    background-color: hsla(0, 100%, 50%, 0.5); /* Półprzezroczysty czerwony */
}

.semi-transparent-blue {
    color: hsla(240, 100%, 50%, 0.7); /* Nieco przezroczysty niebieski */
}

.light-green-background {
    background-color: hsla(120, 60%, 70%, 0.3); /* Jasnozielony z lekką przezroczystością */
}

Zalety HSLA

  • HSLA pozwala na intuicyjne manipulowanie kolorami, co jest szczególnie użyteczne podczas projektowania i testowania różnych schematów kolorystycznych.
  • Dzięki dodatkowemu parametrowi alpha, HSLA umożliwia tworzenie bogatych efektów wizualnych, takich jak przezroczystość i półprzezroczystość.
  • HSLA ułatwia mieszanie kolorów i dopasowywanie ich do różnych elementów interfejsu użytkownika.
Artykuł: Pierwszy dzień w Splicie

Pierwszy dzień w Splicie

Artykuł: OpenSolaris

OpenSolaris

Artykuł: Bob Frankston

Bob Frankston

Artykuł: Staże w Chorwacji

Staże w Chorwacji

Artykuł: 3Com

3Com

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły