Трансформация ссылок при помощи 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);
}

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

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

7 комментариев

  1. Олег04/08/2010
  2. Олег04/08/2010
    • Николай04/08/2010
  3. Search Boat26/07/2010
    • Николай27/07/2010
  4. JohnnySuperb26/07/2010
    • Николай26/07/2010

Добавить коментарий

шестнадцать − 11 =