Сегодня я хочу рассказать о необычном способе выделения ссылок, который я уже использую в своём новом шаблоне.

Такое выделение смотрится довольно красиво и подвижно, и реализовывается при помощи CSS.

Разъясню подробнее, какие свойства и псевдоселекторы используются для этого. Для начала нам нужно определить стили для ссылок на странице:

Вы заметили похожие свойства? Да, они похожи, но приставка перед ними (-o-, -moz-, -webkit-, -ms-) указывает на браузер, для которого будет использовано это свойство. Дело в том, что некоторые браузеры не поддерживают новые свойства css3 (я говорю о старых браузерах), поэтому с помощью этих приставок работу этих свойств можно проверить в экспериментальном режиме. Так мы сможем добиться максимальной кроссбразерности.

transition-duration: 0.25s; Эта строка задаёт задёржку преобразования равной 0.25 секунды.
transition-property: transform; Задаём тип преобразования – трансформация.
transform: scale(1) rotate(0); Указываем параметры трансформации. Scale(1) – относительное растяжение, 1 указывает на то, что растяжения не будет. Rotate(0) – поворот. 0 указывает на то, что поворот осуществляется на 0 градусов (т.е. не осуществляется).
Теперь рассмотрим стили при наведении на ссылку, за которые отвечает псевдоселектор :hover
[css] a:hover {
color:#333;
text-shadow:0 1px 0 #0f9fff;
display:inline-block;
background:#006fdd;
padding:2px 5px 2px 5px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
-ms-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);
-ms-transform:scale(1.05) rotate(-1deg);
transform: scale(1.05) rotate(-1deg);
}
[/css]

Свойство border-radius также воспринимается лишь новыми браузерами, поэтому и к нему припишем приставок. Оно отвечает за радиус скругления.
Свойство background задает цвет фона.
Свойство display указывает тип отображения.
Свойство padding отвечает за отступы (сверху, справа, снизу, слева).
Теперь свойство transform принимает значения: scale(1.05) – растянуться в 1.05 раза и rotate(-1deg) – повернуться на -1 градус.

А теперь то, что придаст необыкновенности, псевдоселектор :nth-child(2n), который используется для добавления стиля к элементам на основе нумерации в дереве элементов.

Значения

odd – Все нечетные номера элементов.
even – Все четные номера элементов.
число – Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
выражение – Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2…

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

htmlbook.ru

Вот впринципе и всё. Как вы видите, в нашем случае при наведении на четный элемент, будет меняться цвет фона ссылки, а также поворот будет осуществляться в другую сторону.

Посмотреть пример вы можете здесь.

Сообщение Необыкновенное выделение ссылок с помощью CSS3 появились сначала на Блог Stafox'a.