Всем привет. Решил немного отдалиться от написания тегов на своих проектах, и пописать  эти теги в блог. И сегодня под наш взор попадёт нестандартное выделение ссылок.

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

И так, что же в нём такого, что могло меня так зацепить? Смотрите сами!

Ссылка на демо

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

И так, сначала мы задаём стили для ссылок:

a {
	font-weight:bold;
	text-decoration:none;
	display:inline-block;
	color: #999;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	-ms-transition-property: -ms-transform;
	transition-property: transform;
	-webkit-transform: scale(1) rotate(0);
	-moz-transform: scale(1) rotate(0);
	-o-transform: scale(1) rotate(0);
	-ms-transform: scale(1) rotate(0);
	transform: scale(1) rotate(0);
}

Стоит, наверно, пояснить некоторые стили, которые тут написаны.

• transition-duration: 0.3s – определяет время, за которые будут выполняться стили (в нашем случае это 0.3 секунды
• transition-property: transform – указываем что именно мы делаем с ссылками (трансформируем)
• transform: scale(1) rotate(0) – и указываем параметры этой трансформации (увеличиваем на 1x – то есть, не увеличиваем, и поворачиваем на угол 0 градусов – то есть, не поворачиваем)

Теперь время для псевдокласса :hover, который отвечает за стили ссылки при наведении:

a:hover {
	color:#FFF;
	text-shadow:0 1px 0 #F39;
	background: #F39;
	padding:2px 5px 2px 5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	-ms-border-radius:5px;
	border-radius: 5px;
	-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);
}

• border-radius: 5px – добавляем скругления рамки
• transform: scale(1.05) rotate(-1deg); — ну и, соответственно, изменяем нашу трансформацию (в нашем случае увеличиваем на 5% и поворачиваем против часовой стрелки на 1 градус)

Но, я думаю, будет не очень красиво, если все ссылки будут выделяться одинаково. Что же делать? Воспользуемся ещё одним псевдоселектором :nth-child(2n), который будет «окрашивать» при наведении все чётные ссылки (либо все нечётные, если указать 2n+1 вместо 2n).

a:nth-child(2n+1):hover{
	background:#0099FF;
	text-shadow:0 1px 0 #0099FF;
	-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);
}

Красиво, не так ли? На самом деле есть множество фишек, которые реализуются в сайтах. Их можно придумать самому или, например, предоставить создание сайта компании TotalCan, которые не только смогут реализовать то, что вы придумали, но и по желанию придумают что-то своё и специально для вашего сайта.