воскресенье, февраля 05, 2012

Оживающие под курсором ссылки

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

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

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

Пример.

Ниже вы можете посмотреть это свойство ссылок в действии.



< Наведите курсор >

( Наведите курсор )

{ Наведите курсор }

[ Наведите курсор ]

\\ Наведите курсор //



Для достижения данного эффекта не потребуется никаких скриптов, все выполняется средствами CSS.

Установка в блог.

Перейдите Шаблон > Изменить HTML. При помощи поиска в браузере найдите участок ]]></b:skin> и прямо перед ним добавьте следующий код:
  a.pushLink { padding: 0 3px; font-weight: bold; text-decoration: none; }
  a:hover.pushLink { padding: 0; }
  a:hover.pushLink span { margin: 0 3px; color: red; }
Сохраните шаблон. Действия в нем завершены.

Теперь остается в том месте, где требуется выделить ссылку, добавить вместе с ней такую конструкцию:
<a class="pushLink" href=""><< <span>Анкор (текст) ссылки</span> >></a>
В данном случае "оживающий" эффект ссылке придают символы << и >>. Вы же можете задать в этом качестве любой понравившийся символ, который гармонично выделит нужный вам адрес.