Ostatnio edytowany:

hsla()

Autor: Virtual Patriot

Przeznaczenie funkcji hsla()

Za pomocą funkcji hsla() możemy określić wartość interesującego nas koloru wraz z dodatkowym procentem przezroczystości.

Parametry funkcji hsla()

Przykładowe zapisy

hsla(323, 75%, 40%, 1)

hsla(-189, 100%, 85%, 0.7)

hsla(64.8, 62.8%, 95.7%, 0.39)

hue

Parametr hue jest wymaganym parametrem funkcji hsla(). Parametr hue określa odcień barwy nowo powstającego koloru na podstawie koła barw. Barwa czerwona reprezentowana jest przez wartość 0, jak również przez wartość 360. Barwa zielona reprezentowana jest przez wartość 120. Barwa niebieska reprezentowana jest przez wartość 240.

Zakres wartości

0 - 360

Ważne

wartości większe niż wartość 360 traktowane są jako kolejny obrót na kole barw, dlatego przykładowo wartość 361 traktowana jest jako wartość 1. Wartości ujemne traktowane są jako obrót w tył na wspomnianym kole barw, dlatego przykładowo wartość -1 traktowana jest jako wartość 359. Ponadto wartość 0 oraz wartość 360 reprezentują tę samą barwę. Zobacz również paletton.com.

Wartość domyślna

brak

saturation

Parametr saturation jest wymaganym parametrem funkcji hsla(). Parametr saturation określa procent nasycenia barwy. Im większy procent tym nasycenie barwy nowo powstającego koloru będzie większe.

Zakres wartości

0 - 100%

Wartość domyślna

brak

lightness

Parametr lightness jest wymaganym parametrem funkcji hsla(). Parametr lightness określa procent jasności barwy. Im większy procent tym jasność barwy nowo powstającego koloru będzie większa.

Zakres wartości

0 - 100%

Wartość domyślna

brak

alpha

Parametr alpha jest wymaganym parametrem funkcji hsla(). Parametr alpha określa procent przezroczystości koloru. Im większy procent tym przezroczystość nowo powstającego koloru będzie mniejsza.

Zakres wartości

0.0 - 1.0 (wartość 0.5 oznacza 50%, wartość 0.24 oznacza 24%, wartość 0.758 oznacza 75.8% itd.)

Wartość domyślna

brak

Przykład funkcji hsla()

  background-color:hsla(55, 75%, 60%, 0.5);
tło tego elementu "div" posiada nowy kolor oraz jest przezroczyste w pięćdziesięciu procentach, ponieważ do tego elementu "div" została dodana właściwość "background-color" wraz z wartością w postaci funkcji "hsla()", w której to funkcji zostały użyte następujące wartości: "55, 75%, 60%, 0.5"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #rodzic {
        background-image:url(http://webkod.pl/files/css/obrazek-01.png);
        padding:1em;
      }

      #dziecko {
        background-color:hsla(55, 75%, 60%, 0.5);
        padding:1em;
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      <div id="dziecko">
        tło tego elementu "div" posiada nowy kolor oraz jest przezroczyste w pięćdziesięciu procentach, ponieważ do tego elementu "div" została dodana właściwość "background-color" wraz z wartością w postaci funkcji "hsla()", w której to funkcji zostały użyte następujące wartości: "55, 75%, 60%, 0.5"
      </div>
    </div>

  </body>
</html>

Interpretacja funkcji hsla()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji funkcji .