Двойная рамка с использованием CSS

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

Однако существует еще несколько методов для создания такого эффекта. Причем очевидное использование фонового изображения является весьма далеким от идеала.

В данном уроке представлены пять методов для создания двойной рамки вокруг элемента. Причем только один из них требует изображение, а все остальные используют чистый код CSS с отличной поддержкой в браузерах.

Метод 1: border и outline

Данный метод работает только в тех браузерах, которые поддерживают свойство outline (все, кроме IE6/7). Вы добавляете элементу  оба свойства  border и outline.

.one {
	border: solid 6px #fff;
	outline: solid 6px #888;
}

Причина по которой данный метод работает заключается в том, что рамка outline всегда выводится с внешней стороны прямоугольника. Проблема свойства  outline проявляется при использовании плавающих элементов, так как рамка перекрывается с соседними элементами.

 

Метод 2: псевдо элемент

Данный метод требует абсолютного позиционирования рамки:

.two {
	border: solid 6px #fff;
	position: relative;
	z-index: 1;
}

.two:before {
	content: "";
	display: block;
	position: absolute;
	top: -12px;
	left: -12px;
	border: solid 6px #888;
	width: 312px;
	padding-bottom: 12px;
	min-height: 100%;
	z-index: 10;
}

Ключевыми моментами являются установка свойства z-index (чтобы псевдо элемент  перекрывал содержание), позиционирование и значение min-height. Последнее свойство сохраняет эластичность рамки.

 

Метод 3: тень

Самый лучший метод, так как требуется только одна строчка кода с установками свойства box-shadow.

.three {
	box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;
}

 

Для появления двойной рамки используются две тени. Они определяются через запятую. Размытие устанавливается в 0. Так как вторая тень перекрывается первой, то она имеет вдвое большую ширину. Ключевой момент - использование непрозрачных цветов, что создает четкую границу между рамками.

Как и свойство outline, box-shadow не влияет на соседние элементы и может перекрывать их. Поэтому надо установить поле для формирования внешнего вида композиции.

Естественно, поддержка свойства box-shadow ограничена новыми браузерами.

 

Метод 4: Дополнительный элемент div

В данном методе используется внешний элемент <div> для вывода двойной рамки. Единственный метод, который работает везде:

.four {
	border: solid 6px #888;
	background: #fff;
	width: 312px;
	min-height: 312px;
}

.four div {
	width: 300px;
	min-height: 300px;
	background: #222;
	margin: 6px auto;
	overflow: hidden;
}

Внешний элемент имеет немного больший размер, что создает иллюзию двойной рамки.

 

Метод 5: свойство border-image

Еще одним новым методом является часто забываемое свойство CSS3 border-image:

.five {
	border-width: 12px;
	-webkit-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;
	-moz-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;
	border-image: url(multiple-borders) 12 12 12 12 repeat; /* for Opera */
}

 

Знаете другой метод?

Конечно, здесь собраны давно известные и широко используемые методы. Но может быть вам известен какой-нибудь трюк. Поделитесь с читателями в комментариях.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/FYwyJqDDDUM/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Двойная рамка с использованием CSS | | 2012-06-19 12:01:39 | | Статьи Web-мастеру | | Одним из занятных приложений свойства CSS3 box-shadow является создание двойной рамки вокруг элемента. Очень интересный эффект для оформления страниц, Но работать он будет только в новых версиях | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: