css.in.ua
Підтримати

CSS function hue-rotate()

Опис

Функція hue-rotate() в CSS використовується для зміни тону кольорів зображення або елемента. За допомогою hue-rotate() ви можете створювати живі, насичені кольорові ефекти та налаштовувати вигляд ваших елементів на веб-сайті.

Функція hue-rotate() приймає один аргумент - кут повороту в градусах. Цей кут вказує, на який кут обертати коло кольорів. Значення може бути від 0 до 360, де 0 і 360 представляють оригінальний тон кольору, а 180 - поворот на 180 градусів (кольори змінюються на протилежні).

Приклад використання hue-rotate():

Наприклад, якщо ви хочете створити цікавий ефект на своєму веб-сайті, можна використовувати hue-rotate() для зміни кольорової палітри. Давайте розглянемо такий приклад:

.element {
  background-color: #ff0000; /* Червоний колір */
  transition: background-color 1s;
}

.element:hover {
  filter: hue-rotate(90deg); /* Змінюємо кольори на зелений */
}

В цьому прикладі, коли ми наводимо мишкою на елемент з класом element, кольоровий тон змінюється на 90 градусів (від червоного до зеленого). За допомогою функції hue-rotate() ви можете легко створити ефекти анімації, змінювати стилі елементів в залежності від контексту або додавати гарні графічні ефекти на вашому веб-сайті.

Порада:

Значення кута може бути вказано як позитивне або від'ємне число, що дозволяє вам змінювати кольори у різних напрямках.
Порада:

Комбінування функції hue-rotate() з іншими функціями фільтрації, такими як brightness() або contrast(), може дати вам більше контролю над візуальним ефектом.
Порада:

Важливо пам'ятати, що hue-rotate() змінює лише відображення тону кольору, а не його фактичне значення. Таким чином, ви можете експериментувати з кольорами, не змінюючи їх базових значень. Застосовуючи функцію hue-rotate() до вашого CSS, ви зможете створювати захоплюючі та естетично привабливі ефекти, що підвищать візуальну привабливість вашого веб-сайту.

Синтаксис

hue-rotate(<angle>)
<angle>

Значення кута може бути вказано в градусах (deg) або радіанах (rad). Застосовуючи різні значення кута, ви можете змінювати колір елемента відповідно до ваших потреб.

Переглядачі

Переглядач

18

35

6

15

12
Переглядач

4.4

53

35

6

Мобільних переглядачів ще не додано.

Приклади


Перший приклад демонструє, як елемент змінюється після наведення курсору на нього, використовуючи функцію hue-rotate().

Три картинки, для яких застосовано функцію hue-rotate() з різними значеннями.

Спільнота

Зв'язок