12
Дек
2016

Как красиво оформить ссылки CSS + HTML

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

Скачать: link
Как красиво оформить ссылки CSS + HTML
Скачано: 205, размер: 9.8 KB, дата: 16.Май.2017

21 способ красиво оформить ссылки:

Разберем, как это работает на примере одного из эффектов. Структура ссылки не изменяется:

<nav class="cl-effect-13">
    <a href="#">Ссылка 1</a>
    <a href="#">Ссылка 2</a>
    <a href="#">Ссылка 3</a>
    <a href="#">Ссылка 4</a>
    <a href="#">Ссылка 5</a>
</nav>

В некоторых ссылках добавляется элемент data-hover:

<nav class="cl-effect-11">
    <a href="#" data-hover="Ссылка 1">Ссылка 1</a>
    <a href="#" data-hover="Ссылка 2">Ссылка 2</a>
    <a href="#" data-hover="Ссылка 3">Ссылка 3</a>
    <a href="#" data-hover="Ссылка 4">Ссылка 4</a>
    <a href="#" data-hover="Ссылка 5">Ссылка 5</a>
</nav>

Этот элемент применяется для повторения текста ссылки.

Если мы создаем эффект перспективы, необходимо использовать элемент <span>

При создании пятнадцатого эффекта, при котором ссылка становится меньше и меняет окраску, CSS стиль выглядит так:

/* Эффект 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;
}

Вывод

Немного огорчает, что Internet Explorer 10 не поддерживает CSS свойства…..

Хочется верить, что мой урок был для вас полезен. Предлагаю вам использовать мою коллекцию ссылок для создания дизайна вашего сайта. Успешной работы.

Запись Как красиво оформить ссылки CSS + HTML впервые появилась Di-Grand блог о создании сайтов.

Share

Тебе может это понравится...