Пост (в основном) для пользователей:
Blogger, Блоггер (Blogspot, Блогспот)
Если вы решили оставить такой эффект надолго и у вас уже есть опыт работы с шаблоном Блоггер, Blogspot, то удаляете предыдущий код с гаджетом и перед ]]></b:skin> добавляете:
Только что оформил по новому наведенные ссылки и очень рад эффекту! А что бы нововведение стало достоянием общественности, сразу же публикую код и способ установки. © blogodel.com
Не могу не упомянуть источник идеи - автора замечательного блога и популяризатора платформы Блогспот, Blogger: MagentaWAVE
Не могу не упомянуть источник идеи - автора замечательного блога и популяризатора платформы Блогспот, 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>
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
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>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>
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>