Многим кто создает таблицы не хватает знания как указать красиво границы и как в нужном месте убрать бордюр, или придать ему свой отдельный цвет.
Все это делается при помощи стилей Бордюр картинки цветной через CSS.
Первый пример, смотрим скрин эффект работы его.
Создаем 2 стиля, один статический другой будет цветным динамическим, то есть при наведение.
Создаем бордюр отдельный для каждой стороны квадрата:
border-right правый бордюр
border-top Верхний бордюр
border-left Левый
border-bottom нижний
Придаем каждому свой цвет и в итоге получаем разноцветную рамку как показано на картинки анимации
И вот так вот выглядит стиль в сборе:
Code
<style>
.borders IMG {
border-right: #FFFFFF 2px solid; border-top: #FFFFFF 2px solid; border-left: #FFFFFF 2px solid; border-bottom: #FFFFFF 2px solid;
}
.borders:hover IMG {
border-right: #0099FF 2px solid; border-top: #FF0000 2px solid; border-left: #00FF00 2px solid; border-bottom: #FF00FF 2px solid;
}
</style>
Имя класса добавляем не в картинку а в ссылку если хотим использовать эффект
hover (изменение цвета при наведение) класс так и прописываем как в стиле
borders:
Code
<a class="borders" href="http://ucozon.ru"><img src="http://ucozon.ru/avatar/84/awa_admin_ucozon2.gif"></a>
Другой пример:
Если мы хотим просто сделать без изменения при наведение курсора то :
Code
<style>
.borders IMG {
border-right: #0099FF 2px solid; border-top: #FF0000 2px solid; border-left: #00FF00 2px solid; border-bottom: #FF00FF 2px solid;
}
</style>
и та же кликабельная картинка которая будет все отображать как на примере.
Меню сайта
Меню сайта
