Создание красивых эффектов для ссылок

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

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

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

В большинстве случаев примеры – это простой HTML-элемент nav с несколькими ссылками:

<nav class="cl-effect-13">
    <a href="#">Beleaguer</a>
    <a href="#">Lassitude</a>
    <a href="#">Murmurous</a>
    <a href="#">Palimpsest</a>
    <a href="#">Assemblage</a>
</nav>

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

<nav class="cl-effect-11">
    <a href="#" data-hover="Desultory">Desultory</a>
    <a href="#" data-hover="Sumptuous">Sumptuous</a>
    <a href="#" data-hover="Scintilla">Scintilla</a>
    <a href="#" data-hover="Propinquity">Propinquity</a>
    <a href="#" data-hover="Harbinger">Harbinger</a>
</nav>

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

<nav class="cl-effect-10">
    <a href="#" data-hover="Seraglio"><span>Seraglio</span></a>
    <a href="#" data-hover="Sumptuous"><span>Sumptuous</span></a>
    <a href="#" data-hover="Scintilla"><span>Scintilla</span></a>
    <a href="#" data-hover="Palimpsest"><span>Palimpsest</span></a>
    <a href="#" data-hover="Assemblage"><span>Assemblage</span></a>
</nav>

Пример стилей для одного из эффектов. Псевдо-элемент позиционируется чуть выше самого текста ссылки и при наведении мы сделаем псевдо-элемент невидимым путем расширения его и эффекта затухания (разметка для этого примера, как во втором блоке HTML):

/* Effect 15: scale down, reveal */
.cl-effect-15 a {
    color: rgba(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 не поддерживает свойство transform-style, которое используется в некоторых примерах.

Мы проверяем поддержку данного свойства с помощью библиотеки Modernizr.

Надеюсь, вам понравились эти эффекты!