Фоновые градиенты

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

Линейные фоновые градиенты.

Применим этот метод на практике и создадим линейный фоновый градиент для врезки на сайте And the winner isn’t.:

Aside {

Border-right-color: #e8e8e8; border-right-style: solid; border-right-width: 2px; margin-top: 58px; padding-left: 1.5%; padding-right: 1.0416667%; margin-left: 1.0416667%; float: left; width: 20.7083333%;

Background: url(../img/sidebarBg2.png) 50% repeat-x;

}

На рисунке 6.10 показано, как результат будет выглядеть в браузере.

Однако нам все же придется прибегнуть к графическому редактору, если мы захотим изменить эффект. Кроме того, содержимое иногда может выступать за пределы градиентного фона, не вписываясь в ограничения в виде фиксированных размеров. Эта проблема усугубляется при работе с адаптивным веб-дизайном, поскольку мы хотим, чтобы структура страницы могла значительно изменять свою форму (например, становиться длиннее или шире), не нарушая при этом дизайн.

Допустим, я решил добавить постеры двух других фильмов в каждый раздел. Вот что получится в итоге (рисунок 6.11).

Размеры врезки увеличились.

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

У врезки появился градиентный фон.

Есть более гибкое решение. Вот синтаксис для обеспечения аналогичного градиента исключительно с использованием CSS3 вместо изображения:

Background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%,

#ffffff 100%);

На рисунке 6.12 показано, как результат будет выглядеть в совместимом браузере.

Фоновый градиент растягивается на всю длину врезки.

Независимо от того, насколько длинным окажется раздел (ведь существует множество фильмов, которые в равной мере могут вызывать у меня восторг или неприязнь), CSS3-градиент всегда будет простираться на всю соответствующую область.

Единственная большая ложка дегтя в бочке меда фоновых градиентов состоит в том, что они не так хорошо поддерживаются, как некоторые другие параметры CSS3. Например, Internet Explorer 9 не воспринимает их (однако это обещают устранить в Internet Explorer 10). Тем не менее фоновые градиенты поддерживаются в большинстве прочих браузеров, хотя и с префиксами поставщиков. Это не должно служить поводом для вашего отказа от их использования. В качестве резервного варианта для устаревших браузеров иногда желательно определять сначала сплошной цвет фона, чтобы они смогли по крайней мере визуализировать однотонный фон, если градиентные правила окажутся им непонятны.

РАНЬШЕ СИНТАКСИСЫ ФОНОВОГО ГРАДИЕНТА БЫЛИ РАЗНЫМИ.

Исторически сложилось так, что разные поставщики браузеров задействовали множество отличающихся синтаксисов для визуализации одного и того же эффекта фонового градиента. Главным «правонарушителем» был WebKit, однако, к счастью, начиная с версии Safari 5.1, они стали руководствоваться теми же соглашениями, что и Mozilla, — соглашениями, которые также использует W3C.

Анализ синтаксиса линейного градиента. Синтаксис линейного фонового градиента может привести вас в замешательство, поэтому проанализируем его.

Первое (опциональное) значение (в данном случае это 90deg) в скобках определяет направление, в котором будет начинаться градиент. Если не указать это значение, то по умолчанию будет задан градиент, начинающийся сверху и далее вниз. Вы также можете использовать другое значение, например to top right, которое позволит обеспечить диагональный градиент, заканчивающийся вверху справа.

Следующее значение (#ffffff 0% в данном примере) представляет собой «отправную точку» — значение цвета, заданное как цвет плюс позиция. Вы также могли бы указать что-то вроде blue 20%, в результате чего цвет постепенно переходил бы от синего к следующему цвету на уровне 20 % вдоль воображаемой линии от начала до конца линейного градиента. Равным образом можно было бы задать отрицательное значение позиции, чтобы градиент начинался до того, как он будет фактически видим. Например:

Background: linear-gradient(90deg, #ffffff -50%, #e4e4e4 50%,

#ffffff 100%);

Эта строка означает, что градиент будет начинаться за 50 % до начала видимой области, вдоль которой проходит воображаемая линия.

Следующее значение — это «остановка цвета». Кратко взглянем, где мы находимся: в нашем примере мы движемся по направлению вверх под углом 90°

(90deg), начиная с белого цвета (#ffffff 0%) и далее к значению цвета #e4e4e4 (светло-серый) на уровне 50 % вдоль линии. Это наша первая «остановка цвета» в градиенте. Если потребуется, мы можем задействовать множественные «остановки цветов» (разделенные запятыми), прежде чем определим нашу «конечную точку».

Последнее значение в скобках (#ffffff 100% в нашем примере) всегда является «конечной точкой» градиента. Независимо от того, сколько «остановок цветов» будет после «отправной точки», последнее значение всегда будет представлять собой «конечную точку».

ПРИМЕЧАНИЕ.

Прочесть спецификацию W3C линейных фоновых градиентов можно по следующему адресу: http://dev. w3.org/csswg/css3-images/#linear-gradients.