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

[toc depth=»2″ listtype=»ul» title=»Содержание»]

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

Создаём CSS-градиенты без картинок

Предположим, что мы хотим сделать градиентный переход в фоне от серого к черному. Для этого корпорация W3 предложила в CSS3 использовать специальную директиву linear-gradient.

Итак, по версии W3 для того, чтобы сделать градиентный фон достаточно написать в селекторе блока:

background: linear-gradient(start, color1 position1, color2 position2,...,colorN positionN);

И браузер самостоятельно прорисует градиентный фон в блоке.

Очевидно, что цветов и контрольных точек в градиенте может быть много. Параметр start указывает в каком направлении должен распространяться градиент — это может быть или top для вертикально-направленного градиента или left для горизонтально-направленного.

Не все браузеры поддерживают такую фишку, поэтому пока существует ряд ухищрений. Для совсем старых браузеров нужно либо указывать какой-то средний цвет фона (градиента не будет вовсе, но фон не будет белым), или указывать картинку с градиентом (правда, если цель использования linear-gradient на CSS — это сокращение количества загружаемых картинок, то это бесполензно, потому, что во всех браузерах картинка все-равно подгрузится, хоть и будет потом заменена на linear-gradient).
Для IE-подобных браузеров можно использовать градиенты, основанные на фильтрах, а для браузеров на webkit (Safari, Chrome) и gecko (Mozilla), как всегда существует альтернатива: -webkit-gradient и -moz-linear-gradient, которые принимают похожие параметры. Как это всё должно работать смотрите в следующем код-блоке:

background: #999;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
background: -moz-linear-gradient(top,  #ccc,  #000);

После рендеринга это выглядит вот так:

Генерация градиентов на CSS

На практике такими делами заниматься конечно можно, но не очень удобно, гораздо удобнее создавать такие блоки кода автоматически. Для этого существует достаточно большое количество генераторов, но мне больше всего понравился генератор от Colorzilla