Апрель » Уроки по CSS » Линейный градиент с помощью CSS3

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

galina2601 31-01-2014, 11:43 2 833 Уроки по CSS

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

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

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

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

Кнопка

ИТАК!

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

Это просто.

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

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

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;