Блог Андрея Юрченко

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

Красивые эффекты для иконок на CSS3

В данной статье мы рассмотрим несколько простых, но очень красивых эффектов для иконок при наведении на них, созданных при помощи различных трансформаций на CSS3 переходах.

css3, эффекты css3

Красивые эффекты для иконок на CSS3

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

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

 Разберем вариант, когда иконки будут ссылаться на что-нибудь. Обычно ссылки ассоциируются с состояниями, возникающими при наведении курсора и мы воспользуемся часто встречающимися социальными иконками.

Структура наших иконок будет следующая:

<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>

Для каждой иконки мы задали три класса:

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

Далее нам нужно задать общий CSS код для наших иконок.

Код CSS для иконок

Каждую иконку мы отобразим в виде inline-block, но можно сделать и простыми блочными элементами. Также используем псевдо-классы для эстетики и в этом случае свойство overflow должно иметь значение hidden. И в конце скроем текст, чтобы он не отображался. Вот код:

.icon {

  display: inline-block;

  vertical-align: top;

  overflow: hidden;

  margin: 4px;

  width: 96px;

  height: 96px;

  font-size: 0;

  text-indent: -9999px;

}

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

Стиль №1-Иконка с изменяющимся фоном

В данном примере мы используем переход для фона у иконки с применением подходящего иконочного спрайта. При наличие спрайта каждая иконка имеет два варианта и мы можем применить переход к свойству 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-Иконка с появлением слева

В этом примере изначально отображается одноцветная иконка, а при наведении на нее цветной вариант иконки как бы выталкивает ее слева. Здесь используется псевдо-элемент для двух состояний с классом 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/icons2.png»);
background-image: url(«../img/icons2.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;
}

Стиль №3-Кубическое вращение иконки

Здесь мы используем CSS3 перспективы, которые позволят нам создать фигуры с эффектом глубины и объема. Используем стандартный элемент как контейнер и два псевдо как лицевой и обратной стороны куба. При наведении создастся классный эффект и куб будет вращаться по оси Х. Вот код 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/icons3.png»);
background-image: url(«../img/icons3.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;
}

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

По умолчанию задан сплошной фоновый цвет для всех иконок. При наведении фон переходит в тонкую рамку. Вот код 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-Приподнимающаяся иконка

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

.icon-nudge {
position: relative;
background: url(«../img/icons5.png»);
background-image: url(«../img/icons5.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;
}

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

Исходники и пример Вы можете скачать и посмотреть по ссылкам ниже. Все вопросы, пожелания и замечания пишите в комментариях.

   Скачать исходники             Демо онлайн   

Понравилась статья? Поделись с друзьями-понажимай на кнопки соцсетей ниже.

С уважением, Андрей Юрченко

Поделитесь статьей в социальных сетях!

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

Оставить комментарий:

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

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

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ