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-елементів.

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

Порада

Функцію grayscale() можна комбінувати з іншими функціями фільтрації, такими як brightness() або contrast(), для досягнення бажаного візуального ефекту.

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

Нотатка

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

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

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

Синтаксис

grayscale(<percentage>)

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

<percntage>

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

Приклади

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