Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Как из картинки сделать рамку для элемента (https://javascript.ru/forum/xhtml-html-css/35119-kak-iz-kartinki-sdelat-ramku-dlya-ehlementa.html)

ksa 31.01.2013 10:15

Цитата:

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

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

Deff 31.01.2013 10:20

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

ksa 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 31.01.2013 10:29

Цитата:

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

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

Deff 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 31.01.2013 10:39

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

Deff 31.01.2013 10:56

Цитата:

Сообщение от ksa
Это вовсе колхозно...

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

ksa 31.01.2013 10:57

Цитата:

Сообщение от Deff
и 4 элеентов нехватает

Разумеется. Я и писал что нужно еще 4-ре...

nerv_ 31.01.2013 12:09

Цитата:

Сообщение от dmitry111
не надо с помощью css и картинки.

Цитата:

Сообщение от dmitry111
мне надо с помощью картинки)

ты уж определись

dmitry111 31.01.2013 18:23

Цитата:

Сообщение от ksa
Как вариант...

да, я как раз это и имел в виду
думал еще как-то можно


Часовой пояс GMT +3, время: 04:42.