Форум

ksa · #11 (**permalink**) 31.01.2013, 10:15

Сообщение от dmitry111

Правильно ли я понимаю, для создания подобного понадобится 8 элементов (4 на углы, 4 на стороны)?

Если все делать по-старинке - таки да...

Deff · #12 (**permalink**) 31.01.2013, 10:20

ksa,
Одной картинкой если через border-image:
Если по старинке, то одеваем элемент в таблицу 3х3

ksa · #13 (**permalink**) 31.01.2013, 10:26

Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	width: 100%;
	height: 100%;
}
.container {
	position: relative;
	display: inline-block;
	padding: 10px;
}
.u {
	position: absolute;
	width: 17px;
	height: 17px;
	background-image: url('http://i077.radikal.ru/1301/07/eaa57fced8d7.png');
	background-repeat: no-repeat;
}
.u1 {
	top: 0;
	left: 0;
	background-position: left top;
}
.u2 {
	right: 0;
	top: 0;
	background-position: -27px top;
}
.u3 {
	right: 0;
	bottom: 0;
	background-position: -27px bottom;
}
.u4 {
	left: 0;
	bottom: 0;
	background-position: 0 bottom;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class='container'>
	<div class='u u1'></div>
	<div class='u u2'></div>
	<div class='u u3'></div>
	<div class='u u4'></div>
	<p>Пример текста</p>
	<p>Пример текста</p>
	<p>Пример текста</p>
	<p>Пример текста</p>
</div>
</body>
</html>

ну и рамки еще по бокам и сверху, снизу...

ksa · #14 (**permalink**) 31.01.2013, 10:29

Сообщение от Deff

Если по старинке, то одеваем элемент в таблицу 3х3

Это вовсе колхозно...

А так дивами можно хотябы скриптом элементы "разукрашивать"...

Deff · #15 (**permalink**) 31.01.2013, 10:35

<style>
#AB {
 width:190px;
 height:68px;
 border-width: 22px!important;
 border-width: 22px!important;
-moz-border-image: url(http://s2.uploads.ru/3zUtK.png) 16 repeat;  /* Firefox 4 */
    -webkit-border-image: url(http://s2.uploads.ru/3zUtK.png) 16 repeat;  /* Safari 5 и Chrome */
    -o-border-image: url(http://s2.uploads.ru/3zUtK.png) 25 repeat; /* Opera 10.5 */}
    border-image: url(http://s2.uploads.ru/3zUtK.png) 25 repeat; /* Opera 10.5 */}
</style>
<div id=AB></div>

Deff · #16 (**permalink**) 31.01.2013, 10:39

Чот FF и Опера последняя дурить стали с border-image
я их в свое время, с полгода назад море ставил - все в норме было
Ток Гугл чейчас правильно отражает

Deff · #17 (**permalink**) 31.01.2013, 10:56

Сообщение от ksa

Это вовсе колхозно...

Колхоз позволяет масштабировать, позиционировать произвольно(а не каждую часть структуры) и 4х элементов нехватает, для произвольного варианта размера, поскольку трансформирует уголки
Скриптом не намного сложнее и таблицу красить, прописать так же класс или через :nth-child, создать тег style и задать в нем методы раскраски