31.01.2014

Линейный градиент с помощью CSS3

Ни для кого не секрет, что использование любых графических изображений на сайте, замедляет его загрузку. "Тяжелые" сайты медленнее загружаются, съедают трафик. В наш век мобильного интернета практически никто не станет дожидаться того, когда же загрузятся картинки на страницу. Проще найти гораздо более быстрый сайт с той же информацией.

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

Сегодня рассмотрим как с помощью стилей сделать красивую кнопку с градиентной заливкой.

Вот, к примеру, такую:

Кнопка


ИТАК! 

Как сделать красивую кнопку, с градиентной заливкой, не прибегая к использованию Фотошопа и других графических редакторов?  

Это просто.

Для начала разберемся с градиентом.

Вот стандартное описание:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Свойство "линейный градиент" имеет следующие параметры: направление и список переменных, задающих цвет.

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

linear-gradient
(yellow, red); 

linear-gradient
(to left, red , blue); 

linear-gradient
(to right, blue,yellow, red); 

 

 


   

Небольшая проверка вашего браузера:

Если в таблице выше вы видите разноцветные ячейки, значит с браузером все в порядке, а если же клетки не окрашены, значит пора устанавливать последнюю версию браузера. 

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

.button
{
background: -webkit-linear-gradient(red, blue); /* Для Safari */
background: -o-linear-gradient(red, blue); /* Для Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* Для Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Стандартный синтаксис */
}

Небольшое, но ВАЖНОЕ примечание:

Строчка с описанием стандартного синтаксиса обязательно должна быть последней.

 

Я думаю следует пояснить, что вместо зарезервированных слов red, yellow, green, blue и других, обозначающих цвет, можно и нужно использовать описание цвета в виде #fa456b или с процентом прозрачности #fa234b 30% , еще в виде rgb(255, 0, 0) или с прозрачностью rgba(255, 0, 0, 0.5).

 

Вот, в принципе, и все. Как закруглять углы и делать тень можно почитать в соответствующем посте.

Для тех, кому лень читать, напишу сразу код 

 

<style>
.button
{
height:60px;
width:200px;
background: -webkit-linear-gradient(yellow,green,yeelow); 
background: -o-linear-gradient(yellow,green,yeelow) ;
background: -moz-linear-gradient(yellow,green,yeelow) ; 
background: linear-gradient(yellow,green,yeelow); 
border-radius:15px; 
-webkit-border-radius:15px;
-moz-border-radius:15px; 
}
</style>
 

<div class="button">ПРИВЕТ</div>