Як зробити красиві ефекти для посилань на css3, а саме плавну зміну кольору при наведенні і
Вітаю Вас, дорогі Новомосковсктелі блогу beloweb.ru. В цей день я хочу розповісти Вам, як зробити пару гарних але дуже простих ефектів для посилань на сайті. А саме плавну зміну кольору при наведенні і плавний зсув тексту посилання. Загалом красиво виходить. Тим більше я часто бачу ці ефекти на різних сайтах.
Чому цей спосіб простий? Тому що він робиться тільки за допомогою CSS. Ніяких скриптів тільки стилі.
Загалом, дорогі друзі, давайте приступати.
Плавна зміна кольору при наведенні
За замовчуванням тут стоїть 0,2 секунди при наведенні курсору і 0.02 секунди після прибирання. Іншими словами тут виставляється швидкість анімації. Це значення Ви можете змінювати як завгодно, вони стоять в прикладі.
У класі a: hover виставляється колір посилання, який буде плавно з'являтися при наведенні на неї. За замовчуванням варто цей колір # 1FA2E1.
Для одного посилання на сторінці (або різні кольори)
Щоб цей CSS ефект зробити для одного посилання на сайті, потрібно задати окремий клас до якогось тегу, наприклад, h1 або li. В даному випадку ми будемо пресваевать клас до тегу li. Виглядає це наступним чином:
Тут ми придумали клас s1
Усе. Тепер у нас плавність буде працювати тільки на тій посиланням де присвоєно цей клас s1
Різні кольори посилань
Для того щоб зробити посилання різних квітів при наведенні на одній сторінці, до кожного тегу із посиланням прісваеваемого різні класи в стилях. Давайте подивимося на практиці:
Як бачите, що другий тег li вже має клас s2.
Одним словом тут ми задаємо кожному посиланні окремий колір при наведенні, а потім кожен клас задаємо тегу (li) на сторінці.
Плавне зміщення посилання вправо на сторінці
Кажу відразу, що даний ефект, швидше за все багатьом не сподобатися, але на практиці я його часто помічаю. Мені він подобається і я хочу поділитися ним з Вами.
Робиться цей плавний зсув досить просто. Всього лише потрібно присвоїти до списку на сторінці тег div з відповідним класом.
Для початку нам потрібен сам html код списку, робити ми його будемо за допомогою тегів ul і li:
Як Ви вже помітили, що ми до списку додали тег
Тепер, щоб все запрацювало в стилі потрібно додати наступне:
За замовчуванням (як в прикладі) швидкість анімації коштує 0.1 секунд, а відстань зсуву в 8px. Природно ці значення Ви можете змінювати, поекспериментувати, так би мовити. -)
Як вдіяти не плавну зміну кольору тексту, а плавний перехід на ефект тексту text-shadow (у мене ось ефект світіння) і що т він то якраз плавним не робиться ...
Ось прмер мого ...
.postcontent a. postcontent a: link
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
color: #FFFFFF;
>
postcontent a: visited. postcontent a.visited
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
color: #FFFFFF;
>
postcontent a: hover. postcontent a.hover
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
-moz-transition: shadow 0.2s 0.02s ease;
-o-transition: shadow 0.2s 0.02s ease;
-webkit-transition: shadow 0.2s 0.02s ease;
color: #EAEFCD;
text-shadow: 0px 0px 20px # 00c6ff;
>
-moz-transition: shadow 0.2s 0.02s ease;
-o-transition: shadow 0.2s 0.02s ease;
-webkit-transition: shadow 0.2s 0.02s ease;
Потрібно додавати сюди:
І замість shadow поставте all
Все, сам розібрався ... в анімації (transition) треба було вставляти атрибута не shadow, а text shadow
Ось так
-moz-transition: text-shadow 0.2s 0.02s ease;
-o-transition: text-shadow 0.2s 0.02s ease;
-webkit-transition: text-shadow 0.2s 0.02s ease;