В этом уроке мы рассмотрим экспериментальные функции, с помощью которых можно создать действительно красивые эффекты для ссылок при наведении. Идея состоит в том, чтобы использовать псевдо-элементы и анимацию при наведении. В уроке мы будем делать анимацию именно при наведении на ссылку, но таким же образом можно сделать эффекты при нажатии по ссылке. В полной новости есть примеры, в которых собраны 21 эффект. Все эффекты очень необычны и стоит того, чтобы посмотреть каждый. Думаю какой-нибудь да приглянется и вам захочется использовать его на своём сайте. Не теряйте времени и переходите к просмотру демо версий ссылок.
21 способ красиво оформить ссылки:
Посмотреть примерСкачать
Как и в предыдущем уроке мы рассмотрим на примере одного вида эффекта. В структуре ссылок ничего нового:
Но у некоторых ссылок присутствует атрибут data-hover:
Он используется для дублирования текста самой ссылки.
А для создания эффекта перспективы используется дополнительный элемент <span>:
Вот так выглядит CSS стиль для ссылок, которые используют 15-й эффект (при котором ссылка немного уменьшается в размере и изменяет свой цвет):
/* Эффект 15: уменьшение и изменение цвета */
.cl-effect-15 a {
color: rgba(0,0,0,0.2);
font-weight: 700;
text-shadow: none;
}
.cl-effect-15 a::before {
color: #fff;
content: attr(data-hover);
position: absolute;
transition: transform 0.3s, opacity 0.3s;
}
.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
transform: scale(0.9);
opacity: 0;
}
Вывод
К сожалению IE10 не поддерживают CSS свойство transform-style: preserve-3d. Надеюсь эта коллекция ссылок поможет в создании необычных эффектов на своём сайте! Забирайте их себе и смело применяйте 🙂 .
Успехов!
С Уважением, Юрий Немец
Источник: http://tympanus.net/codrops/2013/08/06/creative-link-effects/