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

Тема в разделе "Верстка", создана пользователем ak100, 4 окт 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. ak100

    ak100 Создатель

    Регистр.:
    14 сен 2011
    Сообщения:
    37
    Симпатии:
    10
    Нужно реализовать меню на сайте в виде пластинок в стиле IOS/AERO

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

    Есть немало примеров, как http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/ но есть одно но. Я не могу загнать такую форму в прямоугольную рамку, чтобы получилось окошко посредине экрана. Может есть у кого пример, как минимум прямоугольника в таком стиле? Дальше я уже разберусь)

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

    С проблемой разобрался, кидаю сюда, наверняка, кому-нибудь пригодится. Получилось вот так - http://codepen.io/ak100/full/sneyB/ . Тестовый пример грубоват (верстальщик уровень - любитель), но суть показывает. Все классы прокомментировал, чтобы было все понятно. Работает на всем кроме IE, который все еще не поддерживает никакие ccs3 фильтры и svg, с ie все плитки будут просто прозрачные. Ссылка на набросок - http://codepen.io/ak100/pen/sneyB/

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

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    325
    Симпатии:
    107
    Код:
    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 - интенсивность размытия (если не понятно)
     
    Последнее редактирование: 24 ноя 2014
  3. ak100

    ak100 Создатель

    Регистр.:
    14 сен 2011
    Сообщения:
    37
    Симпатии:
    10
    Идея хорошая, в таком случае надо размывать фон под плашкой а не саму плашку, вот этого у меня не получалось. SVG удавалось применять к классу, предположим меню, тогда я "размажу" только плашку меню, что не дает должного эффекта с фоном (меню будет мутная от фильтра, но не будет эффекта "преломления" на фон).
     
  4. NikroVir

    NikroVir Извращённый отшельник

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