Приветствую всех на своём блоге. Давайте сегодня попробуем сделать эффект сдвига ссылок в списке. Иногда возникают моменты, что необходимо ссылки вывести в виде списка прямо в теле сообщения. И чтобы уж он совсем скучным не был, заставим их немного подвигаться. Рассмотрим 2 варианта. Как это применить в сообщении блога и в гаджете ярлыки.
Сдвиг ссылок вправо в сообщении.
Для этого мы просто зададим им класс sdvig a и добавим тег transition. Код получается совершенно простой. Если вы будете не очень часто применять его, то устанавливать его надо непосредственно при написании сообщения в режиме HTML. При этом, заключив в теги <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>
В итоге должно получиться так. Наведите курсор на ссылку.Сдвиг ссылок вправо в сообщении.
Для этого мы просто зададим им класс 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>
-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>. А потом при создании поста применить в нужном месте второй код.
Сдвиг ссылок в гаджете ярлыки.


#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;}
Не забывайте сохранить шаблон и посмотреть, что получилось. Прямо как кнопочки аккордеона. Другие интересные эффекты, которые можно придать ссылкам были в этой шпаргалке.
Не буду занимать больше ваше драгоценное время. Наверняка предновогодняя суета уже охватила многих. На этом поставлю точку.
оформите подписку на новые шпаргалки
Пришло время привести свои ярлыки в порядок! :))) Спасибо Вика!!!
ОтветитьУдалитьПожалуйста, Кристина. Дерзай.У тебя всё получится.
ОтветитьУдалить