| |||||||||||
|
Рамки для изображений на CSS3Используя в полной мере возможности CSS3, можно оперировать не только привычными параметрами, но и указывать положение и толщину дополнительных рамок элемента. Само по себе изображение рамки не представляет особого интереса, в то время как, эта же рамка вокруг изображения, смотрится очень симпатично.
«Кухня»Чтобы создать нужный эффект рамки используется свойство border-image: border-image: url(image.png) 25 40 12 10 stretch; Изображение, которое используется в качестве рамки. Значения, которые определяют, где браузер должен нарезать изображение (до четырех чисел).
Если будет указано только одно значение, то оно будет использовано для всех 4-х границ. Если проставить только два значения, первое будет определять верхнюю и нижнюю границу, второе - левую и правую. Этот параметр определяет встраивание в границы элемента. Допустимые значения "stretch", "repeat", "round" или "space". Свойство border-image и все параметры поддерживаются в браузерах:
Поэтому, ожидать универсальности и кроссбраузерности данного эффекта не приходится, что вызывает огромное сожаление. Сам процессВо-первых, нужно создать изображение, которое Вы хотели бы использовать в качестве рамки. Ниже представлены два примера: Обратите внимание, что изображения для этих операций должны иметь прозрачный фон внутри, чтобы просматривалось содержимое ими обрамлённое. Наружный фон тоже не мешало бы сделать прозрачным. Это на тот случай, если изображение будет находиться на странице с фоном, отличным от чисто белого. Для создания прозрачного фона можно успешно использовать известный всем редактор изображений Paint Net свежей версии.
Пример 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. |
||||||||||
|