CSS sepia() — ефект сепії
Опис
Функція sepia() в CSS використовується для зміни кольору зображення або елемента в сепію (колір, що нагадує старі фотографії). Використання sepia() дозволяє створити вінтажний або античний ефект на вашому веб-сайті та додати атмосферу старовини до ваших зображень.
Функція sepia() не приймає аргументів і працює безпосередньо з властивостями CSS, такими як filter або background-image. Ви можете застосовувати sepia() до зображень, фонових зображень або інших елементів, що мають властивості кольору. Застосовуючи цю функцію, ви можете змінити спосіб відображення кольорів і надати зображенням чи елементам вигляд, схожий на той, що мають старі фотографії з епохи сепії.
Значення функції sepia() може бути від 0 до 1, де 0 означає, що сепія не застосовується, а 1 - повне перетворення кольору в сепію. Наприклад, sepia(0.6) застосує 60% ефекту сепії до зображення, зберігаючи часткову кількість кольору.
Приклади коректних значень: sepia(0), sepia(0.5), sepia(1).
Значення поза діапазоном 0 - 1 будуть ігноруватись.
Загальний опис
автор: NagarD
- Порада
-
Використовуйте значення
автор: Bondmountу межах від0до1, щоб контролювати ступінь сепії від мінімального до максимального. - Порада
-
Результат ефекту
автор: Bondsepia()може варіюватись в залежності від вхідного зображення та його кольорової палітри. Експериментуйте з різними значеннями, щоб досягти бажаного вигляду. - Порада
-
Використання функції
автор: Bondsepia()може створити візуально привабливі ефекти на вашому веб-сайті. Ви можете використовувати цю функцію для стилізації зображень, створення атмосферного дизайну, ретро-стилю або для створення вигляду старовинного журналу. Важливо пам'ятати, щоsepia()змінює лише відображення кольору, а не його фактичні значення.
Синтаксис
sepia(<amount>)Функція sepia може отримувати єдине значення:
-
<amount> -
Числове значення в діапазоні від
автор: Bond0до1, яке визначає ступінь сепії. Значення0означає відсутність ефекту сепії (без змін), а1- максимально можливу ступінь ефекту сепії.
| Значення без задання: | 0 |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 18 | 35 | 6 | 15 | 12 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 53 | 35 | 6 |
Приклади
+ запропонувати свій приклад у пісочниці
Той самий градієнт під різною силою sepia(). Остання плитка показує, чому одна sepia(1) рідко виглядає «вінтажно»: до неї додано контраст, яскравість і насиченість.
HTML
<div id="description">
<h2>sepia(): сила ефекту й «вінтажний» ланцюжок</h2>
<p>Фон у всіх плиток однаковий, змінюється тільки рядок filter.</p>
</div>
<div id="result">
<figure><div class="sw s0"></div><figcaption>sepia(0)</figcaption></figure>
<figure><div class="sw s50"></div><figcaption>sepia(50%)</figcaption></figure>
<figure><div class="sw s100"></div><figcaption>sepia(100%)</figcaption></figure>
<figure><div class="sw vintage"></div><figcaption>sepia(1) contrast(.9) brightness(1.05) saturate(1.2)</figcaption></figure>
</div>CSS
#result {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
figure {
margin: 0;
width: 130px;
text-align: center;
font: 12px/1.4 sans-serif;
}
figcaption {
margin-top: 8px;
}
.sw {
width: 130px;
height: 95px;
border-radius: 6px;
background: linear-gradient(135deg, #2f9e44, #1971c2 50%, #e8590c);
}
.s0 {
filter: sepia(0);
}
.s50 {
filter: sepia(50%);
}
.s100 {
filter: sepia(100%);
}
.vintage {
filter: sepia(1) contrast(0.9) brightness(1.05) saturate(1.2);
}HTML
<div id="description">
<h2>Приклад 1: зміна сепії зображення</h2>
<p>Наведіть курсор на зображення, щоб побачити ефект функції sepia().</p>
</div>
<div id="result">
<img class="image" 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">
</div>CSS
#description {
background-color: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
.image {
width: 200px;
height: 200px;
transition: filter 0.5s ease;
}
.image:hover {
filter: sepia(0.85);
}HTML
<div id="description">
<h2>Приклад 2: зміна сепії картинки</h2>
<p>Три картинки з різними значеннями функції sepia().</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">sepia(0.15)</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">sepia(0.45)</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">sepia(1)</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: sepia(0.15);
}
.image1 {
filter: sepia(0.45);
}
.image2 {
filter: sepia(1);
}Коментарі
Коментарів ще немає — будьте першим!