Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.

Спецификацию W3C, относящуюся к линейным градиентным фонам, можно найти по адресу http://www.w3.org/TR/css3-images/.

Добавление альтернативных вариантов для устаревших браузеров

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

.thing {

background: red;

background: linear-gradient(45deg, red, blue);

}

Радиальные градиентные фоны

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

Радиальный градиентный фон имеет следующий синтаксис (испытать его на практике можно, запустив код из каталога example_06-04):

.radial-gradient {

margin: 1rem;

width: 400px;

height: 200px;

background: radial-gradient(12rem circle at bottom, yellow, orange, red);

}

Анализ синтаксиса radial-gradient.После указания свойства (background:) начинается запись radial-gradient. Для начала перед первой запятой определяются форма или размер градиента и его позиция.

Для формы и размера в показанном ранее примере мы использовали круг размером 12 rem, но давайте теперь рассмотрим несколько других примеров значений.

• 5em задаст круг размером 5 em. Если задан только размер, то ту часть, которая определяет форму ('circle'), можно опустить.

• circle задаст круг на весь размер контейнера (изначально размер радиального градиента, если он не указан, задается до самого дальнего угла, а ключевые слова для задания размера будут рассмотрены позже).

• 40px 30px определит форму эллипса, как бы прорисованного внутри прямоугольника шириной 40 пикселов и высотой 30 пикселов.

• ellipse задаст форму эллипса, помещаемого внутрь элемента.

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

• at top right задает начало распространения радиального градиента из правого верхнего угла.

• at right 100px top 20px устанавливает начало распространения радиального градиента на 100 пикселов от правого края объекта и на 20 пикселов от верхнего края.

• at center left задает начало распространения градиента на половине пути вниз по левой стороне элемента.

Наши параметры размеров, формы и позиции завершаются запятой, после чего определяются любые цветовые опорные точки, работающие точно так же, как и в linear-gradient.

Упростим описание записи: размер, форма и позиция указываются перед первой запятой, после которой указывается любое количество цветовых опорных точек (эти точки разделяются запятыми).

Удобные ключевые слова распространения для задания размеров адаптивных конструкций

Чтобы добиться адаптивности, может оказаться полезно задавать размеры градиентов в пропорциях, а не в фиксированных пиксельных размерах. Тогда вы будете знать, что защищены (как буквально, так и фигурально) от изменения размеров элементов. К градиентам можно применять ряд удобных ключевых слов, задающих размеры. Их вместо любых значений размеров можно записывать следующим образом:

background: radial-gradient(closest-side circle at center, #333, blue);

А вот то, к чему приводит применение каждого из них.

• closest-side — фигура распространяется до ближайшей к центру стороны блока (в случае задания круглой формы) или соответствует расстояниям до ближайших к центру горизонтальной и вертикальной сторон (в случае задания эллиптической формы).

• closest-corner — фигура распространяется от центра строго до ближайшего угла блока.

• farthest-side — в противоположность closest-side вместо распространения фигуры до ближайшей стороны она распространяется из центра до самой дальней стороны (или, в случае задания эллипса, до самых дальних горизонтальной и вертикальной сторон).

• farthest-corner — фигура распространяется из центра до самого дальнего угла блока.

• cover — результат идентичен применению farthest-corner.

• contain — результат идентичен применению closest-side.

Спецификацию W3C, относящуюся к радиальным градиентным фонам можно найти по адресу http://www.w3.org/TR/css3-images/.

Хитрый способ получения отличных линейных и радиальных градиентов CSS3

Если задание градиентов вручную представляется весьма трудоемкой работой, существует несколько интерактивных генераторов градиентов. Я предпочитаю пользоваться средством, которое можно найти по адресу http://www.colorzilla.com/gradient-editor/. В его графическом интерфейсе используется стиль графического редактора, позволяющий выбирать цвета, цветовые опорные точки, стиль градиента (поддерживаются как линейные, так и радиальные градиенты) и даже цветовое пространство (HEX, RGB(A), HSL(A)), в котором нужно задать получающийся в результате этого выбора градиент. Допускается также загружать в качестве отправных предопределенные градиенты. Если этого будет недостаточно, данное средство даже обеспечит вас дополнительным кодом для исправления недостатков Internet Explorer 9, чтобы показать градиент, и для создания альтернативного варианта со сплошным цветом для устаревших браузеров. Все еще сомневаетесь? А как насчет способности генерировать CSS-градиент на основе градиентных значений в существующем изображении? Возможно, именно этот аргумент станет для вас решающим.

Повторяющиеся градиенты