Эффектное оформление ссылок в блоге

Здравствуйте, дорогие читатели. У меня уже была одна статья как красиво оформить ссылки в блоге на Blogger (Blogspot) "Красивые радужные ссылки в блог".

 

Красивое оформление заголовков и ссылок в blogger (blogspot)

 

Красивое оформление ссылок в blogger

 

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

 

Устанавливается как обычный гаджет. Административная панель > Дизайн > Добавить гаджет, вставляем код и любуемся эффектом.То что выделено красным цветом можно изменить под дизайн своего блога.

 

<style>a {display: inline-block;          padding: 2px;          outline: 0;           border: 1px solid transparent; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px; -webkit-transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; -moz-transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; -o-transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; }  a:hover {           background: #e8e8e8; border: 1px solid #999999; text-decoration: none; text-shadow: none; -moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5); -webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5); box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5); }  }   </style>

 

#e8e8e8 - цвет фона рамки

 #999999 - цвет рамки

 

 

Будь вместе с Я блоггер

 

Будь в тренде!

Получай материалы прямиком в свою почту

Я даю согласие на сбор и обработку своих персональных и не персональных данных согласно действующей на сайте — политике конфиденциальности.
* Нажимая на кнопку "Отправить", "Подпишись" или "Комментировать" Вы соглашаетесь с пользовательским соглашением.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика