Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Obsługa modelu barw HSLA

Email Drukuj PDF

HSLA jest rozwinięciem omawianego nieco wcześniej modelu barw HSL, który dodatkowo uzupełniono o obsługę przezroczystości.

Zapis koloru czerwonego w modelu HSL stosowany w trzeciej specyfikacji CSS wygląda następująco:

BODY

{

background-color:hsla(0,100%,50%,0.2);

}

Jak widzisz, poza zapisem pierwszych trzech właściwości koloru na końcu dodano informacje o stopniu przezroczystości. Stopień przezroczystości może przybierać wartość od 0 do 1 z krokiem co 0.1. Na przykładzie widocznym poniżej przedstawiłem stopniowanie przezroczystości dla koloru czerwonego.

<<przykład>>

<div class="przyklad">

<div style="background-color:hsla(0,100%,50%,0);width:50px;height:50px;">0</div>

<div style="background-color:hsla(0,100%,50%,0.1);width:50px;height:50px;">0.1</div>

<div style="background-color:hsla(0,100%,50%,0.2);width:50px;height:50px;">0.2</div>

<div style="background-color:hsla(0,100%,50%,0.3);width:50px;height:50px;">0.3</div>

<div style="background-color:hsla(0,100%,50%,0.4);width:50px;height:50px;">0.4</div>

<div style="background-color:hsla(0,100%,50%,0.5);width:50px;height:50px;">0.5</div>

<div style="background-color:hsla(0,100%,50%,0.6);width:50px;height:50px;">0.6</div>

<div style="background-color:hsla(0,100%,50%,0.7);width:50px;height:50px;">0.7</div>

<div style="background-color:hsla(0,100%,50%,0.8);width:50px;height:50px;">0.8</div>

<div style="background-color:hsla(0,100%,50%,0.9);width:50px;height:50px;">0.9</div>

<div style="background-color:hsla(0,100%,50%,1);width:50px;height:50px;">1</div>

</div>

<</przykład>>

Niestety użytkownicy Internet Explorera muszą zadowolić się rysunkiem 15.16, ponieważ ich przeglądarka nie obsługuje modelu barw HSLA.

Rysunek 15.16. Przykład stopniowania przezroczystości w modelu barw HSLA

Na koniec jeszcze jeden przykład wykorzystania modelu barw HSLA dla dwóch nałożonych na siebie elementów.

<div style="width:200px;height:200px;background-color:green;position:absolute;left:50px;top:50px;">&nbsp;</div>

<div style="width:200px;height:200px;background-color:hsla(0,100%,50%,0.2);position:absolute;left:120px;top:120px;">&nbsp;</div>

<<przykład>>

<div class="przyklad">

<div style="width:200px;height:200px;background-color:green;position:absolute;left:50px;top:50px;">&nbsp;</div>

<div style="width:200px;height:200px;background-color:hsla(0,100%,50%,0.2);position:absolute;left:120px;top:120px;">&nbsp;</div>

</div>

<</przykład>>

Rysunek 15.17. Przykład wykorzystania modelu barw HSLA

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15749150