вход

Трансформация ссылок при помощи CSS3

Трансформация ссылок при помощи CSS3
Дорогие друзья, сегодня хотел бы показать вам, как можно украсить ваши ссылки в меню или в тексте. Я говорю о трансформации ссылок. Многие могут подумать, что для достижения такого эффекта нужно использовать JavaScript. Однако все намного проще. Мы будем использовать только таблицы каскадных стилей CSS3. Правда 3 версии. Работать этот эффект будет во всех последних браузерах, поддерживающих стандарт CSS3. Старые браузеры, такие как забытый всеми IE6 будет вместо трансформации ссылок подсвечивать фон в прямоугольной области. Итак, сам эффект. Эффект прост, но интересен. При наведении указателя мыши на ссылку, под ней закрашивается фон в виде прямоугольника со скругленными краями и сама ссылка поворачивается влево или вправо. Этот эффект очень оживляет ссылки.

Трансформация ссылок при помощи CSS3

Вот как выглядит этот эффект:

Трансформация ссылок при помощи CSS3

Рабочий вариант эффекта.

Вы можете посмотреть трансформацию ссылок при помощи CSS3, перейдя по ссылке ниже:.
Посмотреть демо
Не забудьте, что вы должны проверять работоспособность эффекта в последней версии вашего браузера, который должен поддерживать CSS3 и HTML5. Хотя здесь мы используем только CSS3.

Как это сделать?

Сначала в том месте, где мы хотим применить трансформацию ссылок при помощи CSS, определяем контейнер, содержащий эти ссылки.
<div class="mainview">
	<a href="#">Здесь идет ваша ссылка</a>
</div>
Теперь в файле стилей описываем параметры для класса "mainview". Опишем функциональность для каждого типа браузеров, так как каждый имеет свой собственный префикс. Продолжительность перехода установлена в 500 миллисекунд. Изменение масштаба при наведении указателя мыши в 115% и угол поворота в 5 градусов.
.mainview a	{
 display: inline-block;
 padding: 4px;
 outline: 0;
 color: #3a599d;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 -o-border-radius: 4px;
 border-radius: 4px;
 -webkit-transition-duration: 0.5s;
 -moz-transition-duration: 0.5s;
 -o-transition-duration: 0.5s;
 transition-duration: 0.5s;
 -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);
}
.mainview a:hover {
	background: #3a599d;
	text-decoration: none;
	color: #fff;
	-webkit-transform: scale(1.15) rotate(-5deg);
	-moz-transform: scale(1.15) rotate(-5deg);
	-o-transform: scale(1.15) rotate(-5deg);
	transform: scale(1.15) rotate(-5deg);
}
.mainview a:nth-child(2n):hover {
  -webkit-transform: scale(1.15) rotate(5deg);
  -moz-transform: scale(1.15) rotate(5deg);
  -o-transform: scale(1.15) rotate(5deg);
  transform: scale(1.15) rotate(5deg);
}

Вот и вся реализация. Остается только проверить трансформацию в работе.

Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
7 комментариев

Статья → Трансформация ссылок при помощи CSS3

  1. JohnnySuperb:

    Очень необычно ходить по таким ссылкам. по крайнем мере вызывает интерес! А почему себе не прикрутили такие ссылки?

  2. Николай:

    Пока думаю где лучше их использовать. :-)

  3. Было бы хорошо добавить к эффекту плавности

  4. Николай:

    В последних версиях браузеров он плавный. Попробуйте увеличить время эффекта, сейчас он transition-duration: 0.5s

  5. Я думаю, что пока рановато использовать эти возможности CSS3 – маловато народа, использующего самые свежие версии браузеров. Как следствие, дизайн для старых браузеров будет слишком сильно отличаться от CSS3 либо вместо CSS3 придется использовать flash или что-то аналогичное – работы по дизайну вдвойне больше. Ну а если не редизайнить под старые браузеры – на них все эти красоты вообще никак не будут выглядить, а сам дизайн сайта будет кривым.

  6. Николай:

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

  7. Согласен. Тема моего блога, например, использует скругление углов из CSS3. На такое оформление через javascript и т.п. методы я так и не сподобился)). Кроме этой возможности CSS3 я больше ничего из CSS3 не вносил в тему. Была мысль по поводу ссылок в стиле, как у Вас описано в статье, но потом отказался – слишком много изменений придется внести в новый стиль (пришла мысль о том, что в случае с таким оформлением придется увеличивать значения margin и может что-то еще) – у сайта дизайн может поползти.

Оставить комментарий

Статья → Трансформация ссылок при помощи CSS3

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.

 

Нажимая на кнопку, я даю согласие на рассылку, обработку персональных данных и принимаю политику конфиденциальности.