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() ви можете легко створити ефекти анімації, змінювати стилі елементів в залежності від контексту або додавати гарні графічні ефекти на вашому веб-сайті.

правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

hue-rotate(<angle>)

Функція hue-rotate може отримувати єдине значення:

<angle>

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	18	35	6	15	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	53	35	6

Приклади

+ запропонувати свій приклад у пісочниці