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-градиент на основе градиентных значений в существующем изображении? Возможно, именно этот аргумент станет для вас решающим.
Повторяющиеся градиенты
CSS3 также дает нам возможность создавать повторяющиеся градиентные фоны. Посмотрим, как это делается:
.repeating-radial-gradient {
background: repeating-radial-gradient(black 0px, orange 5px, red 10px);
}
А вот как это выглядит на экране (чтобы не начало тошнить, долго на это смотреть не стоит).
Сначала нужно для linear-gradient или radial-gradient указать префикс repeating, после чего использовать тот же синтаксис, что и для обычного градиента. Здесь между черным, оранжевым и красным цветом (0, 5 и 10 пикселов соответственно) я использовал пиксельную дистанцию, но вы можете задать значения и в процентах. Для получения наилучших результатов рекомендуется использовать внутри градиента одинаковые единицы измерений (например, пикселы или проценты).
примечание
Информацию от W3C, касающуюся повторяющихся градиентов, можно получить по адресу http://www.w3.org/TR/css3-images/.
Хочу поделиться с вами еще одним способом использования градиентных фонов.
Узоры из градиентных фонов
В своих конструкциях я часто использовал едва заметные линейные градиенты и считал, что радиальные и повторяющиеся градиенты менее практичны. Но умные люди уже воспользовались эффективностью градиентов для создания узоров из градиентных фонов. Рассмотрим примеры из CSS Ninja — коллекции фоновых узоров CSS, принадлежащей Лиа Веру (Lea Verou) и доступной на сайте http://lea.verou.me/css3patterns/:
.carbon-fibre {
margin: 1rem;
width: 400px;
height: 200px;
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#2 82828;
background-size:16px 16px;
}
После запуска кода в браузере на экране будет виден эффект фона carbon-fibre.
Понравилось? Всего лишь несколько строк кода CSS3, и у нас есть легко редактируемый адаптивный и масштабируемый фоновый узор.
совет
Чтобы разобраться в работе того или иного правила, попробуйте добавить в конце правила background-repeat: no-repeat.
Как всегда, благодаря медиазапросам для различных адаптивных сценариев могут использоваться разные объявления. Например, притом что в менее широких окнах просмотра вполне успешно могут работать градиентные узоры, для более крупных окон может быть лучше выводить простой фон:
@media (min-width: 45rem) {
.carbon-fibre {
background: #333;
}
}
Этот пример можно увидеть, запустив файл из каталога example_06-05.
Использование нескольких фоновых изображений
Хотя теперь это немного и вышло из моды, раньше было весьма распространено требование к конструкции, заключавшееся в создании страницы, у которой верхнее фоновое изображение отличалось от нижнего. Или же в использовании различных фоновых изображений для верхнего и нижнего разделов внутри страницы. В прежние времена при использовании CSS 2.1 для получения этого эффекта обычно требовалась дополнительная разметка (один элемент нужен был для фона заголовка, а другой — для фона подвала).
Используя CSS3, в одном элементе можно накладывать друг на друга любое количество изображений.
Синтаксис имеет следующий вид:
.bg {
background:
url('../img/1.png'),
url('../img/2.png'),
url('../img/3.png');
}
Как и при накладывании друг на друга нескольких теней, изображение, стоящее в перечне первым, станет на экране браузера верхним. Если нужно, в том же самом объявлении можно добавить общий цвет фона:
.bg {
background:
url('../img/1.png'),
url('../img/2.png'),
url('../img/3.png') left bottom, black;
}
Цвет следует указать последним, и тогда он будет показан под всеми изображениями, заданными выше его.
совет
При указании нескольких фоновых элементов вам не нужно выстраивать ссылки на различные изображения на разных строчках одну под другой, я это сделал исключительно из соображений улучшения читаемости кода.
Браузеры, не понимающие правила нескольких фонов (например, Internet Explorer 8 и более ранние версии), будут игнорировать все правило целиком, поэтому может потребоваться объявить свойство обычного фона непосредственно перед CSS3-правилом, касающимся нескольких фонов, в качестве альтернативного варианта для безнадежно устаревших браузеров.
