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

[Rain]

http://tools.hostlite.ru/lessons/css3_link_style/css3_link_style.zip

ДЕМО Посмотреть демо урока

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

<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]

Ещё один интересный эффект на 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>.

Пример использования:

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

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

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

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

 

[stream]

Домен hostlite.ru продаётся. Цена: 24 000,00 р.

Домен hostlite.ru продаётся. Цена: 24 000,00 р. Категории: Бизнес - Малый бизнес; Бизнес - Маркетинг и реклама; Бизнес - Потребительские товары и услуги. Вся информация о домене в магазине доменов REG.RU.

tools.hostlite.ru

ДЕМО Посмотреть демо урока

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

<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);}

Пожалуйста, поправьте адреса:

Домен hostlite.ru продаётся. Цена: 24 000,00 р.

Домен hostlite.ru продаётся. Цена: 24 000,00 р. Категории: Бизнес - Малый бизнес; Бизнес - Маркетинг и реклама; Бизнес - Потребительские товары и услуги. Вся информация о домене в магазине доменов REG.RU.

tools.hostlite.ru

ДЕМО Посмотреть демо урока

 

[Майор]

Пожалуйста, поправьте адреса:

5 лет прошло, не думаю, что этот материал остался...