Оцените решение

mnstrsound · May 5, 2013

Стоит такая проблема:

То бишь блок с красиво оформленной прозрачной рамкой.

Вот решение:

HTML:


<!doctype html>
<html>
	 <head>
		 <title>Deluxe</title>
		 <link rel="stylesheet" type="text/css" href="css/style2.css" />
	 </head>
	 <body>
			 <div class="border">
					 <span class="top tl"></span>
					 <span class="top tr"></span>
					 <span class="bottom bl"></span>
					 <span class="bottom br"></span>
					 <div class="out">
							 <div class="in">
									 <div class="content">
											 adsdasdasdasdasdasdasdasdasdasda<br>
											 adsdasdasdasdasdasdasdasdasdasda<br>
											 adsdasdasdasdasdasdasdasdasdasda<br>
											 adsdasdasdasdasdasdasdasdasdasda<br>
adsdasdasdasdasdasdasdasdasdasda<br>
									 </div>
							 </div>
					 </div>
			 </div>
	 </body>
</html>

CSS:


html{
background:url(../img/html_bg.gif) repeat-x;
}
.border{
position:relative;
margin: 100px 100px;
max-width:500px;
min-width:300px;
/*width:500px;
border:1px solid #ddd;*/
overflow:hidden;
}
.top{
	 display: block;
	 position:absolute;
	 height:46px;
	 top:0;
	 background:url(../img/border-bg.png) no-repeat top left;
}
.tl{
	 width:100%;
	 right:45px;
}
.tr{
	 right:0;
	 width:45px;
}
.bottom{
	 display: block;
	 position:absolute;
	 height:46px;
	 bottom:0;
	 background:url(../img/border-bg.png) no-repeat bottom left;
}
.bl{
	 width:100%;
	 right:45px;
}
.br{
	 right:0;
	 width:45px;
}
.out{
	 background:url(../img/leftborder-bg.png) repeat-y;
	 margin: 46px 0;
}
	 .in{
		 background:url(../img/rightborder-bg.png) repeat-y right;
		 width:100%;
	 }
		 .content{
			 margin:0 23px;
			 background:#010101;
			 color:#fff;
		 }

Картинки:

Искал решение в интернете - плохо искал. Сам написал. Посоветуйте решения покороче и попроще если существуют.

npofopr · May 6, 2013

Через :before, :after, box-shadow.

А то, что вы сделали, ну да, плохо искали. http://chikuyonok.ru/2009/10/decor/

mnstrsound · May 6, 2013

Через :before, :after, box-shadow.
А то, что вы сделали, ну да, плохо искали. http://chikuyonok.ru/2009/10/decor/

box-shadow разве можно оформить с border-ом?

Мое решение вроде не сильно плохое - по вертикали полностью резиновое, по горизонтали немного тянется.

А план действий с псевдоклассами?

Kray Storm · May 6, 2013

Чтоб как-то оценить, нужно сначала определить хоть какие-то требования... А так блок, ну и блок. И решений - валом.

Это решение сейчас можно считать несколько устаревшим. И оно, насколько понимаю, вполне стандартное "из учебника". Не значит, что его нельзя использовать (хозяин-барин), но возможности CSS3 позволяют сделать то же самое (или близко к этому) без использования изображений и позиционирования.

Используется несколько вложенных блоков. Внутреннему задается вертикальный градиент в фоне, border-radius и box-shadow без размытия. Дальше идет блок с opacity. Дальше - блок с border:dashed. И снова - тень. Учитываем, что прозрачность передается потомкам. Играемся с внутренней/наружной тенью и... готово. Все отступы делаются через padding, без всяких position и overflow.

Единственное отличие в итоге может быть в отображении "стежков" - они будут не овальные (или какие там?), а прямоугольные. Но это увидят только дизайнер макета и верстальщик. Ну и по браузерам нужно отдельно посмотреть.

Edited May 6, 2013 by Kray Storm

Great Rash · May 6, 2013

Нормальное решение.

mnstrsound · May 6, 2013

Чтоб как-то оценить, нужно сначала определить хоть какие-то требования... А так блок, ну и блок. И решений - валом.
Это решение сейчас можно считать несколько устаревшим. И оно, насколько понимаю, вполне стандартное "из учебника". Не значит, что его нельзя использовать (хозяин-барин), но возможности CSS3 позволяют сделать то же самое (или близко к этому) без использования изображений и позиционирования.
Используется несколько вложенных блоков. Внутреннему задается вертикальный градиент в фоне, border-radius и box-shadow без размытия. Дальше идет блок с opacity. Дальше - блок с border:dashed. И снова - тень. Учитываем, что прозрачность передается потомкам. Играемся с внутренней/наружной тенью и... готово. Все отступы делаются через padding, без всяких position и overflow.
Единственное отличие в итоге может быть в отображении "стежков" - они будут не овальные (или какие там?), а прямоугольные. Но это увидят только дизайнер макета и верстальщик. Ну и по браузерам нужно отдельно посмотреть.

Надо решать вопросы кроссбраузерности, мое решение вплоть до 7 ie подходит.

Нормальное решение.

То бишь вполне часто такое можно встретить? Мне бы хотелось конечно более короткого кода и полной резины.

Great Rash · May 6, 2013

Для полной резины надо нарезать 4 угла и 4 стороны, и раскидать их абсолютом внутри контейнера. Будет работать везде кроме ИЕ6. В своей верстке я делаю так: http://jsfiddle.net/m6Keu/

npofopr · May 6, 2013

Мое решение вроде не сильно плохое

Никто и не говорит, что плохое, просто тема уже изъезжена

mnstrsound · May 6, 2013

Для полной резины надо нарезать 4 угла и 4 стороны, и раскидать их абсолютом внутри контейнера. Будет работать везде кроме ИЕ6. В своей верстке я делаю так: http://jsfiddle.net/m6Keu/

А для углов используешь метод звездочки с позиционированием фона?

Great Rash · May 6, 2013

Неа, метод кружка

Т.е. у меня вот такой кружок для углов и еще два спрайта: верх+низ и лево+право. Т.е. всего 3 картинки из которых кружок - самая "тяжелая".

mnstrsound · May 6, 2013

Неа, метод кружка
Т.е. у меня вот такой кружок для углов и еще два спрайта: верх+низ и лево+право. Т.е. всего 3 картинки из которых кружок - самая "тяжелая".

Принцип тот же, спасибо)

SelenIT · May 7, 2013

border-image?

Great Rash · May 7, 2013

ИЕ в требованиях, какой там бордер-имедж...

klierik · May 7, 2013

Отличное решения как для начала текущего тысячилетия.

В наши дни я бы сделал на базе одного дива и :before :after

Или же, что мне больше по душе, в рамках graceful degradation, при помощи градиентов и border-radius

Great Rash · May 7, 2013

Ох, я иногда просто поражаюсь как сильно некоторые товарищи оторваны от реальности

Sign In

Оцените решение

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information