Как красиво использовать свойство 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;}

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

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

4 комментария

  1. Юрий23/09/2015
  2. Роман07/09/2010
    • Николай07/09/2010
  3. Андрей31/08/2010

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

одиннадцать − 3 =