Как красиво использовать свойство border

Дорогие друзья, сегодня хотел бы поделиться с вами некоторыми приемами работы с CSS. CSS очень мощный инструмент и часто мы не используем очень полезные возможности. Сегодня посмотрим как можно украсить ваши блоки на странице при помощи свойства border. Если кто не знаком с этим свойством, советую ознакомиться с ним в спецификации CSS. А сегодня мы рассмотрим лишь несколько моментов использования свойства border. Как вы увидите, всего лишь несколько строк кода значительно улучшат внешний вид вашего сайта. Вы можете получить различные эффекты без использования каких либо дополнительных инструментов.

Как красиво использовать свойство border

Вот как выглядят варианты использования:

Рабочий вариант.

Вы можете посмотреть эти варианты, перейдя по ссылке ниже:

Как это сделать?

Реализация, как я уже говорил очень проста. Добавляем всего несколько строк кода в документ CSS.

1. Светлая Тень

Этот простой эффект светлой тени достигается при помощи серой тени и бордюра. Если вы используете 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;
}

2. Нажатие

Эффект нажатия здесь достигается исключительно из-за комбинации цветов бордюра. В оличии от других техник получения подобного эффекта. И снова, если вы используете CSS3 и свойство закругленных углов, то эффект будет по настоящему реалистичной. Но мы снова используем простой и лёгкий способ, который будет работать во всех браузерах.

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;
}

3. Скосы

Эта техника очень похожа на технику двойного бордюра, которая очень широко используется для изображений. Немного подумав, можно лекго получить эффект скосов при помощи свойства 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;
}

4. Разделительные линии

Я часто использую эту технику при создании вертикальных меню и списков. Простая комбинация верхних и нижних границ с другими оттенками фонового цвета.
Однако здесь следует помнить, что свойства CSS: 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;}

Вот и вся реализация. Остается только проверить все это в работе. Спасибо за внимание. Успехов!

Рекомендую также:

• Базовый документ CSS
• Стилизация элемента ввода с помощью CSS3
• Как создать цветные метки при помощи CSS
• Фигуры CSS
• Реалистичные тени при помощи CSS3 без использования изображений