Стилизация ссылок с помощью CSS3

Rain

Администратор
Команда форума
04.09.14
334
277
27
#1
[FILE]
http://tools.hostlite.ru/lessons/css3_link_style/css3_link_style.zip
[/FILE]

В этом уроке мы зададим небольшую анимацию для простых ссылок, использующихся на сайте. При наведении курсора мыши на казалось-бы обычную ссылку происходит небольшая анимация. Данный эффект реализован с помощью таблицы стилей CSS.

Шаг 1. HTML
Во-первых подключим таблицу стилей CSS для стилизации ссылок:
HTML:
<link rel="stylesheet" type="text/css" href="style.css" />
Во-вторых зададим необходимый класс для ссылки, например: "cpojer-links1".

Шаг 2. CSS
Сначала настроим трансформацию для каждого браузера, а потом пропишем для присвоенного ссылке класса основные правила, установим время трансформации в 250 миллисекунд, зададим цвет фона ссылки и самой ссылки при анимации, а масштабирование и вращение задано по умолчанию:
Код:
.cpojer-links1 { font-size:15px; }
.cpojer-links1 a { display: inline-block; padding: 4px; outline: 0; color: #ff9900; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0);
}
.cpojer-links1 a:hover { background: #ff9900; text-decoration: none; color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-transform: scale(1.05) rotate(-1deg); -moz-transform: scale(1.05) rotate(-1deg); -o-transform: scale(1.05) rotate(-1deg); transform: scale(1.05) rotate(-1deg);
}
.cpojer-links1 a:nth-child(2n):hover { -webkit-transform: scale(1.05) rotate(1deg); -moz-transform: scale(1.05) rotate(1deg); -o-transform: scale(1.05) rotate(1deg); transform: scale(1.05) rotate(1deg);
}
 

mychatik

Premium
Premium
26.05.15
416
309
mychatik.ru
#2
Ещё один интересный эффект на CSS - "живые" ссылки, расталкивающие скобки: [ Link ].
При наведении курсора [ Скобки расходятся в стороны ]
Код:
<style type="text/css">
a.pushLink { padding: 0 3px; font-weight: bold; text-decoration: none; }
a:hover.pushLink { padding: 0; }
a:hover.pushLink span { margin: 0 3px; color: red; }
</style>
3px - это "расстояние разбега" скобок.
color: red - цвет ссылки при наведении курсора.
Всё можно менять под себя.
Стиль можно дописать в общие стили чата (без открывающего и закрывающего тегов <style>), либо прописать на нужной странице, перед тегом </head>.

Пример использования:
HTML:
<h3>Ссылка, отталкивающая скобки: [ Link ] с помощью CSS</h3>
Наведите курсор на эту ссылку:<br>
<a class="pushLink" href="https://forum.hostlite.ru">[ <span>Скобки расходятся в стороны</span> ]</a>
Я у себя в чате, таким образом оформил номера страниц в смайлах, удаление юзера при Редактировании профиля в чатовской админке и т.д...
Вот так выглядит выбор суммы вклада в банке:


Это очень удобно, так как чётко видишь, что ты нажимаешь.