Красивые ссылки для блога.

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



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

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

Для этого нам нужно в шаблон блога добавить небольшой код. Заходим во вкладку шаблон. Делаем резервное копирование. Изменить HTML (прочитайте статью стили CSS в шаблоне блога) находим строку  ]]></b:skin> и прямо над ней вставляем следующие

.rotate-links a {
        display: inline-block;
        padding: 4px;
        outline: 0;
        color:#002903 ;
        -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:#CAF3B2 ;
        text-decoration: none;
        color:#0064FF ;
        -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.

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

 Для этого в редакторе сообщений переходим из режима СОЗДАТЬ в режим HTML.

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

Удачи всем нам.


Ой, а что это там ниже?  


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

введите пожалуйста свой email :

6 комментариев:

  1. Надо попробовать и себе такие установить

    ОтветитьУдалить
  2. Наталья. Мне кажется тебе и пробовать не придётся. Ты возьмёшь и сделаешь.

    ОтветитьУдалить
  3. А как к таким ссылкам относятся заказчики? Они не будут против?

    ОтветитьУдалить
  4. Ollenka, про заказчиков не поняла.

    ОтветитьУдалить
  5. Собственно интересно зачем еще блок создавать - почему не присвоить класс самой ссылке, а в стилях сделать её блочным элементом?

    ОтветитьУдалить
  6. Юрий Йосифович? На момент написания статьи у меня был именно этот блог, который , на мой взгляд, имеет место быть.
    Согласна с Вами , что можно воспользоваться строчно-блочными элементами для этого эффекта . Спасибо.

    ОтветитьУдалить

Пользовательский поиск