Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  вторник, марта 27, 2012  

Ссылки с эффектом вращения
Робко и небрежно весна все более и более воцаряется вокруг, заползая постепенно в наши промерзшие за зиму квартиры и погрузневшие тела. И только по ночам еще злорадствует бесконечно унылый и холодный ветер, отчего днем надолго пытаешься впитать те редкие мгновенье солнца, которые только одни способны скрасить затянувшийся приход весны...

Продолжим и мы добавлять очарования в наши блоги в предвкушении торжества теплых и солнечных часов. Потому сегодня я расскажу о небольшом оригинальном украшении ссылок при наведении на них курсором мыши. О чем-то подобном, но намного проще и строже, я уже пытался рассказывать ранее, однако теперь речь пойдет о гораздо более красочном и заметном воплощении. И все благодаря использованию замечательных свойств CSS.

Пример стилизации ссылок при наведении.







Как видите, выглядит достаточно эффектно. Однако сия забава работает только в современных браузерах с поддержкой CSS3, отчего вращение в чудесном Internet Explorer ни разу не проявится, а последует только выделение ссылки при наведении без скругленных углов. R.I.P.

Пример работы ссылки с эффектом вращения в IE

Установка эффекта вращения ссылок при наведении в блог.


Определим стили для ссылок с таким эффектом.


Проследуйте Шаблон > Изменить HTML.
В поле редактирования шаблоном найдите отрезок ]]></b:skin> и перед ним вставьте следующий код:
.rotate-links a {
        display: inline-block;
        padding: 4px;
        outline: 0;
        color: # ed5125;
        -webkit-transition-duration: 0.30s;
        -moz-transition-duration: 0.30s;
        -o-transition-duration: 0.30s;
        transition-duration: 0.30s;
        -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);
}
.rotate-links a:hover {
        background: #ed5125;
        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);

.rotate-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);
}
При желании измените цвет шрифта ссылки в неактивном состоянии (значение color: # ed5125 на участке кода .rotate-links a {}), цвет шрифта ссылки при наведении (значение color: #fff на участке кода .rotate-links a:hover {}) и цвет окаймовки при наведении (значение background: #ed5125 на участке .rotate-links a:hover {}). Используйте онлайн-генератор веб-цветов.

Общая конструкция в блоге.


Теперь остается ссылкам, требующим применения данного эффекта, задать контейнер с классом, который мы определили в стилях. Конструкция с ссылкой будет выглядеть так:
<div class="rotate-links">
<a href="адрес_ссылки">Ваш текст анкора</a></div>
Таким образом, просто добавляя ссылки в контейнер div, мы можем организовать симпатичный список различных адресов. О чем-то похожем, впрочем, я также рассказывал в одной из прошлых статей.



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


Вы можете оставить свой отзыв через блок комментариев Вконтакте. При отсутствии профиля в этой социальной сети, воспользуйтесь удобной формой Disqus ниже.