Как стать автором
Обновить

Windows Aero эффект на чистом HTML+CSS+JS

Разработка веб-сайтов
Вдогонку к посту «jQuery → Впечатляющие анимационные эффекты» решил показать свою поделку, созданную скорее для развлечения, а не для реального внедрения. Я попытался сделать эффект размытия заднего фона как в Windows Aero.



Вот пример, вместе с картинками весит 200 Кб. Довольно много.

Следующий шаг — использовать одну картинку для заднего фона, а размывать с помощью SVG. Пример с SVG почему-то работает только в Опере (как написано в комментариях, в других браузерах тоже работает) и грузит процессор на 100%.

Вывод: с помощью существующих технологий этот эффект реализовать можно, но либо картинки будут много весить, либо процессор будет загружен на все сто. До реального внедрения ещё далеко, но может быть кто-то знает более изящное решение?
Теги:HTMLCSS3jQuerySVGAero glassaero
Хабы: Разработка веб-сайтов
Всего голосов 36: ↑31 и ↓5 +26
Просмотры6.6K

Похожие публикации

Python для веб-разработки
24 июня 202190 000 ₽SkillFactory
Основы вёрстки сайтов
28 июня 202120 000 ₽Loftschool
Веб-дизайнер
28 июня 202183 000 ₽GeekBrains
Веб-разработчик
28 июня 202162 000 ₽Loftschool

Лучшие публикации за сутки