Как осуществить размытие по Гауссу на web странице?

Question

[toglory]

Как осуществить размытие по Гауссу на web странице, что бы под элементом, к которому применялся эффект, размывался весь контент ( текст, формы, картинки и прочее ) , а не только фон?

Пример



Где на сайте будут что то вроде иконок, по верх которых будут окна размывающие весь фон вместе с иконками,
либо анимириванные виджеты с эффектом размытия.

Answer 1

[twobomb]

Сделал за минуту на коленке. Управлять размытием можно из css класса .blurred
https://jsfiddle.net/twobomb/Lt6qxa62/

Comments

[toglory]

Спасибо, я думаю это то, что нужно. Только каким образом можно вынести отдельно функции из jQuery?

[toglory]

А все разобрался, там только переключатель был выполнен на jQuery. Буду экспериментировать.

Answer 2

[Александр Таратин]

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Comments

[toglory]

Фильтр размывает только фон, текст и прочие элементы за ним вообще не показывает.

[Александр Таратин]

toglory: https://jsfiddle.net/QW01_01/34wy15ra/

[Александр Таратин]

toglory: caniuse.com/#feat=css-filters

[toglory]

Александр Таратин: Ну да почти то что нужно, а как сделать, что бы форма была анимирована и размывала все что за ней, к примеру выдвигающаяся с боку панель инструментов.

Answer 3

[Евгений Одинец]

https://www.google.com.ua/webhp?sourceid=chrome-in...

Comments

[toglory]

а без jQuery можно, или от туда как ни будь выдернуть функцию, не подключая все библиотеки?

Answer 4

[Denis Smirnov]

Тупой ответ - как насчет фотошоп по скрипту и автозаливке в облако? и предварительный скрин. и все на виртуалке. мощь фотошопа в твоих руках кидди, в твоих пальцах, ощути это.

Comments

[toglory]

С облаками и сторонними средствами не хочу связываться, хочу что то простое, обычными средствами, htm, css и js.

[Denis Smirnov]

toglory: Пиши сам, облако твой сайт, или виртуалка на твоем компе, секретный ты наш агент 007 xD

[toglory]

Denis Smirnov: Ну вот как осуществлено в windows 7 рамки окон, они то же заблюрены.