Порой на сайте хочется выделить красиво какую либо информацию, тем самым привлечь внимание пользователя к необходимой информации. Все это можно сделать с помощью различных эффектов, в данном уроке мы рассмотрим как создать эффект размытия элементов сайта сайта с помощью CSS3 и jQuery.  Идея заключается в организации набора блоков с текстом, которые будут размываться и уменьшаться в масштабе при наведении курсора мыши на один из них. Блок, который получает фокус ввода, наоборот будет увеличиваться.

В результате получается эффект «фокусирования», который помогает выделить пункт с курсором мыши на нем.  Необходимо заметить что переходи и различные трансформации не поддерживают старые браузеры, по этому для  корректного отображения используйте браузеры Safari или Chrome (где трансформации выглядят наилучшим образом).

Для начала рассмотрим HTML-структуру, разметки которой будет иметь секцию, в которой располагаются статьи. Каждый пункт статьи имеет заголовок и абзац с описанием:

Как видите все достаточно просто, теперь разберемся со стилями CSS, в котором основной контейнер имеет фиксированную ширину и центрирован:

Далее избавимся от обтекания текста (наши статьи будут плавающими блоками) с помощью псевдо элементов :before и :after:

Затем нам необходимо добавить различные эффекты, чтобы внешне стилизировать, для этого определим стили для пунктов статей. Они будут плавающими блоками и иметь две тени, из которых светлая будет распространяться на большем расстоянии.

 Чтобы красочно все отображалось для браузеров Webkit добавляем:

Затем зададим стили для текстовых элементов и улучшим типографику. Цвет и тень каждого элемента будут соответствовать:

Теперь добавим переход для всех трех селекторов. Снова мы будем использовать три свойства: непрозрачность, тень текста и цвет:

Теперь самое интересное, рассмотрим класс blur будет использоваться для всех смежных пунктов рядом с тем, на котором располагается курсор мыши. Будем немного уменьшать масштаб пунктов и добавлять большую белую тень, чтобы сделать пункт размытым. Также немного уменьшим непрозрачность:

Чтобы сделать текстовой элемент размытым, установим прозрачный цвет с помощью свойстваrgba и увеличим дистанцию размытия тени текста:

Также установим большое значение свойства z.index для гарантированного вывода данного пункта поверх остальных:

Устанавливаем непрозрачность всех текстовых элементов равной 1:

Теперь рассмотрим саму анимацию с помощью jQuery. Когда курсора мыши оказывается на статье, будем устанавливать ей класс active, а всем остальным пунктам — класс blur: