Как получить такой эффект в вебе?

Question

[valgerofficial]

Подскажите как сделать такой же размытый эффект, на CSS?

Comments

[Kovalsky]

Может и картинка в фотошопе, но всё же можно blur и для одного блока применить.

Answer 1

[Bastax13]

С помощью CSS:
filter: blur(5px);

Со значением можно поиграться.

Comments

[lam0x86]

Этот blur применится к самому элементу, а не к заднему фону.

[Bastax13]

lam0x86: Так в чем проблема применить его к заднему фону? В вашем случае этот элемент по-любому является div или т.п. Вот к этому div'у и надо применять фильтр.

[lam0x86]

Хоть статья и старая, но прекрасно иллюстрирует, что произойдёт, если применить blur: https://jordanhollinger.com/2014/01/29/css-gaussia...

[Kovalsky]

lam0x86: нет в этом никакой проблемы, всё в порядке.

[lam0x86]

Никита Полевой: И где здесь размытие?

[Kovalsky]

lam0x86: по нажатию на blur можно видеть, или здесь.

[lam0x86]

Никита Полевой: Я, конечно, извиняюсь, но по нажатию на blur я вижу размытие заднего фона ВНЕ пределов элемента, а вопрос про размытие ВНУТРИ области. А ссылку, что Вы привели, я кинул час назад.

[Kovalsky]

lam0x86: ну тут смысл в том, что filter применяется к разным контейнерам, в результате чего возможны любые комбинации наложения фильтров, в том числе бэкдроп. В примере, кроме этого, хорошо организована как структура, так и фолбэки.

[lam0x86]

Никита Полевой: Смысл в том, что на данный момент ни один браузер это не поддерживает на уровне CSS. Всё это делается разными хаками, а хочется, чтобы можно было указать у контейнера: "ты прозрачный, с диффузией такой-то" (как в 3d-редакторах).

Answer 2

[lam0x86]

Вот, есть пример: jsfiddle.net/otinanaipali/bwx1d977
Но не уверен, что это универсальное решение. Кажется, в Хроме были подвижки внедрить blur для нижележащих элементов, но всё упёрлось в производительность. Сходу не нашёл, где читал про это.