Готовые приемы по работе со свойством border в CSS

Часто возникают вопросы связанные с созданием различного рода границ, с использованием свойства 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;}

Если ваш питомец заболел, то вы можете посетить сайт ветеринарной клиники Биоконтроль, который предлагает полный спектр услуг от диагностики до лечения.



Запись опубликована в рубрике CSS3 с метками , , , , . Добавьте в закладки постоянную ссылку.

2 комментария: Готовые приемы по работе со свойством border в CSS

  1. Уведомление: Готовые приемы по работе со свойством border в CSS | Grabr

  2. Компьютерный мастер говорит:

    Спасибо, пригодилось!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *