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

 

В демонстрации мы будем использовать несколько примеров, с различными эффектами, но для начала нам необходимо подключить стили CSS, и сделать работоспособность в IE, подключив необходимые скрипты:

Следующим шагом будет создание разметки HTML. Для меню будет использоваться неупорядоченный список с фиксированной шириной.

Почти во всех примерах мы будем использовать один и тот же стиль для элементов ul и li. Модифицироваться будут ссылки.

ПРИМЕР №1

В первом примере мы покажем пункты немного размытыми изначально. Элементы ссылок получат прозрачный цвет и белую тень текста. Также будет использоваться трансформация всех свойств:

При наведении курсора мыши на элемент ссылки, он будет очищаться а все остальные будут оставаться размытыми. Но мы не можем сказать «при наведении курсора мыши на определенный элемент сделай действие Х для всех смежных элементов”, потому что в CSS селектор смежных элементов даст нам только следующий смежный элемент.

Но можно использовать трюк. Так как все пункты меню являются блочными элементами, то мы просто размоем все элементы при наведении курсора мыши на меню 9неупорядоченный список), а тот элемент, над которым находится курсор, сделаем четким:

Добавив свойство padding-left мы немного смещаем активный пункт вправо.

ПРИМЕР №2

Во втором примере пункты меню изначально немного наклонены. Выполняется такое действо с помощью 2D трансформаций (свойство skew). Также используется полупрозрачный цвет фона и тени, что достигается использованием свойства значения rgba.

При наведении курсора мыши на  меню мы будем изменять угол наклона и размывать все пункты полупрозрачным фоном. Активный пункт не будет иметь фона:

ПРИМЕР №3

В третьем примере мы будем играться с размерами элементов. Изначально они будут уменьшаться и размываться. Затем будет использоваться довольно медленная трансформация:

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

ПРИМЕР №4

В данном варианте используется полупрозрачный черный цвет  фона для ссылок, а сами ссылки получают оранжевый цвет. Также используется линейная функция трансформации:

При наведении курсора мыши мы размываем пункты меню и делаем их фон более прозрачным . Активный пункт меню становится полностью непрозрачным:

ПРИМЕР №5

Пятый пример очень похож на первый. Мы используем здесь белый цвет для тени и шрифта, а также меньше размываем пункты меню:

При наведении курсора меню размывается сильнее, а активный элемент становится четким:

ПРИМЕР №6

В данном примере элементы имеют полупрозрачный белый фон и изначально прорисованы четко:

Для первого и последнего пункта мы будем использовать скругленные углы для формирования стильного меню. Для указания нужных элементов используются селекторы first-child и last-child:

При наведении курсора мыши на меню элементы размываются, а активный пункт меняет цвет и получает прозрачный фон:

ПРИМЕР №7

В последнем примере все меню принимает форму круга. Для этого используется скругление рамки со значением радиуса равным половине высоты/ширины:

Здесь используются трансформации, так как будет анимироваться изменение изменение цвета фона при активации пункта меню. Для прозрачности используется значение rgba:

Также устанавливаем размер шрифта и высоту строки для пункта списка:

Элемент меню будет уменьшаться в размере и размываться:

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

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