x
 
Сергей Дроганов
1 ноября 2012

Как размыть объект? Допустим я открыл фенсибокс, он закрыл мне контент полупрозрачной пеленой. Я хочу, чтобы закрытый контент немного размылся.

Можно вообще такое сделать?


Это можно сделать с помощью ЦСС-фильтра blur. Чтобы заблюрить некий элемент, пишите так:

elem {
  -webkit-filter: blur(3px);
}

Вашу задачу — размыть контент под фенсибоксом — в Сафари и Хроме я бы решил так, кликните на картинку:

  • example2

Код:

<!-- Подключаем файлы Фенсибокса -->
<link rel="stylesheet" href="fancybox.css" />
<script src="fancybox.js"></script>

<script>
  $(function () {
    var $body = $('body');
    /* Включаем фенсибокс
       для ссылок с классом fancybox */
    $('a.fancybox').fancybox({
      transitionIn: 'elastic',
      transitionOut: 'elastic',
      padding: 0,
      overlayColor: '#000',
      overlayOpacity: .1,
      onStart: function () {
        // Добавляем блюр в начале
        $body.addClass('blured');
      },
      onClosed: function () {
        // Убирем блюр на выходе
        $body.removeClass('blured');
      }
    });
  });
</script>

<style>
  body.blured > * {
    /* Блюр для всех
       непосредственных детей body */
    -webkit-filter: blur(2px);
  }
  #fancybox-loading,
  #fancybox-overlay,
  #fancybox-wrap {
    /* Отмена блюра фенсибокса */
    -webkit-filter: none;
  }

  /* Лёгкий тюнинг */
  .fancybox-bg {
    display: none;
  }
  #fancybox-outer {
    box-shadow: 0 0 50px rgba(0, 0, 0, .5);
  }
  #fancybox-close {
    border: none;
  }
</style>

<ul>
  <li>
    <a class="fancybox" href="1.jpg">
      <img src="1_preview.jpg" />
    </a>
  </li>
</ul>
  

В Эксплорере своя реализация фильтров, вот, например, блюр.

Фильтры появились недавно — работают небыстро и только с префиксом -webkit-.

Чтобы узнать о всех возможностях, прочитайте «Понимание ЦСС-фильтров».


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Станислав Лашманов
1 ноября 2012

А чтобы появление не было таким резким можно добавить transition: filter 0.3s.

Михаил Трофимов
1 ноября 2012

Есть ещё кроссбраузерное решение:

http://blurjs.com/


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

EM или REM? 6 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1




Недавно всплыло

7 1 1 Как вы верифицируете оценку сроков от сотрудника? 1