Среда, 21 Ноября 2012 16:04

Background Gradient CSS

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

Сейчас мы рассмотрим некоторые возможности создания гралиентной заливки блока при помощи background-image со значение linear-gradient.

 

Значение linear-gradient в данный момент используется с вендорными префиксами для разных браузеров. Код будет выглядеть примерно так:

 

 

background-image: linear-gradient(bottom, rgb(92,180,113) 44%, rgb(120,216,147) 72%, rgb(156,255,177) 86%);

background-image: -o-linear-gradient(bottom, rgb(92,180,113) 44%, rgb(120,216,147) 72%, rgb(156,255,177) 86%);

background-image: -moz-linear-gradient(bottom, rgb(92,180,113) 44%, rgb(120,216,147) 72%, rgb(156,255,177) 86%);

background-image: -webkit-linear-gradient(bottom, rgb(92,180,113) 44%, rgb(120,216,147) 72%, rgb(156,255,177) 86%);

background-image: -ms-linear-gradient(bottom, rgb(92,180,113) 44%, rgb(120,216,147) 72%, rgb(156,255,177) 86%);

background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.44, rgb(92,180,113)), color-stop(0.72, rgb(120,216,147)), color-stop(0.86, rgb(156,255,177)) );

 

Я буду приводить код только для WebKit для уменьшения его кличества.

 

Стандартный градиент из двух цветов слева направо выглядит так:

 

<div style="background-image: -webkit-linear-gradient(0, pink, blueviolet);"></div>
 
 
 
 
Направление заливки можно изменить справа налево:
 
 
<div style="background-image: -webkit-linear-gradient(right, pink, blueviolet);"></div>
 
 
 
 
Или сверху вниз:
 
 
 
 
 
Заливка может проходить под заданным углом. Например, 45deg:
 
 
<div style="background-image: -webkit-linear-gradient(45deg, pink, blueviolet);"></div>
 
 
 
 
Или можно сделать резкий переход между цветами:
 
 
<div style="background-image: -webkit-linear-gradient(0, pink 50px, blueviolet 50px);"></div>
 
 
 
 
В градиентной заливке может участвовать большее количество цветов:
 
 
 
<div style="background-image: -webkit-linear-gradient(0, pink, blueviolet, blue, green, yellow, orange, red);"></div>
 
 
 
 
 
 
 

Additional Info

You have no rights to post comments

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