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

CSS function invert()

Опис

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

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

Значення функції invert() може бути від 0 до 1, де 0 означає, що обернення кольорів не застосовується, а 1 - повне обернення кольорів. Наприклад, invert(0.5) застосує половину ефекту обернення кольорів до зображення, зберігаючи певну кількість початкових кольорів.

Приклади використання функції:

  • invert(0%): Кольори залишаються без змін.
  • invert(50%): Кольори стають наполовину інвертованими.
  • invert(100%): Кольори повністю інвертуються.
Нотатка:

Функцію invert() можна застосовувати до будь-яких елементів з фоновим кольором або до текстових елементів.
Порада:

Варто експериментувати зі значенням percentage, щоб отримати бажаний візуальний ефект. Високі значення можуть створювати насичені і яскраві кольори, тоді як низькі значення можуть приводити до ефекту пом'якшення кольорів.
Порада:

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

Синтаксис

invert(<percentage>)
<percentage>

Значення 0% залишає кольори без змін, 100% повністю інвертує кольори.

Переглядачі

Переглядач

18

35

6

15

12
Переглядач

4.4

53

35

6

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

Приклади


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

У цьому прикладі використовуються три картинки з різними значеннями функції invert().

Спільнота

Зв'язок