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)

dmitry111 31.01.2013 01:22
Как из картинки сделать рамку для элемента
 


Как из нее сделать рамку для элемента, что-то вроде:



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

danik.js 31.01.2013 01:32
http://caniuse.com/#search=border-image

dmitry111 31.01.2013 01:42
danik.js,

не это не вариант) Нужен хардкор))

Чтоб в ие работало

danik.js 31.01.2013 01:48
Ну хардкор так хардкор. С чем именно проблемы то?

dmitry111 31.01.2013 02:20
danik.js,

не могу найти в поисковиках как это все делают)
Нашел на htmlbook статью, там задавали бордер элементу, а на углы клепали картинки. Но данный способ здесь не применим, исходник -прозрачный png и затереть следы углов не получится.

Я просто никогда не делал подобные штуки, хотел бы узнать как)

рони 31.01.2013 02:33
dmitry111,
может как вариант http://www.malsup.com/jquery/corner/

dmitry111 31.01.2013 03:09
рони,

не надо с помощью css и картинки.
За вариант спасибо, взял на заметку

danik.js 31.01.2013 03:36
Можно еще SVG/VML попробовать )

dmitry111 31.01.2013 07:07
попробовать можно, но мне надо с помощью картинки)

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


http://htmlbook.ru/css/border-image

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
Как вариант...
да, я как раз это и имел в виду
думал еще как-то можно

dmitry111 31.01.2013 18:24
вариант с border-image самый удобный, жаль не кроссбраузерный


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