Autor publikacji: Virtual Patriot - Administrator

hsla()

Data publikacji: Styczeń 02 2017
Ostatnio edytowano: Grudzień 28 2024

Zobacz również: w3.org - hsla color (LV3)

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()`

            hue, saturation, lightness, alpha

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.

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.

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.

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(https://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()`

: tak
: tak
: tak
: tak
: tak, lecz od wersji 9
: tak

Zobacz więcej informacji o interpretacji funkcji hsla().