—»     —»   Применение иконических шрифтов для создания забавного эффекта при наведении
  Раздел: Руководства   Нет комментариев  

Применение иконических шрифтов для создания забавного эффекта при наведении



Применение иконических шрифтов для создания забавного эффекта при наведении

В данном руководстве мы немного расскажем вам об иконических шрифтах. Кроме основных преимуществ, эта техника представляет простой способ сделать так, чтобы ваши иконки были очень четкими на экранах Retina.
Мы воспользуемся собственным набором иконок, сгенерированных при помощи приложения IcoMoon, чтобы реализовать привлекательный эффект при наведении.

Этап 1: Наведаемся к IcoMoon

Для нашего сегодняшнего руководства мы отобрали 6 иконок социальных сетей: dribbble, facebook, twitter, pinterest, tumblr, flickr, google plus и github. Что может быть проще того, чтобы выбрать шрифт и нажать кнопку Download? Наш собственный иконический шрифт готов к использованию.

Применение иконических шрифтов для создания забавного эффекта при наведении

Скачанная с IcoMoon папка содержит файл style.css, который мы будем использовать в качестве основы. Вот то, с чего мы начнем:

@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

.icon-dribbble:before, .icon-twitter:before, .... {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-dribbble:before {
content: "e00a";
}
.icon-twitter:before {
content: "e00b";
}
....

Этап 2: HTML

Давайте взглянем на разметку.

<ul class="social">
<li><a href="#" aria-hidden="true" class="icon-dribbble"></a></li>
<li><a href="#" aria-hidden="true" class="icon-twitter"></a></li>
<li><a href="#" aria-hidden="true" class="icon-facebook"></a></li>
<li><a href="#" aria-hidden="true" class="icon-pinterest"></a></li>
<li><a href="#" aria-hidden="true" class="icon-flickr"></a></li>
<li><a href="#" aria-hidden="true" class="icon-google-plus"></a></li>
<li><a href="#" aria-hidden="true" class="icon-tumblr"></a></li>
<li><a href="#" aria-hidden="true" class="icon-github"></a></li>
</ul>

Состояние aria-hidden отвечает за то, будет ли виден элемент или нет. Мы используем его в качестве вспомогательной технологии для того, чтобы сообщать экранным читалкам о том, виден ли элемент.

Этап 3: Идея эффекта при наведении

Суть заключается в том, чтобы реализовать эффект подвижности при наведении. Здесь у нас есть элементы «li», параметр overflow будет выставлен на hidden, а также элементы «а». При помощи псевдо-элементов a:after мы дублируем иконку. При наведении у нас «li» изменяет фоновый цвет, элемент «а» смещается вверх на половину своей высоты (смотрите на нижеприведенное изображение). Об изменения будут происходить с едва заметным переходом.

Применение иконических шрифтов для создания забавного эффекта при наведении

Этап 4: Дополнительные стили иконического шрифта

Здесь нам нужно скопировать стили icon-*:before для icon-*:after :

.icon-dribbble:before, .icon-twitter:before, ..., .icon-github:before,
.icon-dribbble:after, .icon-twitter:after, ..., .icon-github:after {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased; }

.icon-dribbble:before, .icon-dribbble:after {
content: "e00a"; }

.icon-twitter:before, .icon-twitter:after {
content: "e00b"; }
...

Этап 5: Продолжение CSS

Обратите внимание на то, что ради удобства здесь мы не используем браузерные префиксы для перехода.

ul.social {
text-align: center; }
ul.social li {
display: inline-block;
width: 60px;
height: 60px;
overflow: hidden;
line-height: 60px;
background: #404040;
/* --- optional, it looks nice also with simple squares --- */
border-radius: 100%;
transition-duration: 0.7s; }
/* --- hover effect : background color change --- */
ul.social li:hover {
background: #33cc99;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3); }
ul.social li a {
display: block;
width: 100%;
height: 200%;
position: relative;
top: 0;
color: #33cc99;
transition: top 0.7s; }
/* --- hover effect : shift up --- */
ul.social li:hover a {
top: -60px; }
ul.social li a:after {
position: absolute;
width: inherit;
height: 50%;
left: 0;
bottom: 0;
color: #404040;
line-height: 60px;
text-align: center; }

И на этом все! Надеемся, что вам понравилось данное руководство, и ждем ваших комментариев! Спасибо!

Условия использования:

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

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: шрифты, иконки, CSS
Опубликовал Design FactoRy   Прочитано (раз): 6493   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31