Autor publikacji
Virtual Patriot - Administrator

hue-rotate()

Data publikacji
Ostatnio edytowano

Przeznaczenie funkcji hue-rotate()

Za pomocą funkcji hue-rotate() możemy określić nowy odcień koloru na podstawie koła barw.

Parametry funkcji hue-rotate()

Przykładowe zapisy

hue-rotate(90deg)

hue-rotate(0.25turn)

hue-rotate(-100grad)

hue-rotate(-1.57rad)

angle

Parametr angle jest wymaganym parametrem funkcji hue-rotate(). Parametr angle określa wartość kąta obrotu na kole barw, dzięki czemu przeglądarka internetowa może odszukać nowy odcień. W tym wypadku obrót na kole barw odbywa się od koloru, którego odcień chcemy zmienić.

Zakres wartości

dowolna liczba wraz z wybraną jednostką miary kąta

Wartości dodatnie

wartości dodatnie traktowane są jako obrót w przód na kole barw

Wartości ujemne

wartości ujemne traktowane są jako obrót w tył na kole barw

Wartość domyślna

0 (oznacza kolor, którego odcień chcemy zmienić)

Występowanie funkcji hue-rotate()

  1. filter
  2. backdrop-filter

Przykład funkcji hue-rotate()

  filter:hue-rotate(240deg);
obrazek przed zmianą kolorystyki za pomocą funkcji hue-rotate() obrazek po zmianie kolorystyki za pomocą funkcji hue-rotate()

Odcienie kolorów przykładowego elementu "img" zostały zmienione, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "hue-rotate()", w której to funkcji została użyta wartość "240deg".

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;
      }

      img {
        filter:hue-rotate(240deg);
      }
    </style>
  </head>

  <body>

    <img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>

Interpretacja funkcji hue-rotate()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji funkcji .