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() з обережністю, оскільки занадто великі значення радіусу розмиття можуть призвести до занадто сильного розмиття, що може негативно вплинути на зрозумілість контенту.

автор: Bond правити

Порада

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

автор: Bond правити

Нотатка

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

blur(<length>)

Функція blur може отримувати єдине значення:

<length>

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	18	35	6	15	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	53	35	6

Приклади

+ запропонувати свій приклад у пісочниці