CSS function grayscale()

Опис

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

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

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

Наприклад, grayscale(50%) змінить зображення або елемент таким чином, що він буде відображати половину своєї оригінальної насиченості, перетворивши кольори на відтінки сірого.

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

grayscale(0%): Елемент залишається без змін.
grayscale(50%): Елемент стає наполовину сірим.
grayscale(100%): Елемент стає повністю сірим.

Порада:	Функція `grayscale()` може бути застосована до будь-якого елемента з фоновим зображенням або до `img`-елементів.
Порада:	Функцію `grayscale()` можна комбінувати з іншими функціями фільтрації, такими як `brightness()` або `contrast()`, для досягнення бажаного візуального ефекту.
Нотатка:	Використання функції `grayscale()` дозволяє контролювати стиль та настрій вашого веб-сайту. Ви можете використовувати цю функцію, щоб створити ефекти, такі як наведення мишею, зміна стану елементів або створення естетичного вигляду веб-дизайну. Важливо пам'ятати, що `grayscale()` змінює лише відображення кольору, а не його фактичні значення.

Синтаксис

grayscale(<percentage>)

<percntage>: Вказує ступінь сірості елемента від 0% до 100%. Значення 0% залишає елемент без змін, 100% перетворює його на повністю сірий.

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

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

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

Приклади

Приклад 1
Приклад 2

Наведіть курсор на квадрат, щоб побачити ефект функції grayscale().


  See the Pen <a href="https://codepen.io/BonD007-the-flexboxer/pen/PoxPodz">
  Untitled</a> by BonD007 (<a href="https://codepen.io/BonD007-the-flexboxer">@BonD007-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.

Перший квадрат - оригінальний, другий та третій - з функцією grayscale(),а точніше 50% й 100% відповідно.


  See the Pen <a href="https://codepen.io/BonD007-the-flexboxer/pen/vYQNYVE">
  Untitled</a> by BonD007 (<a href="https://codepen.io/BonD007-the-flexboxer">@BonD007-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.

CSS довідник

CSS функції

CSS function grayscale()

Опис

Синтаксис

Переглядачі

Приклади