Можно ли размывать при помощи css только часть элементов?

Question

[Дима Паутов]

Можно ли размывать вот так, под меню только часть элементов. Я почему то уверен, что нет. Да и если как-то можно, что я сомневаюсь, то это будет очень трудозатратным анимационным эффектом

Answer 1

[Nwton]

JS костыль:
1) методами js делаем скриншот страницы
2) раскрываем меню, определяем его габариты и координаты
3) обрезаем скриншот по габаритам и координатам
4) блюрим обрезок и ставим как bg меню

Безумие.

Answer 2

[RTW]

-----
А нет я ошибался
https://jordanhollinger.com/2014/01/29/css-gaussia...
Год назад гугл такого не выдавал

Comments

[Сергей delphinpro]

Там блюрится продублированный фон. Эта фишка не прокатит для задачи обозначенной автором.

Answer 3

[Евгений Вольф]

Не уверен, что понял Ваш вопрос на 100%, особенно касательно фразы "часть элементов"... Но, если Вы имели в виду "часть элемента", то мне кажется с помощью вот такой штуки можно сделать: ссылка 1, ссылка 2. С помощью масок, по идее можно часть элемента не только размыть, но сделать что-то ещё с ней. Ещё можно попробовать наложить поверх нужной области элемента наложить другой элемент с размытием, это должно дать эффект в теории.

P.S. Точнее сказать затрудняюсь, т.к. не до конца понимаю, чего именно Вы хотите добиться. Если нужно сделать размытым фон меню, как у Вас на картинке (и всё что за ним) я думаю, это (скроллим до "blur()") должно помочь. Поверх этого фона (меню) можно наложить текст, который не будет размывать...

Comments

[Сергей delphinpro]

Что там понимать. Нужно заблюрить всю страницу под элементом. Не фон какой-то, а страницу, вместе со всеми ее элементами.

[Евгений Вольф]

Сергей: такой вариант?

[Дима Паутов]

Евгений Вольф: ооо, вот это уже лучше. Блин, всё это такие кастыли, жуть. Но на том спасибо!

[Евгений Вольф]

Дима Турков: ну... это не совсем костыли, SVG вообще отличная штука, а её поддержка в браузере - просто великолепная идея! Но, с тем, что это можно было сделать на "нативном CSS" - и это было бы куда удобнее/лучше/красшивше/итд - я полностью согласен :)

[Сергей delphinpro]

Евгений Вольф: Там тоже фон. фоновая картинка.
Размыть страницу под конкретным элементом можно (в перспективе) только свойством backdrop-filter: blur()

[Евгений Вольф]

Сергей: всё равно не понимаю... так?

[Сергей delphinpro]

Евгений Вольф: может быть вот так будет понятнее - https://codepen.io/anon/pen/QdpZLK

[Евгений Вольф]

Сергей: всё, понял кажись :))) Спасибо! :)

[Евгений Вольф]

Сергей: за ссылку на "backdrop-filter" отдельное спасибо! Неплохая идея (реализации такой штуки [фильтра]).