Сегодня я покажу вам, как, применяя различные функции, используя анимацию, можно получать интересные результаты для ссылок при наведении на них курсора. Точно так же можно проработать ссылку и при клике на нее. Эффектов очень много, в нашем примере их двадцать один. Все они интересные и уникальные. Наверняка, вы сможете подобрать для своего сайта что-то, что вам понравиться. Просмотрите демонстрационную версию и действуйте.
21 способ красиво оформить ссылки:
Разберем, как это работает на примере одного из эффектов. Структура ссылки не изменяется:
|
1 2 3 4 5 6 7 |
<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:
|
1 2 3 4 5 6 7 |
<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 стиль выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* Эффект 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 свойства…..
Хочется верить, что мой урок был для вас полезен. Предлагаю вам использовать мою коллекцию ссылок для создания дизайна вашего сайта. Успешной работы.
Привет