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

Следует иметь в виду, что с годами сложилось множество различных синтаксисов градиентных фонов, поэтому данная область относится к тем, в которых невероятно трудно записывать альтернативные варианты вручную. Чтобы не рисковать получить эффект испорченной пластинки (если молодежь не знает, что такое пластинка, нужно спросить об этом у родителей), упростите свою жизнь путем использования средства Autoprefixer. Оно позволит записывать код, соответствующий текущему стандарту синтаксиса W3C (как указывалось ранее), и автоматически создавать для вас предыдущие версии.

Спецификацию 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.

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

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

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