Часто возникают вопросы связанные с созданием различного рода границ, с использованием свойства
border
. Чаще всего используются обычные границы, например, solid
или dotted
. Сегодня же мы разберем примеры, в которых создадим границы, которые будут выглядеть совсем иначе. Это будут границы с различными эффектами, такими как тени, вдавленность, границы со скосом. Давайте приступим.
Светлая тень
Достаточно простой эффект для создания светлой тени вокруг определенного блока. Достигается данный эффект с помощью использования различных границ. С помощью CSS3 свойства box-shadow вы можете достичь реального эффекта тени.
CSS
.shadow {
padding: 20px;
border: 1px solid #f0f0f0;
border-bottom: 2px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Вдавленная граница
Эффект очень похож на тот, который мы применяли к тексту. Здесь нужно обратить внимание на цвета границ. Так же воспользуемся свойством CSS3 border-radius для получения закругленных углов.
CSS
.pressed {
color: #fff;
padding: 20px;
background: #111;
border: 1px solid #000;
border-right: 1px solid #353535;
border-bottom: 1px solid #353535;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Граница со скосом
Этот эффект достигается благодаря использованию двойных границ. Достичь максимального эффекта помогает свойство outline
.
CSS
img.light {
outline: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 10px;
background: #f0f0f0;
}
img.dark {
outline: 1px solid #111;
border-top: 1px solid #555;
padding: 10px;
background: #333;
}
Вдавленные линии
Ну и напоследок рассмотрим еще один эфект, который так же достигается благодаря использованию свойства CSS border. Чаще всего этот эффект используется при создании вертикальных меню и списков. Это простая комбинация из верхних и нижних границ с различными тенями. Имейте ввиду, что селекторы first-child
и last-child
не поддерживаются старыми браузерами. Для проверки совместимости используйте тестовую страницу. Как вариант, вы можете использовать jQuery дабы достичь кроссбраузерности.
CSS
#indented ul{
margin: 20px 0; padding: 0;
list-style: none;
}
#indented ul li {
border-top: 1px solid #333;
border-bottom: 1px solid #111;
}
#indented ul li:first-child {border-top: none;}
#indented ul li:last-child {border-bottom: none;}
#indented ul li a {
padding: 10px;
display: block;
color: #fff;
text-decoration: none;
}
#indented ul li a:hover {background: #111;}
Если ваш питомец заболел, то вы можете посетить сайт ветеринарной клиники Биоконтроль, который предлагает полный спектр услуг от диагностики до лечения.
Спасибо, пригодилось!