Ученье - свет, а неучёных - тьма)))

пятница, 22 февраля 2013 г.

Выделяем ссылки в блоге

     И ещё у всезнающего и всеумеющего Justus'a  нашла интересную идею - красивое оформление ссылок. Здесь эта идея уже "воплощена в жизнь" - Вы видите, что при наведении на текст-ссылку он чудесным образом оказывается в рамочке. А делается это на удивление просто.
     Добавляем гаджет 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>

     Заменить цвет фона рамочки и цвет рамки, ограничивающей табличку, Вы сможете, изменив коды, выделенные красным и зелёным цветами. 

2 комментария:

  1. Как много идей! Спасибо Лидия Васильевна! Подписалась на ваш блог! Жду вас в гости https://domashiniabibliotekaadiliimokkuli.blogspot.com

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