Маска размытия HTML5 CSS3/Javascript

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

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

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

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

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

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


javascript html blur css mask
person Olivier    schedule 04.04.2011    source источник
comment
Вы можете опубликовать изображение или видео эффекта, который вы пытаетесь эмулировать из Windows 7?   -  person DA.    schedule 05.04.2011
comment
Это примерно так: Aero Window   -  person Kevin Chavez    schedule 05.04.2011
comment
Ах, попался. FWIW, я ненавижу этот эффект. Но это всего лишь мнение одного человека. Я не могу придумать, как справиться с этим сейчас с текущим HTML/CSS. PaintBrush.js имеет возможность и может быть отправной точкой: mezzoblue.github.com/PaintbrushJS/ демо   -  person DA.    schedule 05.04.2011

Ответы (3)


arrow_upward
1
arrow_downward

http://t.co/fFLPKnzC

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

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

поэтому для встраивания html в svg и использования svg-фильтров для элементов html позже

person zbug    schedule 12.01.2012

arrow_upward
1
arrow_downward

Подумал, что это может иметь значение: Аэро

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

person Steve    schedule 27.09.2013

arrow_upward
0
arrow_downward

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

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

person typeof    schedule 04.04.2011
comment
Спасибо, я думал об этом, но дело в том, что фон моего сайта будет интерактивным, а не простым изображением... - person Olivier; 05.04.2011
comment
Это важная деталь. Какой фон (не изображение) у вас будет? - person typeof; 05.04.2011