CSS invert() — інверсія кольорів, ефект негативу
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Варто експериментувати зі значенням
автор: Bondpercentage, щоб отримати бажаний візуальний ефект. Високі значення можуть створювати насичені і яскраві кольори, тоді як низькі значення можуть приводити до ефекту пом'якшення кольорів. - Порада
-
Використання функції
автор: Bondinvert()дає можливість створювати контрастні ефекти, змінювати вигляд зображень та елементів на вашому веб-сайті. Ви можете використовувати цю функцію для створення вражаючих дизайнів, наведення мишею, створення альтернативних кольорових режимів або для експериментів з візуальним виглядом. Важливо пам'ятати, щоinvert()змінює лише відображення кольору, а не його фактичні значення. - Нотатка
-
Функцію
автор: Bondinvert()можна застосовувати до будь-яких елементів з фоновим кольором або до текстових елементів.
Синтаксис
invert(<percentage>)Функція invert може отримувати єдине значення:
-
<percentage> -
Значення
автор: Bond0%залишає кольори без змін,100%повністю інвертує кольори.
| Значення без задання: | 0% |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 18 | 35 | 6 | 15 | 12 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 53 | 35 | 6 |
Приклади
+ запропонувати свій приклад у пісочниці
Перший приклад демонструє, як елемент змінюється після наведення курсору на нього, використовуючи функцію invert().
HTML
<div id="description">
<h2>Приклад 1</h2>
<p>Наведіть курсор на квадрат, щоб побачити ефект функції invert().</p>
</div>
<div id="result">
<div class="square"></div>
</div>CSS
#description {
background-color: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
.square {
width: 200px;
height: 200px;
background-color: #ff0000;
transition: filter 0.5s ease;
}
.square:hover {
filter: invert(100%);
}Однакові плитки з градієнтом і текстом під різними фільтрами. Друга повністю інвертована, третя показує, що invert(50%) перетворює будь-який колір на рівний сірий, четверта — поєднання invert(1) hue-rotate(180deg), яким роблять темну тему без зіпсутих відтінків.
HTML
<div id="description">
<h2>invert(): від негативу до сірого</h2>
<p>Вихідна плитка одна й та сама, змінюється тільки значення filter.</p>
</div>
<div id="result">
<figure><div class="tile">Текст</div><figcaption>без фільтра</figcaption></figure>
<figure><div class="tile f-full">Текст</div><figcaption>invert(1)</figcaption></figure>
<figure><div class="tile f-half">Текст</div><figcaption>invert(50%)</figcaption></figure>
<figure><div class="tile f-hue">Текст</div><figcaption>invert(1) hue-rotate(180deg)</figcaption></figure>
</div>CSS
#result {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
figure {
margin: 0;
max-width: 150px;
font: 13px/1.4 system-ui, sans-serif;
text-align: center;
}
figcaption {
margin-top: 8px;
color: #495057;
}
.tile {
display: flex;
align-items: center;
justify-content: center;
width: 140px;
height: 100px;
border: 1px solid #ced4da;
background-image: linear-gradient(135deg, #e03131, #f59f00 40%, #2f9e44 70%, #1971c2);
color: #ffffff;
font-size: 20px;
font-weight: bold;
}
.f-full { filter: invert(1); }
/* Півдороги для кожного каналу — це середина, тобто рівний сірий */
.f-half { filter: invert(50%); }
.f-hue { filter: invert(1) hue-rotate(180deg); }HTML
<div id="description">
<h2>Приклад 2</h2>
<p>Три картинки з різними значеннями функції invert().</p>
</div>
<div id="result">
<div class="image-container">
<img class="image image0" 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">
<p class="value">invert(30%)</p>
</div>
<div class="image-container">
<img class="image image1" 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">
<p class="value">invert(70%)</p>
</div>
<div class="image-container">
<img class="image image2" 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">
<p class="value">invert(100%)</p>
</div>
</div>CSS
#description {
background-color: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
.image-container {
display: inline-block;
text-align: center;
margin-right: 20px;
}
.image {
width: 200px;
height: 200px;
}
.value {
margin-top: 10px;
font-family: Arial, sans-serif;
}
.image0 {
filter: invert(30%);
}
.image1 {
filter: invert(70%);
}
.image2 {
filter: invert(100%);
}Коментарі
Коментарів ще немає — будьте першим!