02 апр 2011
Стильный вид ссылок W/ CSS
Fobos Категория: Web-Мастеру » Разное
У нас вы можете скачать бесплатно Стильный вид ссылок W/ CSS .

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Стильный вид ссылок W/ CSS

Красивый эффект плавно поворачивающий ссылки налево или направо. Чтоб улучшить эффект фоновый цвет ссылки изменяется. И на удивление это чудо основано только на свойствах CSS!


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);
}
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);
}
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);
}

Была использована функциональность каждого браузера (так как у каждого есть свой собственный префикс.) Продолжительность перехода установлена в 250 миллисекунд, и масштабирование/вращение установлено по умолчанию. Даже ссылки вращаются в различных сторонах, чтобы добавить немного больше стиля!










Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Itachi Uchiha | 2 апреля 2011 15:18 | (0|0)
  • Группа: Посетители |
  • Комментарий: 1 (ссылка)

хех. зашёл на westciv[точка]com/tools/transforms/index.html и сделал это за 5 секунд

Flatron1997 | 3 апреля 2011 18:20 | (0|0)
  • Группа: Посетители |
  • Комментарий: 2 (ссылка)

не знаю как вам, но мне этот эффект совсем не понравился, слишком замудрено...ИМХО

finenko | 5 декабря 2015 17:30 | (0|0)
  • Группа: Посетители |
  • Комментарий: 3 (ссылка)

Во флеш можно же делать гораздо интереснее эффекты и без замудривания!!!

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.