Красивое оформление ссылки в ввиде таблички с тенью, для Блогспот, Blogger


Пост (в основном) для пользователей: Blogger, Блоггер (Blogspot, Блогспот)

Только что оформил по новому наведенные ссылки и очень рад эффекту! А что бы нововведение стало достоянием общественности, сразу же публикую код и способ установки.  © blogodel.com
Не могу не упомянуть источник идеи - автора замечательного блога и популяризатора платформы Блогспот, Blogger: MagentaWAVE
http://www.magentawave.com/


Если вам понравился эффект и вы решили это внедрить у себя, то установка очень проста. Добавьте нижеприведенный код в: Дизайн - Добавить гаджет - HTML/JavaScript
<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>

Красная маркировка - цвет заднего фона таблички, зеленая - цвет рамки.

Если вы решили оставить такой эффект надолго и у вас уже есть опыт работы с шаблоном Блоггер, Blogspot, то удаляете  предыдущий код с гаджетом и перед ]]></b:skin> добавляете:
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); } 
 } 
  © blogodel.com 

Апдейт: Не удержался и модифицировал код. Теперь еще и цвет, автоматически меняется у таблички! Красная маркировка это цвет, который можно поменять.   

<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 {  
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); 
background:#e8e8e8;
  -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);
  -moz-animation: animaciy9 2s ease-in-out 1s infinite alternate;
  -webkit-animation: animaciy9 2s ease-in-out 1s infinite alternate;
  -ms-animation: animaciy9 2s ease-in-out 1s infinite alternate;}

@-moz-keyframes animaciy9 {   
  from { background-color: #e8e8e8;}  
  to { background-color: #ffff00;} 
}


@-webkit-keyframes animaciy9 {
  from { background-color: #e8e8e8;}
  to { background-color: #ffff00;}
}

@-ms-keyframes animaciy9 {
  from { background-color: #e8e8e8;}
  to { background-color: #ffff00;}}


  </style>

28 коммент.:

MagentaWAVE
Justus
Николай
Светлана Шестопалова
Alex Oos
Лидия Васильевна
Justus
Лидия Васильевна
Ольга Николаевна
Justus
Максим Волченко
Максим Волченко
Justus
Максим Волченко
Лидия Васильевна
Justus
Лидия Васильевна
Justus
Лидия Васильевна
Бурляева Светлана Васильевна
ДОУ Информатизация
Виталий Петров
Justus
Татьяна Сергеевна Соколова
Алексей Таборовец
Ирина Шкаверо
Валентина
Justus

Отправить комментарий

Дорогие Друзья! К сожалению, временно, по причине здоровья, моя активность по этому блогу ВРЕМЕННО ПРИОСТАНОВЛЕНА! Предположительно до января 2018 г.

Доска почета

Плюсани блог!