Красивые эффекты для иконок при наведении с помощью CSS3 переходов

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

 

[su_row][su_column size=”1/3″][su_button url=”http://callmenick.com/_development/icons-css3-transitions/icons-css3-transitions-source.zip” target=”blank” style=”3d” background=”#D70000″ size=”1″ center=”yes” radius=”5″ icon=”icon: save” text_shadow=”2px 2px 2px #000000″ desc=”Исходники” rel=”nofollow”]Исходники[/su_button][/su_column] [su_column size=”1/3″][su_button url=”http://callmenick.com/_development/icons-css3-transitions/” target=”blank” style=”3d” background=”#D70000″ size=”1″ center=”yes” radius=”5″ icon=”icon: check-square-o” text_shadow=”2px 2px 2px #000000″ desc=”Демо” rel=”nofollow”]Демо[/su_button][/su_column][/su_row]

 

Разметка для наших иконок

Разработчики используют разные варианты разметки при создании структуры для иконок. В этой обучающей статье иконки будут ссылаться на что-нибудь, поэтому я буду использовать для иконок тег <a>. Для разметки иконок, выполняющих только презентационную (визуальную) функцию (например, иконки перед заголовками и т.д.), я очень часто видел, как разработчики используют тег <i>. И хотя это не является семантической разметкой, данный способ очень популярен, т.к. здесь используется тег, состоящий всего из одной буквы.

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

  • facebook
  • twitter
  • google plus
  • github
  • rss

Каждая из иконок будет иметь по три разных класса:

  • Класс icon, который является общим для всех иконок
  • Класс icon-type, который является уникальным для каждого демо-примера
  • Класс name, который позволит нам позиционировать фоновое изображение, в зависимости от отображаемой иконки, а также использовать различные цвета и т.д.

Итак, в общем у наших иконок будет следующая структура:

 

<a href="#" class="icon icon-TYPE facebook">facebook</a>
<a href="#" class="icon icon-TYPE twitter">twitter</a>
<a href="#" class="icon icon-TYPE googleplus">google+</a>
<a href="#" class="icon icon-TYPE github">github</a>
<a href="#" class="icon icon-TYPE rss">rss</a>

 

А теперь давайте посмотрим на общий CSS код.

Общий CSS код для наших иконок

Каждая из иконок будет отображаться в виде инлайн-блока (inline-block), но вы можете сделать иконки и просто блочными элементами, в зависимости от ваших нужд. Поскольку в эстетических целях мы будем использовать псевдо-классы, то по умолчанию свойство overflow будет иметь значение hidden. Нам также не нужно, чтобы отображался текст, поэтому мы его скроем. Вот CSS:

 

.icon {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  margin: 4px;
  width: 96px;
  height: 96px;
  font-size: 0;
  text-indent: -9999px;
}

 

Небольшое замечание. Для каждого примера используется спрайт изображений. Спрайты изображений работают фантастически хорошо, особенно когда при наведении курсора мыши нужно показать второй вариант иконки. Все спрайты доступны в исходниках (ссылки есть вверху и внизу статьи). Теперь давайте поближе познакомимся с нашими примерами.

Стиль № 1 – Одноцветная иконка с изменяющимся фоном

В данном примере мы собираемся задействовать два важных момента:

Переход для фона у иконки

Использование подходящего иконочного спрайта

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

 

.icon-mono {
  background: url("../img/icons1.png");
  background-image: url("../img/icons1.svg"), none;
  background-color: #595959;
  -webkit-transition: background 0.3s;
          transition: background 0.3s;
}

/* facebook */
.icon-mono.facebook {
  background-position: 0 0;
}

.icon-mono.facebook:hover {
  background-color: #3b5998;
  background-position: 0 -96px;
}

/* twitter */
.icon-mono.twitter {
  background-position: -96px 0;
}

.icon-mono.twitter:hover {
  background-color: #4099ff;
  background-position: -96px -96px;
}

/* google plus */
.icon-mono.googleplus {
  background-position: -192px 0;
}

.icon-mono.googleplus:hover {
  background-color: #d34836;
  background-position: -192px -96px;
}

/* github */
.icon-mono.github {
  background-position: -288px 0;
}

.icon-mono.github:hover {
  background-color: #333333;
  background-position: -288px -96px;
}

/* rss */
.icon-mono.rss {
  background-position: -384px 0;
}

.icon-mono.rss:hover {
  background-color: #ee802f;
  background-position: -384px -96px;
}

 

Стиль №2 – Приподнятая иконка с изменяющейся границей

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

 

.icon-nudge {
  position: relative;
  background: url("../img/icons2.png");
  background-image: url("../img/icons2.svg"), none;
  -webkit-transition: background 0.2s;
          transition: background 0.2s;
}

.icon-nudge::after {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  content: "";
  -webkit-transition: height 0.2s;
          transition: height 0.2s;
}

.icon-nudge:hover::after {
  height: 8px;
}

/* facebook */
.icon-nudge.facebook {
  background-color: #3b5998;
  background-position: 0 0;
}

.icon-nudge.facebook:hover {
  background-position: 0 -8px;
}

.icon-nudge.facebook::after {
  background-color: #1e2e4f;
}

/* twitter */
.icon-nudge.twitter {
  background-color: #4099ff;
  background-position: -96px 0;
}

.icon-nudge.twitter:hover {
  background-position: -96px -8px;
}

.icon-nudge.twitter::after {
  background-color: #0065d9;
}

/* google plus */
.icon-nudge.googleplus {
  background-color: #d34836;
  background-position: -192px 0;
}

.icon-nudge.googleplus:hover {
  background-position: -192px -8px;
}

.icon-nudge.googleplus::after {
  background-color: #86291d;
}

/* github */
.icon-nudge.github {
  background-color: #333333;
  background-position: -288px 0;
}

.icon-nudge.github:hover {
  background-position: -288px -8px;
}

.icon-nudge.github::after {
  background-color: #4d4d4d;
}

/* rss */
.icon-nudge.rss {
  background-color: #ee802f;
  background-position: -384px 0;
}

.icon-nudge.rss:hover {
  background-position: -384px -8px;
}

.icon-nudge.rss::after {
  background-color: #a9500e;
}

 

Стиль № 3 – Иконка, появляющаяся слева

В данном примере будет отображаться обычная одноцветная иконка. Когда пользователь наведет курсор мыши на иконку, то будет казаться, что цветной вариант иконки «выплывает» слева и выталкивает одноцветный вариант иконки. Мы снова будем использовать псевдо-элемент, на этот раз для двух состояний (обычного и при наведении), оставив обычный элемент с классом .icon в качестве контейнера. Псевдо-элемент будет плавно перемещаться внутри контейнера благодаря свойству left, и за счет свойства transition «скольжение» элементов будет плавным. Вот CSS:

 

.icon-slide {
  position: relative;
}

.icon-slide::before,
.icon-slide::after {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("../img/icons3.png");
  background-image: url("../img/icons3.svg"), none;
  content: "";
  -webkit-transition: left 0.3s;
          transition: left 0.3s;
}

.icon-slide::before {
  left: 0;
  background-color: #595959;
}

.icon-slide::after {
  left: -100%;
}

.icon-slide:hover::before {
  left: 100%;
}

.icon-slide:hover::after {
  left: 0;
}

/* facebook */
.icon-slide.facebook::before,
.icon-slide.facebook::after {
  background-position: 0 0;
}

.icon-slide.facebook::after {
  background-color: #3b5998;
}

/* twitter */
.icon-slide.twitter::before,
.icon-slide.twitter::after {
  background-position: -96px 0;
}

.icon-slide.twitter::after {
  background-color: #4099ff;
}

/* google plus */
.icon-slide.googleplus::before,
.icon-slide.googleplus::after {
  background-position: -192px 0;
}

.icon-slide.googleplus::after {
  background-color: #d34836;
}

/* github */
.icon-slide.github::before,
.icon-slide.github::after {
  background-position: -288px 0;
}

.icon-slide.github::after {
  background-color: #333333;
}

/* rss */
.icon-slide.rss::before,
.icon-slide.rss::after {
  background-position: -384px 0;
}

.icon-slide.rss::after {
  background-color: #ee802f;
}

 

Стиль № 4 – Сплошной фон, анимировано переходящий в тонкую рамку

В данном примере по умолчанию для всех иконок будет задан сплошной фоновый цвет. При наведении будет осуществляться переход фона в тонкую рамку. Как я уже упоминал ранее, я не фанат использования рамок для границ, поэтому на этот раз я воссоздам данный эффект, используя свойство box-shadow, которое будет иметь значение inset. Тень будет указана для псевдо-элемента, расположенного позади иконки. Для самой тени не будет использовано вообще никакого размытия, т.е. будет отображаться сплошной фон. При наведении мы будем уменьшать значение. Вот CSS:

 

.icon-border {
  position: relative;
}

.icon-border::before,
.icon-border::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
}

.icon-border::before {
  z-index: 1;
  -webkit-transition: box-shadow 0.3s;
          transition: box-shadow 0.3s;
}

.icon-border::after {
  z-index: 2;
  background: url("../img/icons4.png");
  background-image: url("../img/icons4.svg"), none;
}

/* facebook */
.icon-border.facebook::before {
  box-shadow: inset 0 0 0 48px #3b5998;
}

.icon-border.facebook:hover::before {
  box-shadow: inset 0 0 0 4px #3b5998;
}

.icon-border.facebook::after {
  background-position: 0 0;
}

/* twitter */
.icon-border.twitter::before {
  box-shadow: inset 0 0 0 48px #4099ff;
}

.icon-border.twitter:hover::before {
  box-shadow: inset 0 0 0 4px #4099ff;
}

.icon-border.twitter::after {
  background-position: -96px 0;
}

/* google plus */
.icon-border.googleplus::before {
  box-shadow: inset 0 0 0 48px #d34836;
}

.icon-border.googleplus:hover::before {
  box-shadow: inset 0 0 0 4px #d34836;
}

.icon-border.googleplus::after {
  background-position: -192px 0;
}

/* github */
.icon-border.github::before {
  box-shadow: inset 0 0 0 48px #333333;
}

.icon-border.github:hover::before {
  box-shadow: inset 0 0 0 4px #333333;
}

.icon-border.github::after {
  background-position: -288px 0;
}

/* rss */
.icon-border.rss::before {
  box-shadow: inset 0 0 0 48px #ee802f;
}

.icon-border.rss:hover::before {
  box-shadow: inset 0 0 0 4px #ee802f;
}

.icon-border.rss::after {
  background-position: -384px 0;
}

 

Стиль № 5 – Вращение кубической иконки

В данном примере будут использоваться CSS3 перспективы, позволяющие нам создавать фигуры, у которых как будто есть объем и глубина (3D). Я буду использовать стандартный элемент в качестве контейнера и два псевдо-элемента в качестве лицевой и обратной сторон куба. При наведении куб будет вращаться по оси X, создавая классный эффект. Вот CSS:

 

.icon-cube {
  position: relative;
  -webkit-perspective: 800px;
          perspective: 800px;
  overflow: visible;
}

.icon-cube::before,
.icon-cube::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/icons5.png");
  background-image: url("../img/icons5.svg"), none;
  content: "";
  -webkit-transition: all 0.3s;
          transition: all 0.3s;
}

.icon-cube::before {
  z-index: 2;
  background-color: #595959;
}

.icon-cube::after {
  z-index: 1;
  opacity: 0;
  -webkit-transform: translateY(48px) rotateX(-90deg);
          transform: translateY(48px) rotateX(-90deg);
}

.icon-cube:hover::before {
  opacity: 0;
  -webkit-transform: translateY(-48px) rotateX(90deg);
          transform: translateY(-48px) rotateX(90deg);
}

.icon-cube:hover::after {
  opacity: 1;
  -webkit-transform: rotateX(0);
          transform: rotateX(0);
}

/* facebook */
.icon-cube.facebook::before,
.icon-cube.facebook::after {
  background-position: 0 0;
}

.icon-cube.facebook::after {
  background-color: #3b5998;
}

/* twitter */
.icon-cube.twitter::before,
.icon-cube.twitter::after {
  background-position: -96px 0;
}

.icon-cube.twitter::after {
  background-color: #4099ff;
}

/* google plus */
.icon-cube.googleplus::before,
.icon-cube.googleplus::after {
  background-position: -192px 0;
}

.icon-cube.googleplus::after {
  background-color: #d34836;
}

/* github */
.icon-cube.github::before,
.icon-cube.github::after {
  background-position: -288px 0;
}

.icon-cube.github::after {
  background-color: #333333;
}

/* rss */
.icon-cube.rss::before,
.icon-cube.rss::after {
  background-position: -384px 0;
}

.icon-cube.rss::after {
  background-color: #ee802f;
}

 

Браузерная поддержка

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

В заключение

Вот и подошла к концу данная обучающая статья! Не забудьте, что вы можете посмотреть демо-примеры и скачать исходники по нижеприведенным ссылкам. Если у вас есть какие-либо вопросы, пожелания или замечания, поделитесь ими в комментариях.

Автор: Nick Salloum
Источник

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.