Все для веб-дизайнера
Стилизуем ссылки сайта с помощью CSS
Когда на блоге публикуются материалы связанные ссылками, то возникает вопрос как их скрасить чтобы привлечь внимание посетителей. В данном уроке мы рассмотрим решение, на мой взгляд, стилизации ссылок только средствами CSS. Суть состоит в том, когда при наведении курсора мыши на ссылку, она анимируется и немного смещается влево или вправо. Данный эффект позволят оживить унылые ссылки на сайте. Работать будет в браузерах, поддерживающих стандарт CSS3.
Для начала нам необходимо определить контейнеры, содержащие эти ссылки:
|
1 2 3 |
<div class="cpojer-links"> <div><a href="#">Здесь идет ваша ссылка<a> </div> |
Эффект достигается только средствами CSS
Рассмотрим стили CSS, здесь использованы функции трансформации каждого браузера. Время трансформации установлено на 250 миллисекунд, а масштабирование/вращение определяется установками по умолчанию. Состояние hover изменяет цвет фона (скруглённые углы усиливают эффект)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.cpojer-links a { display: inline-block; padding: 4px; outline: 0; color: #3a599d; -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-links a:hover { background: #3a599d; 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-links 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); } |
В результате мы получаем стильные ссылки, которые при наведении курсора немного вращаются, улучшая стиль сайта!
| Опубликовал Cooper 28.10.2011 в 13:24, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
