Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  воскресенье, февраля 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>
В данном случае "оживающий" эффект ссылке придают символы << и >>. Вы же можете задать в этом качестве любой понравившийся символ, который гармонично выделит нужный вам адрес.



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

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


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