HTML5 CSS3 / Javascript Blur Mask

Question

Многие из нас ищут решение Javascript / CSS3, которое может обеспечить интерфейс Windows7-подобный на веб-странице, без использования Flash.

Нам нужны маска непрозрачности, округленные границы и размытие ...

У нас есть непрозрачность и округленные границы, теперь нам нужно применить некоторые эффекты размытия кполупрозрачный Div.

Я попробовал эффект BlurFast из библиотеки Pixastic, но он только размывает фактическое изображение, а не фон, который мы видим через изображение ...

По сути,мы хотим, чтобы Div действовал как Blur Mask над другим содержимым ...

Если кому-то это действительно удастся, я буду рад узнать, что это возможно :) Спасибо

Answer 1

http://t.co/fFLPKnzC

очень хорошая статья о размытии, показывающая современное состояние

к сожалению, «маскирование» частей вашей страницы, которые размывают все позади, не так просто.может быть, предложения в этом блоге помогут вам, поскольку они очень прямолинейны и имеют совершенно другое направление.

для этого, чтобы встроить html в svg и использовать svg-фильтры для html-элементов позже

Answer 2

думал, что это может быть уместно: Aero

Лично я думаю, что тот факт, что автор заявляет, что это «Другими словами, одна из самых грязных и неэффективных реализаций за всю историю» ... И , что он может получить эффект работать в одном браузере ... чтобы быть чрезвычайно интересным.

Answer 3

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

Единственный способ, которым вы могли бы сделать это, - это использовать Pixastic для создания размытого изображения.в Canvas экспортируйте как dataURI, затем используйте это изображение в качестве фона для вашего div.Если div перемещается, то расположение фонового изображения должно соответственно изменяться.