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

.no-spread {

box-shadow: 0 10px 10px;

}

.spread {

box-shadow: 0 10px 10px -10px;

}

А вот эффект от каждой настройки на экране (элемент с установленным значением spread расположен справа).

Значение spread позволяет за счет его указания расширить или сократить тень по всем направлениям. В этом примере отрицательное значение «задвинуло» тень по всем направлениям. Получилось, что мы видим только тень внизу, вместо того чтобы увидеть, как размытие растекается во все стороны (поскольку в противовес размытию работает отрицательное значение параметра spread).

примечание

W3C-спецификацию, касающуюся свойства box-shadow, можно найти по адресу http://www.w3.org/TR/css3-background/.

Градиентные фоны

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

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

Но с применением CSS-градиента background-image все стало намного гибче. Являясь частью спецификации CSS Image Values and Replaced Content Module Level 3 , CSS позволяет создавать линейные и радиальные градиентные фоны. Посмотрим, как их можно определить.

СОВЕТ

Спецификацию CSS Image Values and Replaced Content Module Level 3 можно найти по адресу http://www.w3.org/TR/css3-images/.

Запись линейного градиента

Запись линейного градиента linear-gradient в наипростейшей форме выглядит следующим образом:

.linear-gradient {

background: linear-gradient(red, blue);

}

Она приведет к созданию линейного градиента, начинающегося с красного (градиент по умолчанию начинается сверху) и постепенно переходящего в синий цвет.

Указание направления градиента

Теперь, если нужно указать направление градиента, можно воспользоваться двумя способами. Начинаться градиент всегда будет с направления, противоположного указанному. Но когда направление не указано, он всегда будет распространяться сверху вниз, например:

.linear-gradient {

background: linear-gradient(to top right, red, blue);

}

В данном примере градиент направляется в правый верхний угол. Он начинается с красного цвета в левом нижнем углу и постепенно переходит в синий цвет в правом верхнем углу.

Если вам ближе математические представления, то можете поверить, что градиент допустимо записать в следующей форме:

.linear-gradient {

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

}

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

Полезно будет также знать, что стартовую точку градиентов можно назначать еще до того, как они приобретут видимость внутри блока, например:

.linear-gradient {

background: linear-gradient(red -50%, blue);

}

При такой настройке градиент как таковой начинается до обретения видимости внутри блока.

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

Цветовые опорные точки

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

.linear-gradient {

margin: 1rem;

width: 400px;

height: 200px;

background: linear-gradient(#f90 0, #f90 2%, #555 2%, #eee 50%, #555 98%,

#f90 98%, #f90 100%);

}

Вот каким будет вывод на экран при таком задании значений для свойства linear-gradient..

В данном примере (код которого находится в каталоге example_06-03) направление не указывалось, поэтому было применено исходное направление сверху вниз.

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

совет

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