8 июля 2014, 7:41

Крутой эффект размытия filter: blur();

Получаем крутой эффект размытия фона на сайте средствами CSS3, при всплывающем модальном окне. Для работы необходим Bootstrap.
Важно заключить всю разметку в один общий контейнер, допустим .wrapper — это нужно для того что бы мылить все что будет за пределами модального окна.
В данном случае разметка будет примерно такой:

<body>
<!-- Модальное окно -->
<div class="modal">...</div>
<!-- Основная разметка -->
<div class="wrapper">
...
</div>
<body>

При вызове окна, к тегу body присваивается класс .modal-open, следует что стили будут выглядеть таким образом.
HTML

<body class="modal-open">
...
<body>

CSS

.modal-open .wrapper {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    -o-filter: blur(5px);
    filter: blur(5px);    
}

Пример можно посмотреть на рабочем проекте, вызовите замерщика.

Поделиться
Запинить