Фокус объектов на сайте с помощью CSS3 | RUDEBOXПорой необходимо выделить мелкие элементы на сайте, при этом применив минимум усилий, отличным способом подчеркнуть элементы это размыть все необходимые объекты. Такой эффект можно встретить на зеркальных фотоаппаратах, его еще называю эффект blur’a или tilt-shift. Достигнуть его на сайте достаточно просто, нам необходимо применить несколько правил стилей. В данном уроке мы займемся построением именного такого элемента. У нас будет два объекта, один из которых размыт по умолчанию, и активируется при наведении курсора мыши.

У нас будет два изображения-ноутбука и телефона, по умолчанию фокус будет на ноутбуке, а телефон будет размыт, при наведении на телефон он будет фокусироваться, а ноутбук будет плавно расфокусироваться. И так, давайте приступим.

Шаг 1. HTML

Разметка будет состоять из двух изображений и текста со ссылкой, все это мы обвернем в класс, детали класса, мы прописываем в стилях, это для тех кто не знает.

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

Фокус объектов на сайте с помощью CSS3 | RUDEBOX

Шаг 2. CSS

Нам необходимо установить размытие и скорость ее прокрутки при наведении курсора мыши:

Вот и все, как мы и говорили в начале урока, что все реализовывается достаточно просто.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.