Loading





Форекс с Альпари

eTXT




Анкетка


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


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

Демо-пример

«Кухня»

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

border-image: url(image.png) 25 40 12 10 stretch; 
Значения, которые определяют, где браузер должен нарезать изображение

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

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

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

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

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

Свойство border-image и все параметры поддерживаются в браузерах:

  • Firefox до версии 15.0 поддерживает свойство -moz-border-image;
  • Safari до версии 6.0, Chrome до версии 15.0, Android до версии 4.4 поддерживают свойство -webkit-border-image;
  • Opera до версии 15.0 поддерживает свойство -o-border-image.

Поэтому, ожидать универсальности и кроссбраузерности данного эффекта не приходится, что вызывает огромное сожаление.


Сам процесс

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

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

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

Для создания прозрачного фона можно успешно использовать известный всем редактор изображений Paint Net свежей версии.

  1. Откройте изображение в редакторе;
  2. Выберите инструмент Волшебная палочка и сделайте щелчок в нужном месте изображения;
  3. Нажмите Правка - Вырезать или сразу Ножнички в панели инструментов;
  4. Фон сменится на прозрачный;
  5. Сохраните изображение с прозрачным фоном.

Пример 1:

Пример №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

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

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

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


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

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


Пример 3:

Пример №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 пикселов меньше и получить значение высоты).



Используемые изображения:
Изображение №1 для создания рамки
Изображение №2 для создания рамки


Демо-изображения:
Изображение №1 для демонстрации
Изображение №2 для демонстрации

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

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


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка