css.in.ua
Підтримати

CSS function blur()

Опис

Функція blur() є одним з ефектів модуля CSS Filter Effects і використовується для створення ефекту розмиття зображення або елемента. Цей ефект дозволяє створити враження м'якості та зосередження на певних елементах сторінки.

Синтаксис:

element {
  filter: blur(radius);
}

Де radius - це значення радіусу розмиття, яке визначає, наскільки сильним буде ефект. Значення радіусу може бути вказано в різних одиницях виміру, таких як пікселі, відсотки, em або rem.

Приклади використання:

  • blur(5px): Застосування розмиття з радіусом 5 пікселів. Цей приклад створить помірний ефект розмиття.
  • blur(20%): Застосування розмиття з радіусом, що становить 20% ширини або висоти елемента. Цей приклад створить помітний ефект розмиття.

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

Уявімо, що у нас є зображення, яке використовується як фон для секції на веб-сторінці. Щоб зосередити увагу на текстовому контенті, можна застосувати ефект розмиття до фонового зображення. Наприклад:

.section {
  background-image: url("background-image.jpg");
  filter: blur(5px);
}

У цьому прикладі ми застосовуємо розмиття до фонового зображення секції з радіусом 5 пікселів. Це допоможе зробити текст більш видимим та зрозумілим для користувачів, а також надасть затишного вигляду сторінці.

Порада:

Застосовуйте функцію blur() з обережністю, оскільки занадто великі значення радіусу розмиття можуть призвести до занадто сильного розмиття, що може негативно вплинути на зрозумілість контенту.
Порада:

Використовуйте blur() разом з іншими фільтрами CSS, такими як brightness(), contrast() або grayscale(), для створення складних візуальних ефектів.
Нотатка:

Ефект blur() також можна застосовувати до псевдоелементів, таких як ::before або ::after, для досягнення бажаного візуального ефекту.

Синтаксис

blur(<length>)
<length>

Можна використовувати позитивні значення, такі як 1px або 10%, для застосування розмиття. Використання негативних значень або значень, які не можуть бути перетворені на числа, буде проігноровано.

Переглядачі

Переглядач

18

35

6

15

12
Переглядач

4.4

53

35

6

Мобільних переглядачів ще не додано.

Приклади


При наведенні курсору на блок, він стає розмитим.

Два однакові елементи, але лише один розмитий за допомогою функції.

Спільнота

Зв'язок