Нестандартное выделение ссылок
20 мая 2012| Рубрика: CSS
Всем привет. Решил немного отдалиться от написания тегов на своих проектах, и пописать эти теги в блог. И сегодня под наш взор попадёт нестандартное выделение ссылок.
Если честно, то влюбился я в него с первого взгляда, и, несомненно, буду его использовать в будущем дизайне блога, который сейчас уже в процессе создания.
И так, что же в нём такого, что могло меня так зацепить? Смотрите сами!
Ссылка на демо
Реализовывается такой эффект с помощью 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, которые не только смогут реализовать то, что вы придумали, но и по желанию придумают что-то своё и специально для вашего сайта.