Сдвиг ссылок вправо CSS.

Приветствую всех на своём блоге. Давайте сегодня попробуем сделать эффект сдвига ссылок в списке. Иногда возникают моменты, что необходимо ссылки вывести в виде списка прямо в теле сообщения. И чтобы уж он совсем скучным не был, заставим их немного подвигаться. Рассмотрим 2 варианта. Как это применить в сообщении блога и в гаджете ярлыки.


Сдвиг ссылок вправо в сообщении.

Для этого мы просто зададим им класс sdvig a и добавим тег transition. Код получается совершенно простой. Если вы будете не очень часто применять его, то устанавливать его надо непосредственно при написании сообщения в режиме HTML. При этом, заключив в теги <style>.

Вот так.

<style>.sdvig a {
 -moz-transition: all 0.1s ease-in-out;
 -o-transition: all 0.1s ease-in-out;
 -webkit-transition: all 0.1s ease-in-out;
 color:#222;
 display:block;
 }
.sdvig a:hover {
 -webkit-transform: translate(8px,0);
 -moz-transform: translate(8px,0);
 -o-transform: translate(8px,0);
 color: #1FA2E1;
 }</style>

То, что я выделила синим, это цвет текста до и после наведения. Величина 0.1s отвечает за скорость анимации.

При написании сообщения вставляйте его где-нибудь в конце поста. А в том месте , где желаете вывести список, двигающихся вправо ссылок, вставляем вот такой код. Где, соответственно решётки - это адрес страницы, куда должна привести ссылка. И то, что выделено синим цветом это название страницы. При необходимости добавляйте строчку <li><a href="###">название</a></li>

<div class="sdvig">
<ul>
<li><a href="###">Главная</a></li>
<li><a href="###">Содержание</a></li>
<li><a href="###">Об авторе</a></li>
</ul>
</div>

В итоге должно получиться так. Наведите курсор на ссылку.

• Главная
• Содержание
• Об авторе

Бывает, что такой вариант применяется в сообщении достаточно часто. В этом случае уместней буде установить первый код непосредственно в шаблоне, перед строкой ]]></b:skin> и без тегов <style> </style>. А потом при создании поста применить в нужном месте второй код.

Сдвиг ссылок в гаджете ярлыки.

В этом случае единственным условием будет вертикальное расположение ярлыков. Задаётся оно в настройках этого гаджета.

Код несколько отличается. И устанавливается в шаблон блога. Панель администратора-вкладка шаблон-изменить HTML. Находим строку ]]></b:skin> и прямо над ней вставляем его. В этой статье подробно прочитайте, как это делается.

#Label1 ul li {margin: 0px;padding: 2px;list-style: none;}
#Label1 ul li a {list-style-type: none;background: url(' http://ecopod.com.ua/images/icons/_strelka.png ') no-repeat scroll 0px 4pxtransparent;margin: 0px;padding: 0px 0px 0px 15px;color: rgb(97, 60, 22);}
#Label1 ul li a:hover {margin: 0px 0 0 8px;transition: .5s ease-out 0s;color:#990000;}
.label-count {float: right;padding: 0px 7px;background: #666;color: #fff;border-radius: 5px;}

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

Не буду занимать больше ваше драгоценное время. Наверняка предновогодняя суета уже охватила многих. На этом поставлю точку.

оформите подписку на новые шпаргалки

Введите Ваш email ...: