Рамки для изображений на CSS3

Используя в полной мере возможности CSS3, можно оперировать не только привычными параметрами, но и указывать положение и толщину дополнительных рамок элемента. Само по себе изображение рамки не представляет особого интереса, в то время как, эта же рамка вокруг изображения, смотрится очень симпатично.

«Кухня»

Чтобы создать нужный эффект рамки используется свойство border-image:

border-image: url(image.png) 25 40 12 10 stretch; 

          Изображение, которое используется в качестве рамки.

          Значения, которые определяют, где браузер должен нарезать изображение (до четырех чисел).

• 1-е значение устанавливает смещение первого горизонтального разреза от верхней части изображения.
• 2-е значение устанавливает смещение второго вертикального разреза от правого края изображения.
• 3-е значение устанавливает смещение третьего горизонтального разреза от нижней части изображения.
• 4-е значение устанавливает смещение четвертого вертикального разреза от левого края изображения.

Если будет указано только одно значение, то оно будет использовано для всех 4-х границ. Если проставить только два значения, первое будет определять верхнюю и нижнюю границу, второе - левую и правую.

          Этот параметр определяет встраивание в границы элемента. Допустимые значения "stretch", "repeat", "round" или "space".

Сам процесс

Во-первых, нужно создать изображение, которое Вы хотели бы использовать в качестве рамки. Ниже представлены два примера:

Обратите внимание, что изображения для этих операций должны иметь прозрачный фон внутри, чтобы просматривалось содержимое ими обрамлённое. Наружный фон тоже не мешало бы сделать прозрачным. Это на тот случай, если изображение будет находиться на странице с фоном, отличным от чисто белого.

Пример 1:

Установка на сайт (Пример 1)

1. Код в раздел head:

<style type="text/css">
.imageborder{  
 border-width: 20px;
 -moz-border-image: url(img/frame.gif) 20 stretch; /*Mozilla version*/
 -webkit-border-image: url(img/frame.gif) 20 stretch; /*Webkit version*/
 -o-border-image: url(img/frame.gif) 20 stretch; /*Opera version*/
 -ms-border-image: url(img/frame.gif) 20 stretch; /*IE syntax when it does support this prop*/
 border-image: url(img/frame.gif) 20 stretch; /*Standard version*/
 }
</style>

2. Код в раздел body:

<img src="img/rajony-pxuketa.jpg" class="imageborder" alt=""> 

Вставьте название своего изображения. Изображение может быть произвольных размеров. С увеличением/уменьшением размеров рамка будет пропорционально изменяться.

Пример 2:

В такую же рамку можно вставить любой другой элемент HTML, например, текст:

Установка на сайт (Пример 2)

1. Код в раздел head тот же, что и в первом примере.

2. Код в раздел body:

<div class="imageborder" style="width: 640px; min-height: 150px">
<p>Здесь располагается Ваш текст.</p>
</div>

Проставьте свои размеры рамки (width и min-height) и вставьте текст.

Пример 3:

Установка на сайт (Пример 3)

1. Код в раздел head:

<style type="text/css">
.imageborder2{    
 border-width: 25px 30px;
 -moz-border-image: url(img/frame2.png) 25 30 stretch;
 -webkit-border-image: url(img/frame2.png) 25 30 stretch;
 -o-border-image: url(img/frame2.png) 25 30 stretch;
 -ms-border-image: url(img/frame2.png) 25 30 stretch;
 border-image: url(img/frame2.png) 25 30 stretch;
 } 
</style>

2. Код в раздел body:

<div class="imageborder2" style="width: 580px; height: 413px;  background:url(img/Vacanta-la-mare.jpg) center center no-repeat">
</div>

Проставьте размеры (width и height) и название файла изображения. Чтобы исключить промежуток между рамкой и сторонами картинки, размеры рамки выставляйте немного меньше. Пропорции можно сверять в Paint Net (изображение → изменить размер, выставить ширину, например, на 20 пикселов меньше и получить значение высоты).

Используемые изображения:

Демо-изображения:

Сохраните все эти изображения в папку img, которая должна находиться в одной директории с файлом вашей страницы.

Спасибо за внимание. Всего самого наилучшего! Посещайте мой сайт. Пока! L.M.