Стеклянные области меню и панельки на CSS3+SVG в стиле IOS7+/AERO

[ak100]

Нужно реализовать меню на сайте в виде пластинок в стиле IOS/AERO

К примеру список статей в категории Joomla, чтобы висели на темном фоне и имели blur эффект, как это выглядит в IOS/AERO

Есть немало примеров, как Для просмотра ссылки Войди или Зарегистрируйся но есть одно но. Я не могу загнать такую форму в прямоугольную рамку, чтобы получилось окошко посредине экрана. Может есть у кого пример, как минимум прямоугольника в таком стиле? Дальше я уже разберусь)

Задачу усложняет еще поддержка фильтров браузерами, Chrome знает что такое filter от CSS3, а Firefox понимает только SVG, до мобильных дело еще даже не дошло.

С проблемой разобрался, кидаю сюда, наверняка, кому-нибудь пригодится. Получилось вот так - Для просмотра ссылки Войди или Зарегистрируйся . Тестовый пример грубоват (верстальщик уровень - любитель), но суть показывает. Все классы прокомментировал, чтобы было все понятно. Работает на всем кроме IE, который все еще не поддерживает никакие ccs3 фильтры и svg, с ie все плитки будут просто прозрачные. Ссылка на набросок - Для просмотра ссылки Войди или Зарегистрируйся

Еще нюанс, на codepen нельзя заливать картинки, потому он не правильно видит высоту, я её не смог задать в %, сделал фикс, с мобильных браузеров может отображаться некорректно.
Суть в том, что надо делать 2 фона, один нормальный, 2й замыливается фильтром, далее делаем окошки в которых будет отображаться часть замыленного фона и поверх ох показываем прозрачные плашки меню или того, чего нам нужно. Плашки окрашиваются в нужный цвет, при наложении на картинку, получается очень красиво, как в IOS7+. Удачи в создании красивых сайтов)

 

[NikroVir]

filter: url(/filter.svg#blur);
-webkit-filter: blur(3px);

сам SVG:

<?xml version="1.0" standalone="no"?>
<svg width="1" height="1" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="blur">
<feGaussianBlur in="sourceGraphic" stdDeviation="2 1" />
</filter>
</defs>
</svg>

всё легко подстраивается под вас.
svg для браузеров ie10+, ff, o. хром и новая опера потянут css3
stdDeviation - интенсивность размытия (если не понятно)

 

[ak100]

Идея хорошая, в таком случае надо размывать фон под плашкой а не саму плашку, вот этого у меня не получалось. SVG удавалось применять к классу, предположим меню, тогда я "размажу" только плашку меню, что не дает должного эффекта с фоном (меню будет мутная от фильтра, но не будет эффекта "преломления" на фон).

 

[NikroVir]

Разобрался с вашим способом.
Столкнулся со схожей задачей, но нужно заблюривание для fixed блока. Т.е. под фильтр должен попадать весь контент страницы (и картинки и текст и фон), а в вашем примере фильтр только для фона.
Кто-нибудь может что-нибудь предложить (желательно на чистом css)?