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

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

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

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

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

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

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

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

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

Проследуйте Шаблон > Изменить 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);
}

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

Теперь остается ссылкам, требующим применения данного эффекта, задать контейнер с классом, который мы определили в стилях. Конструкция с ссылкой будет выглядеть так:

<div class="rotate-links">
<a href="адрес_ссылки">Ваш текст анкора</a></div>

Таким образом, просто добавляя ссылки в контейнер div, мы можем организовать симпатичный список различных адресов. О чем-то похожем, впрочем, я также рассказывал в одной из прошлых статей.