CSS 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%): Елемент стає повністю сірим.
Загальний опис
автор: NagarD
- Порада
-
Функція
автор: Bondgrayscale()може бути застосована до будь-якого елемента з фоновим зображенням або доimg-елементів. - Порада
-
Функцію
автор: Bondgrayscale()можна комбінувати з іншими функціями фільтрації, такими якbrightness()абоcontrast(), для досягнення бажаного візуального ефекту. - Нотатка
-
Використання функції
автор: Bondgrayscale()дозволяє контролювати стиль та настрій вашого веб-сайту. Ви можете використовувати цю функцію, щоб створити ефекти, такі як наведення мишею, зміна стану елементів або створення естетичного вигляду веб-дизайну. Важливо пам'ятати, щоgrayscale()змінює лише відображення кольору, а не його фактичні значення.
Синтаксис
grayscale(<percentage>)Функція grayscale може отримувати єдине значення:
-
<percntage> -
Вказує ступінь сірості елемента від
автор: Bond0%до100%. Значення0%залишає елемент без змін,100%перетворює його на повністю сірий.
| Значення без задання: | 0% |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 18 | 35 | 6 | 15 | 12 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 53 | 35 | 6 |
Приклади
+ запропонувати свій приклад у пісочниці
Однаковий градієнт під різними значеннями grayscale(). Дві праві плитки показують, що порядок фільтрів у ланцюжку змінює результат: grayscale(1) sepia(1) дає сепію, а sepia(1) grayscale(1) — сірий.
HTML
<div id="description">
<h2>grayscale(): сила ефекту й порядок фільтрів</h2>
<p>Усі п'ять плиток мають той самий фон. Різниця тільки в рядку filter.</p>
</div>
<div id="result">
<figure><div class="sw g0"></div><figcaption>grayscale(0)</figcaption></figure>
<figure><div class="sw g50"></div><figcaption>grayscale(50%)</figcaption></figure>
<figure><div class="sw g100"></div><figcaption>grayscale(100%)</figcaption></figure>
<figure><div class="sw gs"></div><figcaption>grayscale(1) sepia(1)</figcaption></figure>
<figure><div class="sw sg"></div><figcaption>sepia(1) grayscale(1)</figcaption></figure>
</div>CSS
#result {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
figure {
margin: 0;
text-align: center;
font: 12px/1.4 sans-serif;
}
figcaption {
margin-top: 8px;
}
.sw {
width: 120px;
height: 90px;
border-radius: 6px;
background: linear-gradient(135deg, #e03131, #1971c2 55%, #f59f00);
}
.g0 {
filter: grayscale(0);
}
.g50 {
filter: grayscale(50%);
}
.g100 {
filter: grayscale(100%);
}
.gs {
filter: grayscale(1) sepia(1);
}
.sg {
filter: sepia(1) grayscale(1);
}HTML
<div id="description">
<h2>Приклад 1</h2>
<p>Наведіть курсор на квадрат, щоб побачити ефект функції grayscale().</p>
</div>
<div id="result">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Зображення 1" class="image">
</div>CSS
#description {
background-color: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
#result {
display: flex;
justify-self: center;
}
.image {
width: 200px;
height: 200px;
transition: filter 0.5s ease;
}
.image:hover {
filter: grayscale(100%);
}HTML
<div id="description">
<h2>Приклад 2</h2>
<p>Перше зображення - оригінальне, друге та третє - з функцією grayscale(),а точніше 50% й 100% відповідно.</p>
</div>
<div id="result">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Зображення 1" class="image image0">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Зображення 2" class="image image1">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Зображення 3" class="image image2">
</div>CSS
#description {
background-color: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
.square:first-child {
background-color: #4d4d4d;
}
.image0 {
filter: grayscale(0%);
}
.image1 {
filter: grayscale(50%);
}
.image2 {
filter: grayscale(100%);
}Коментарі
Коментарів ще немає — будьте першим!