Понедельник, 25 Марта 2013 12:05

Градиентная заливка границы

Written by 
Оцени эту запись
(5 Голоса)

В данной статье мы попробуем сделать градиентную заливку границы элемента и в процессе рассмотрим CSS свойство border-image.

 

Пример:

 

Градиентная заливка границы

 

Картинке сделана рамочка шириной 20px, залитая градиентом.

 

Код:

 

 

border-width: 20px;
border-image: -webkit-linear-gradient(-45deg, rgb(255,236,161) 15%, rgb(245,199,213) 70%) 50;
 
При помощи такого приема можно можно заливать рамку объекта любым градиентом. Прием не особо хочет работать кроссбраузерно, возможно, это придет к нам со временем.
 
 
 

Свойство border-image

 
CSS свойство border-image позволяет задать изображения для рамки элемента, размер контура и дает возможность разбить фоновое изображение на фрагменты. Эти свойства также могут быть заданы отдельно.
 
 
border-image-source - задает путь к фоновому изображения границы элемента
 
border-image-slice - указывает отступы для разделения фонового изображения на фрагменты - сверху, справа, снизу и слева
 
border-image-width - задает ширину фонового изображения границы сверху, справа, снизу и слева
 
border-image-outset - задает размер выступа фонового изображения за пределы границы
 
border-image-repeat - повтор фонового изображения (stretch, repeat, round)
 
 
 
Для примеров возьмем такое фоновое изображение для рамки элемента:
 
 
 
 
 
 
 
А теперь сделаем блок 200px на 200px серого цвета и будем менять настройки фонового изображения его границы.
 
 
 
 
 
Код:
 
 
 
border-image-source: url(http://kate-land.net/images/stories/float.jpg);
border-image-slice: 20 20 20 20;
border-image-width: 11px;
border-image-repeat: repeat;
 
 
 
Теперь попробуем растянуть фоновое изображение:
 
 
 
 
 
 
 
border-image-repeat: stretch;
 
Свойство border-image-slice для каждой стороны задает количество пикселей фоновой картинки, которое должно поместиться за заданную ширину указанной области.
 
 
Пример:
 
 
 
border-image-slice: 20 20 20 20 - размер фрагмента картинки равен ширине рамки
картинка не искажается 
 
 
 
border-image-slice: 10 10 10 10 - размер фрагмента картинки в 2 раза меньше размера рамки
картинка растянута в 2 раза
 
 
 
 
 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов