CSS blur() — розмиття елемента
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Застосовуйте функцію
автор: Bondblur()з обережністю, оскільки занадто великі значення радіусу розмиття можуть призвести до занадто сильного розмиття, що може негативно вплинути на зрозумілість контенту. - Порада
-
Використовуйте
автор: Bondblur()разом з іншими фільтрами CSS, такими якbrightness(),contrast()абоgrayscale(), для створення складних візуальних ефектів. - Нотатка
-
Ефект
автор: Bondblur()також можна застосовувати до псевдоелементів, таких як::beforeабо::after, для досягнення бажаного візуального ефекту.
Синтаксис
blur(<length>)Функція blur може отримувати єдине значення:
-
<length> -
Можна використовувати позитивні значення, такі як
автор: Bond1pxабо10%, для застосування розмиття. Використання негативних значень або значень, які не можуть бути перетворені на числа, буде проігноровано.
| Значення без задання: | none |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 18 | 35 | 6 | 15 | 12 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 53 | 35 | 6 |
Приклади
+ запропонувати свій приклад у пісочниці
Два однакові елементи, але лише один розмитий за допомогою функції.
HTML
<div id="description">
<h2>Приклад 2: розмиття елементу</h2>
<p>Два однакові елементи, але лише один розмитий за допомогою функції.</p>
</div>
<div id="result">
<div class="box"></div>
<div class="box blurred"></div>
</div>CSS
#description {
background-color: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 150px;
height: 150px;
background-color: #ff8c00;
margin: 20px;
}
.blurred {
filter: blur(5px);
}При наведенні курсору на блок, він стає розмитим.
HTML
<div id="description">
<h2>Приклад 1: розмиття блоку при наведенні</h2>
<p>При наведенні курсору на блок, він стає розмитим.</p>
</div>
<div id="result">
<div class="box"><span>10px</span></div>
<div class="box blur-2"><span>20px</span></div>
<div class="box blur-5"><span>50px</span></div>
</div>CSS
#description {
background-color: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
}
#result,
.box {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 200px;
background-color: #ff8c00;
margin: 20px;
transition: filter 0.3s ease;
color: #fff;
}
.box:hover {
filter: blur(10px);
}
.blur-2:hover {
filter: blur(20px);
}
.blur-5:hover {
filter: blur(50px);
}Угорі filter: blur(3px) накладено на саму панель — розмивається все, зокрема її текст. Унизу розмите не панель, а її псевдоелемент ::before з тим самим візерунком: тло розмите, текст лишається чітким.
HTML
<div class="scene">
<div class="card blurred">filter: blur(3px) — розмито все, зокрема текст</div>
</div>
<div class="scene">
<div class="card glass"><span>розмито лише тло, текст чіткий</span></div>
</div>CSS
body {
font-family: sans-serif;
font-size: 15px;
line-height: 1.45;
padding: 24px;
}
.scene {
display: flex;
align-items: center;
justify-content: center;
height: 140px;
margin-bottom: 18px;
background: repeating-linear-gradient(45deg,
#f5a623 0 18px, #d0021b 18px 36px) fixed;
}
.card {
width: 320px;
padding: 16px;
border-radius: 8px;
color: #17202a;
text-align: center;
}
.blurred {
background: rgb(255 255 255 / 0.6);
filter: blur(3px);
}
.glass {
position: relative;
overflow: hidden;
}
.glass::before {
content: "";
position: absolute;
inset: -16px;
background: repeating-linear-gradient(45deg,
#f5a623 0 18px, #d0021b 18px 36px) fixed;
filter: blur(6px);
}
.glass::after {
content: "";
position: absolute;
inset: 0;
background: rgb(255 255 255 / 0.55);
}
.glass span {
position: relative;
}Коментарі
Коментарів ще немає — будьте першим!