Як красиво оформити посилання

Відео: Оформлення каналу на Twitch

У цьому уроці ми розглянемо експериментальні функції, за допомогою яких можна створити дійсно красиві ефекти для посилань при наведенні. Ідея полягає в тому, щоб використовувати псевдо-елементи і анімацію при наведенні. В уроці ми будемо робити анімацію саме при наведенні на посилання, але таким же чином можна зробити ефекти при натисканні на посилання. Повною новини є приклади, в яких зібрані 21 ефект. Всі ефекти дуже незвичайні і варто того, щоб подивитися кожен. Думаю який-небудь та сподобається і вам захочеться використовувати його на своєму сайті. Не втрачайте часу і переходите до перегляду демо версій посилань.

21 спосіб красиво оформити посилання:

Подивитися прімерСкачать

Як і в попередньому уроці ми розглянемо на прикладі одного виду ефекту. У структурі посилань нічого нового:

1234567

="Cl-effect-13"gt;lt;a href="#"gt; Посилання 1lt;/agt;lt;a href="#"gt; Посилання 2lt;/agt;lt;a href="#"gt; Посилання 3lt;/agt;lt;a href="#"gt; Посилання 4lt;/agt;lt;a href="#"gt; Посилання 5lt;/agt;lt;/navgt;

Але у деяких посилань присутній атрибут data-hover:

Відео: Канал YouTube. Як красиво оформити канал на YouTube [Новий дизайн]

1234567

="Cl-effect-11"gt;lt;a href="#" data-hover="Посилання 1"gt; Посилання 1lt;/agt;lt;a href="#" data-hover="Посилання 2"gt; Посилання 2lt;/agt;lt;a href="#" data-hover="Посилання 3"gt; Посилання 3lt;/agt;lt;a href="#" data-hover="Посилання 4"gt; Посилання 4lt;/agt;lt;a href="#" data-hover="Посилання 5"gt; Посилання 5lt;/agt;lt;/navgt;

Відео: Як красиво оформити профіль стіма (Детально + посилання)

Він використовується для дублювання тексту самої посилання.

А для створення ефекту перспективи використовується додатковий елемент:

1234567

="Cl-effect-10"gt;lt;a href="#" data-hover="Посилання 1"gt; lt;spangt; Посилання 1lt;/spangt; lt;/agt;lt;a href="#" data-hover="Посилання 2"gt; lt;spangt; Посилання 2lt;/spangt; lt;/agt;lt;a href="#" data-hover="Посилання 3"gt; lt;spangt; Посилання 3lt;/spangt; lt;/agt;lt;a href="#" data-hover="Посилання 4"gt; lt;spangt; Посилання 4lt;/spangt; lt;/agt;lt;a href="#" data-hover="Посилання 5"gt; lt;spangt; Посилання 5lt;/spangt; lt;/agt;lt;/navgt;

Ось так виглядає CSS стиль для посилань, які використовують 15-й ефект (при якому посилання трохи зменшується в розмірі і змінює свій колір):

+12345678910111213141516171819

/ * Ефект 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. Сподіваюся ця колекція посилань допоможе в створенні незвичайних ефектів на своєму сайті! Забирайте їх собі і сміливо використовуйте # 128578; .

Успіхів!

З повагою, Юрій Німець

джерело: https://tympanus.net/codrops/2013/08/06/creative-link-effects/