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

Rain

Администратор
Команда форума
Регистрация
04.09.14
Сообщения
370
Реакции
321
Баллы
63
Возраст
30
http://tools.hostlite.ru/lessons/css3_link_style/css3_link_style.zipВ этом уроке мы зададим небольшую анимацию для простых ссылок, использующихся на сайте. При наведении курсора мыши на казалось-бы обычную ссылку происходит небольшая анимация. Данный эффект реализован с помощью таблицы стилей 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

Support
Команда форума
Регистрация
26.05.15
Сообщения
533
Реакции
466
Баллы
63
Ещё один интересный эффект на CSS - "живые" ссылки, расталкивающие скобки: [ Link ].
При наведении курсора [ Скобки расходятся в стороны ]
Код:
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; }
3px - это "расстояние разбега" скобок.
color: red - цвет ссылки при наведении курсора.
Всё можно менять под себя.
Стиль можно дописать в общие стили чата, либо добавить только на нужной странице, перед тегом </head>.

Пример использования:
HTML:
<h3>Ссылка, отталкивающая скобки: [ Link ] с помощью CSS</h3>
Наведите курсор на эту ссылку:<br>
<a class="pushLink" href="https://netsearch.club">[<span>Скобки расходятся в стороны</span>]</a>

Я у себя в чате, таким образом оформил номера страниц в смайлах, удаление юзера при Редактировании профиля в чатовской админке и т.д...

Вот так, к примеру, выглядит выбор суммы вклада в банке:
C83TT.png


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

stream

Support
Команда форума
Регистрация
09.09.14
Сообщения
1.014
Реакции
674
Баллы
113
В этом уроке мы зададим небольшую анимацию для простых ссылок, использующихся на сайте. При наведении курсора мыши на казалось-бы обычную ссылку происходит небольшая анимация. Данный эффект реализован с помощью таблицы стилей 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);}
Пожалуйста, поправьте адреса:
ДЕМО Посмотреть демо урока
 

Майор

Premium
Premium
Регистрация
04.09.14
Сообщения
2.954
Реакции
2.025
Баллы
113
Сверху Снизу