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

В первую очередь необходимо разобраться с понятием градиента. Что же это такое?

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

Градиент делится на несколько разновидностей:

1. Линейный — градиентный переход цветов осуществляется вдоль прямой линии.
2. Круговой — цветовые преобразования осуществляется по кругу, от центра до дальних точек.
3. Угловой — переход осуществляется по периметру окружности.
4. Отраженный — является комплексом линейного градиента и зеркального отображения.
5. Алмазный — эффект свечения драгоценного камня.

Ниже представлены примеры градиентов. Номер на рисунке соответствует номеру типа в списке выше.

Как выглядит градиент на сайте?

Очень часто градиент применяется в меню или кнопках. Это придает эффект объемности и формирует особый стиль, который можно увидеть на примере ниже

А вот на этой картинке видно, каким образом применяют градиент в блоках. В данном случае это футер

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

Отцовский метод: градиент на CSS + картинка

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

1. Создается картинка шириной в 1 пиксель (или высотой — это зависит от направления градиента), которая представляет из себя образец требуемого градиента.
2. Размножаем картинку по требуемой оси.

Ниже показано, как это прописывается в файле CSS:

CSS

.grad{
	background: url(image.png) repeat-x #ffef9c;
}

В этой записи цвет фона, записанного в background, должен совпадать с цветом последнего пикселя картинки. Был рассмотрен вариант, когда градиент позиционируется вверху. Теперь рассмотрим, как его позиционировать внизу:

CSS

.grad{
	background: url(image.png) left bottom repeat-x #ff6d6d;
}

В этом случае самый верхний пиксель картинки должен совпадать с цветом заднего фона. Результат записанного кода представлен на картинке

Также стоит отметить, что если градиент направлен не вдоль вертикальной оси, а горизонтальной, то repeat-x нужно заменить на repeat-y.

Кроме того, хотелось бы отметить положительные стороны этого метода:

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

Не стоит забывать, что не существует идеальных решений, у каждого есть свои недостатки:

• фоновая картинка, которая представляет дополнительную нагрузку на сервер, не смотря на то, что ее размер максимально минимизирован;
• в дополнение к первому недостатку, до загрузки фонового изображения пользователь будет видеть блок со сплошной окраской;
• таким способом можно реализовать только линейный градиент, для других разновидностей нужно будет создавать большие картинки на весь фон, так как для них нельзя будет применить цикличность (repeat);

Напоследок необходимо отметить еще одну особенность метода. При изменении высоты блока картинка не будет масштабировать, поэтому верх или низ блока будет залит сплошным цветом.

Продвинутый метод: градиент только на CSS

С выходом новой спецификации CSS3 появились новые функции, посредством которых можно устанавливать градиентный фон блока. Первая функция - linear-gradient();, которая формирует линейный градиент, и вторая - radial-gradient();, которая отвечает за радиальный градиент. Этот тандем позволит создавать любой существующий вид градиента. Также стоит отметить широкий спектр возможностей функций, в который входит возможность установки многоцветного градиента, а также устанавливать свое местоположение через background-position. Ниже в таблицах представлен полный потенциал возможностей этих функций

Перечень параметров функции linear-gradient()

Перечень параметров функции radial-gradient()

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

Поддержка браузерами

Mozzila Firefox

С 2010 года разработчики «огненной лисички» выпустили новую версию браузера Firefox 3.6., которая освоила применение вендорных свойств -moz-linear-gradient() и -moz-radial-gradient(). Эти свойства позволили производить линейные и радиальные градиенты соответственно.

Эти функции по своему назначению и функционалу полностью соответствуют оригиналу. Ниже представлена правильная запись свойства для таблицы стилей:

CSS

.grad{
	background: -moz-linear-gradient(top, #ffef9c, #ff6d6d);
}
.grad{
	background: -moz-repeating-linear-gradient(top left -45deg,
 #ffef9c, #ffef9c 5px, #ff6d6d 5px, #ff6d6d 10px);
}
.grad{
	background-image: -moz-radial-gradient(bottom left, 35deg,
 ellipse closest-side, #ffef9c 0%, #ff6d6d 100%);
}

Важно помнить, что указанный код корректно отработает только в версиях, которые вышли не раньше, чем Firefox 3.6.

Chrome и Safari

Браузеры на движке webkit тоже выпустили свои вендоры для оптимизации работы своих продуктов с градиентами. Таким образом, Safari может работать с градиентами после выхода версии 4.0, а Chrome — с версии 2.0. смотрим пример кода ниже:

CSS

.grad{
	background: -webkit-gradient(linear, left top,
 left bottom, from(rgb(0,102,255)), to(rgb(131,202,84)))
}

Интересен тот факт, что последние версии Chrome легко распознают свойства, написанные по синтаксису Firefox:

CSS

.grad{
	background: -moz-linear-gradient(top, #ffef9c, #ff6d6d);
}
.grad{
	background: -moz-repeating-linear-gradient(top left -45deg,
 #ffef9c, #ffef9c 5px, #ff6d6d 5px, #ff6d6d 10px);
}
.grad{
	background-image: -moz-radial-gradient(bottom left,
 35deg, ellipse closest-side, #ffef9c 0%, #ff6d6d 100%);
}

Вторая характерная особенность браузеров webkit заключается в возможности установки радиального повторяющегося градиента. Чтобы понять, как это сделать — просто опустите глаза ниже:

CSS

.grad{
	background-image: -webkit-radial-gradient(center 45deg,
 circle closest-side, orange, red 10%, orange 30%);
}

Internet Explorer

Наш самый переборчивый ветеран среди браузеров - Internet Explorer работает с градиентами только через посредничество специальных фильтров. Эти фильтры стали доступны для IE после версии 5.5. «Какой фильтр?» — спросите вы. «А вот такой», - отвечу я, указывая на строку, пониже этой

CSS

.grad{
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,
 startColorstr=# ffef9c, endColorstr=# ff6d6d);
}

Эта запись соответствует только линейному не повторяющемуся градиенту. Направление перехода цветов определяются следующими командами:

• GradientType=1 — вдоль горизонтальной оси.
• GradientType=0 — вдоль вертикальной оси.

С выходом в свет версии 8.0 IE стал поддерживать еще одну запись градиентного фона:

CSS

.grad{
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient
 (GradientType=0, startColorstr=#ffef9c, endColorstr=#ff6d6d)";
}

Однако первоначальная форма записи новыми версиями тоже отлично распознается.

Также не стоит забывать про плагин PIE. Он оптимизирует работу самых проблемных версий IE — от 6.0 до 8.0.

CSS

.grad {
	background: -moz-linear-gradient(top, #ffef9c, #ff6d6d);
	background: -webkit-gradient(linear,
 left top, left bottom, from(#ffef9c), to(#ff6d6d)) #ffef9c;
	-pie-background: linear-gradient(top, #ffef9c, #ff6d6d);
	behavior: url(css/PIE.htc);
}

Opera

Этот браузер дольше всего сопротивлялся применению градиента в своей среде. Однако с выходом версии 11.1 поддался влиянию большинства своих коллег. С этого момента браузер может работать с вендорными свойствами -o-linear-gradient и -o-repeating-linear-gradient для применения в background:

CSS

.grad{
	background: -o-linear-gradient(top, #ffef9c, #ff6d6d);
}
.grad{
	background: -o-repeating-linear-gradient(top left
 -45deg, red, red 5px, white 5px, white 10px);
}

Преимущества и недостатки применения нового метода

В качестве сильных сторон новых функций спецификаций CSS3 отметим следующее:

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

Единственный недостаток этого свойства — кроссбраузерность. Именно из-за низкого показателя этого параметра одна строчка кода превращается, как минимум, в 4, чтобы каждому браузеру разъяснить, как работать с градиентом и как его корректно вывести на странице.

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

Выводы

Идея реализации способа, описанного в спецификации CSS3, имеет очень благоприятные перспективы. Однако, в тоже время существует ряд проблем при отображении свойства в разных браузерах, однако с течением времени разработчики придумывают выход из этой ситуации. Думаю, со временем это свойство будет работать во всех браузерах без использования вендорных свойств и фильтров.

Именно из-за наличия этих проблем первый способ еще держится на плаву.