Размытие меню с помощью CSS3 переходов

Размытие меню с помощью CSS3 переходов

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

скачать исходникидемо

Изображения, использованные в демо-примерах, сделаны изумительным фотографом Марком Себастьяном (Mark Sebastian) и могут быть использованы по лицензии «Атрибуция на тех же условиях» (Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0) License). Посетите сайт Flickr или персональный сайт Марка, чтобы увидеть замечательные фотографии.

Пожалуйста, обратите внимание на то, что рассмотренные примеры будут работать только в современных браузерах, и, к сожалению, Internet Explorer до сих пор не относится к данной категории, т.к. не поддерживает переходы (а также многие другие предложенные спецификацией CSS3 свойства, которые поддерживаются в других браузерах). Он также не поддерживает текстовые тени, поэтому я добавила дополнительную таблицу стилей для IE, которая позволит, по крайней мере, отобразить элементы меню.

Разметка

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

А теперь мы добавим немного стилей!

CSS

В большинстве наших примеров будут использоваться одинаковые стили для элемента ul и для самих элементов списка. Изменяться будут только ссылки. Итак, вот как выглядят обычные стили для неупорядоченного списка:

А сейчас давайте посмотрим на каждый из семи примеров в отдельности.

Пример № 1

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

Нам нужно, чтобы определенная ссылка при наведении становилась «четкой», а остальные — размытыми. Сейчас мы не можем в CSS прописать правило «при наведении на конкретный элемент нужно делать то-то для всех остальных родственных элементов», потому что родственный селектор — это не совсем родственный селектор. Данный селектор просто выбирает все близлежащие элементы, имеющие общего родителя в HTML.

В любом случае мы можем немного схитрить. Поскольку все пункты меню у нас являются блочными элементами, мы можем просто указать, что нужно сделать все размытым при наведении на все меню (неупорядоченный список), а затем при наведении на конкретный элемент сделать его четким:

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

Пример № 2

Во втором примере мы изначально сделаем элементы меню немного скошенными. А поможет нам в этом свойство 2D трансформаций под названием skew. Значением будет -12 градусов, которое изменяет угол скоса (наклона) по оси X. У ссылок будет полупрозрачный фон, который мы получим благодаря использованию значения в rgba. А также мы добавим немного прозрачную текстовую тень, тоже используя rgba:

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

Пример № 3

В третьем примере мы немного поиграем с размерами элементов. Изначально мы их уменьшим и размоем. Мы будем использовать довольно медленный линейный переход:

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

Пример № 4

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Пример № 5

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

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

Пример № 6

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

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

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

Пример № 7

И в заключительном примере я хотела сделать так, чтобы все меню смотрелось, как круг, путем добавления свойства border-radius со значением равным половине ширины/высоты меню:

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

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

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

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

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

Вот и все! Какой из примеров вам понравился больше всего? Я надеюсь, что вам понравились наши эксперименты, и это вас вдохновит на создание чего-нибудь своего!

Автор: Mary Lou

Источник: http://tympanus.net/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree