Как сделать градиентный фон в css

Установка фона и градиента

Фон оказывает значительное воздействие на дизайн сайта. Он помогает создать впечатляюще выглядящий сайт, установить группирование и определить приоритет, фон также серьёзно влияет на юзабилити сайта.

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

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

Добавление цвета фона

Самый быстрый способ добавить фон к элементу — это установить однотонный фон с помощью свойства background или background-color . Свойство background принимает цвет и изображения в сокращённой форме, в то время как свойство background-color используется строго для установки сплошной фоновой заливки. Оба свойства работают, а какое вы решите использовать зависит от ваших предпочтений, а также ситуации.

При добавлении цвета фона у нас есть несколько вариантов значений, которые мы можем использовать. Подобно другим цветовым значениям мы можем выбрать из ключевых слов, шестнадцатеричных кодов и значений RGB, RGBa, HSL и HSLa. Чаще мы встретим шестнадцатеричные значения, однако можем иногда пожелать задействовать RGBa или значения HSLa для прозрачности.

Прозрачный фон

При использовании значения RGBa или HSLa в качестве прозрачного цвета фона хорошей идеей будет обеспечить также запасной цвет, потому что не все браузеры понимают RGBa или HSLa. И когда браузер встречает значение, которое он не распознаёт, то игнорирует его.

К счастью, есть простой способ обеспечить запасной вариант для фона. CSS каскадирует с верхней части файла до его низа, таким образом, мы можем использовать два свойства background-color в едином наборе правил. Первое свойство background-color будет включать «безопасный» цвет фона в виде шестнадцатеричного значения, а второе свойство background-color будет использовать RGBa или HSLa. При этом, если браузер понимает значение RGBa или HSLa, то отобразит его, а если нет, то вернётся к шестнадцатеричному значению перед ним.

Добавление фонового изображения

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

Значение функции url() будет адресом фоновой картинки и к нему применяются знакомые правила для создания пути гиперссылки. Следите за разными папками и не забудьте показать, где именно находится изображение. Путь помещается внутри скобок и кавычек.

Добавление фонового изображения с одним лишь значением url может выдать нежелательные результаты, так как по умолчанию фоновое изображение будет повторяться по горизонтали и вертикали от левого верхнего угла данного элемента, чтобы заполнить фон элемента целиком. К счастью, мы можем использовать свойства background-repeat и background-position для управления, как именно повторять картинки.

background-repeat

По умолчанию, фоновое изображение будет повторяться бесконечно по вертикали и горизонтали, если не указано иное. Свойство background-repeat может быть использовано чтобы изменить направление, в котором фоновая картинка будет повторяться, если она вообще повторяется.

Свойство background-repeat принимает четыре разных значения: repeat , repeat-x , repeat-y и no-repeat . repeat является значением по умолчанию и повторяет фоновое изображение по вертикали и по горизонтали.

Значение repeat-x повторяет фоновое изображение по горизонтали, в то время как значение repeat-y повторяет его по вертикали. Наконец, значение no-repeat говорит браузеру отобразить картинку один раз, то есть не повторять её вообще.

background-position

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

Свойство background-position требует два значения: горизонтальное смещение (первое значение) и вертикальное смещение (второе значение). Если указано только одно значение, то оно применяется для горизонтального смещения, а вертикальное по умолчанию задаётся как 50%.

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

Чтобы установить значение background-position мы можем использовать ключевые слова top , right , bottom и left , пиксели, проценты или любую единицу размера. Ключевые слова и проценты работают очень похоже. Значение left top идентично процентному значению 0 0, которое располагает изображение в левом верхнем углу элемента. Значение right bottom идентично процентной записи 100% 100% и будет позиционировать изображение в правом нижнем углу элемента.

Фоновые изображения позиционируются от левого верхнего угла элемента

Рис. 7.01. Фоновые изображения позиционируются от левого верхнего угла элемента

Одним из преимуществ процентов по сравнению с ключевыми словами является возможность центрирования фонового изображения с помощью значения 50%. Для размещения фонового изображения в верхней части элемента, мы можем использовать значение 50% 0. Применение пикселей в качестве значения background-position также распространено, так как пиксели дают нам точный контроль над положением фона.

Значения background

Свойства background-color , background-image , background-position и background-repeat могут выступать значением для единичного свойства background . Порядок этих свойств в background может варьироваться, но обычно он такой: background-color , background-image , background-position , а затем background-repeat .

Пример фонового изображения

В следующем примере мы будем использовать свойство background , которое включает значения background-color , background-image , background-position и background-repeat .

Пожалуйста, обратите внимание, что в background-position содержится относительное и абсолютное значение. Первое значение, 20 пикселей — это горизонтальная величина, позиционирование background-image на 20 пикселей от левого края элемента. Второе значение, 50% — это вертикальная величина, которая центрирует фоновое изображение по вертикали.

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

Демонстрация фоновой картинки

На практике

Возвращаясь к нашему сайту Styles Conference, давайте добавим немного фонового цвета. Пока мы это делаем, изменим несколько других стилей, чтобы заставить все наши стили работать совместно и сохранить всё наше содержание разборчивыми.

Начнём с большого шага и применим синий фон к элементу <body> наряду с имеющимися свойствами color и font . Все стилевые правила для элемента <body> , установленные на данный момент, включают следующее:

Мы поместили синий фон для элемента <body> намеренно, так как наш сайт будет содержать несколько разных рядов background , а наиболее частым цветом фона будет синий.

Теперь, когда каждая страница на нашем сайте Styles Conference включает в себя синий фон, давайте очистим несколько областей с этим синим фоном. В частности, наши элементы <header> и <footer> останутся синими, как и раздел hero на главной странице.

Внутри элементов <header> и <footer> укажем цвет ссылок белым, а затем при наведении на них курсора мыши тем же зелёным, что и заголовки.

Начнём с элемента <header> . Чтобы выбрать все элементы <a> внутри элемента <header> мы добавим класс primary-header к <header> (в дополнение к существующим классам container и group ). Не забывайте, мы должны добавить этот класс к элементам <header> во всех наших страницах.

С классом primary-header у элемента <header> и существующим классом primary-footer у <footer> мы можем добавить два новых правила ниже раздела со ссылками в нашем файле main.css.

Первый набор правил будет выбирать все элементы <a> внутри элемента с классом primary-header или primary-footer и установит их цвет на белый, как это определено запятой, разделяющей два отдельных селектора, у которых одно и то же свойство и значение. Второй набор правил будет выбирать те же элементы <a> что и раньше, но поменяет их цвет на зелёный, когда пользователь наводит на них указатель.

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

Также в разделе hero нашей главной страницы уберём некоторые стили кнопок. Начнём с добавления нескольких новых свойств для набора правил с классом btn , в разделе с кнопками нашего файла main.css.

В частности, заменим цвет текста кнопки на белый, зададим cursor как pointer , увеличим font-weight , добавим небольшое расстояние в letter-spacing и изменим text-transform на uppercase .

В целом, наш новый набор правил для класса btn должен выглядеть следующим образом:

Мы также очистим некоторые стили запасных кнопок путём установки класса btn-alt . В частности, сделаем рамку у кнопки белой и добавим стиль для :hover , который включает белый фон и синий цвет текста.

Со всеми дополнениями наш новый класс btn-alt должен выглядеть следующим образом:

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

В этом новом классе row добавим белый фон, минимальную ширину 960 пикселей (чтобы убедиться, что row всегда больше, чем width у элементов container или grid ) и padding по вертикали. В общей сложности наш новый раздел в нашем файле main.css должен выглядеть следующим образом:

С этим классом row добавим полосу с белым фоном на главной странице. Мы сделаем это для разделов с тизерами. В настоящее время эта область содержит элемент <section> с классом grid который обёртывает три дополнительных <section> с классами teaser и col-1-3 .

Чтобы добавить белый background к этому разделу, мы собираемся обернуть все эти элементы в элемент с классом row .

Поскольку мы хотим обернуть разделы со всеми тизерами элементом <section> , то собираемся добавить новый элемент <section> с классом row , который окружает существующий <section> с классом grid .

Наличие двух элементов <section> которые оборачивают одно содержимое снижает семантическое влияние. Чтобы исправить это, мы изменим второй элемент <section> с классом grid на элемент <div> . В конце концов, данный элемент только добавляет стили, а не смысловое значение, поэтому подходит элемент <div> .

Структура наших тизеров должна выглядеть следующим образом:

Удивительно, как несколько фоновых цветов могут влиять на дизайн веб-сайта. Наш сайт Styles Conference становится всё краше и главная страница тому доказательство.

Главная страница сайта Styles Conference после добавления нескольких цветов фона

Рис. 7.02. Главная страница сайта Styles Conference после добавления нескольких цветов фона

Дизайн градиентного фона

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

В CSS градиентные фоны рассматриваются как фоновые изображения. Мы можем создать градиент с помощью свойства background или background-image , как обычную фоновую картинку. Значение свойства для градиента меняется в зависимости от того, какой градиент нам бы хотелось — линейный или радиальный.

Вендорные префиксы для градиента

В уроке 4, «Открываем блочную модель», мы обсуждали добавление вендорных префиксов к новым свойствам или значениям CSS, так что браузеры могут поддерживать недавно разработанные возможности CSS. Градиенты были одними из значений, которые требовали использование префиксов. К счастью, для большинства браузеров отпала необходимость в префиксах для отображения градиентов, тем не менее, всё равно стоит указать префиксы для обеспечения лучшей поддержки.

Сперва мы начнём обсуждать линейные градиенты и включим различные префиксы. После этого в интересах краткости мы опустим префиксы, когда продолжим обсуждать градиенты, в том числе радиальные.

Линейный градиент

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

Демонстрация линейного градиента

Линейные градиенты определяются с помощью функции linear-gradient() в свойстве background или background-image . Функция linear-gradient() должна включать в себя два значения цвета, первое из которых будет начальным цветов, а второе конечным цветом. Браузер затем обработает переход между двумя цветами.

Перед определением любого градиентного фона мы также вставим свойство background по умолчанию с однотонным цветом. Такой цвет должен быть использован в качестве запасного, если браузер не поддерживает градиент.

Смена направления градиента

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

Например, если мы хотим, чтобы градиент в элементе двигался слева направо, мы можем использовать значение to right для указания направления, в котором линейный градиент должен продвигаться. Ключевые слова также могут быть объединены. Если мы хотим, чтобы градиент переходил от левой верхней до правой нижней части элемента, мы можем использовать значение ключевого слова to right bottom .

Демонстрация направления линейного градиента

Когда мы применяем диагональный градиент в не совсем квадратном элементе, градиент не переходит напрямую из одного угла в другой. Вместо этого градиент определит абсолютный центр элемента, поместит опорные точки в противоположных углах, откуда он должен продвигаться и только затем двинется в направлении угла, заданном в значении. Эти углы, которые перемещает градиент, называются «волшебные уголки», так как они не являются абсолютными. Эрик Мейер проделал замечательную работу с изложением этого синтаксиса в своей статье Linear Gradient Keywords.

Кроме ключевых слов также допускаются углы. Если мы хотим, чтобы наш градиент двигался к левой верхней части элемента мы можем использовать значение угла 315deg, также если мы хотим, чтобы наш градиент двигался к правой нижней части элемента, мы можем использовать значение 135deg. Этот же подход может быть применён для любого значения угла, от 0 до 360º.

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

В то время как линейный градиент идеально подходит для градиентного перехода от одного направления к другому, часто возникает необходимость в радиальном градиенте. Радиальные градиенты работают так же, как линейные и повторяют большинство из тех же значений. Для радиальных градиентов вместо функции linear-gradient() в свойстве background или background-image мы будем использовать функцию radial-gradient() .

Демонстрация радиального градиента

Радиальные градиенты работают изнутри наружу элемента. Таким образом, первый цвет заданный в функции radial-gradient() будет располагаться в абсолютном центре элемента, а второй цвет будет находиться на внешней стороне элемента. Браузер затем создаст переход между этими двумя цветами.

Одним из основных отличий между радиальными и линейными градиентами является то, что радиальные градиенты могут быть достаточно сложными, со значениями положения, размером, радиусом и так далее. Мы рассмотрим основы, но, пожалуйста, не стесняйтесь углубиться в радиальные градиенты, так как они гораздо более мощные, чем изложено здесь.

Генератор градиентов CSS3

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

Стоп-цвета

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

Демонстрация стоп-цветов в градиенте

По умолчанию браузер будет позиционировать каждый стоп-цвет на равном расстоянии от следующего и переходить между ними соответственно. Если требуется больше контроля над тем, как желательно расположить цвета, то их места в градиенте могут быть определены для каждого цвета. Место должно быть объявлено как значение размера и идёт после значения цвета.

Позиционирование стоп-цветов в градиенте

Если не указано иное, то первый цвет будет позиционироваться на 0%, а последний цвет на 100%.

Пример градиента

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

Для этого мы включим два свойства background . Первое свойство background определяет шестнадцатеричное значение однотонного цвета, который служит в качестве запасного варианта на случай, если браузер не поддерживает линейные градиенты. Второе свойство background включает в себя функцию linear-gradient() , которая задаёт зелёный градиент, который переходит от верхней части элемента к его нижней части.

Демонстрация градиентного фона

На практике

С имеющимся набором градиентов давайте создадим новую полосу для нашего сайта Styles Conference, на этот раз с помощью градиента.

Мы сделаем новую полосу с градиентом с помощью класса row-alt . Поскольку для новой полосы задано то же свойство и значение min-width что и для класса row , мы объединим эти два селектора.

Далее мы хотим создать новый набор правил и применить стили специально к классу row-alt . Эти новые стили будет включать в себя градиентный background , который начинается с зелёного цвета и переходит к жёлтому, слева направо.

Используя функцию linear-gradient() с соответствующими значениями и вендорными префиксами, мы добавим градиентный background для класса row-alt . Также включим один background перед градиентным background как запасной вариант, на тот случай, если браузер не поддерживает градиенты.

Наконец, мы также добавим и некоторый вертикальный padding . Наш обновлённый раздел теперь выглядит следующим образом:

Стили row-alt на месте, давайте воспользуемся ими на всех наших внутренних страницах. В данный момент все они содержат элемент <section> с классом container . Затем, внутри каждого <section> есть элемент <h1> , содержащий заголовок страницы.

Мы собираемся изменять эти элементы <section> так же, как мы сделали раздел с тизером на главной странице. Мы обернём каждый элемент <section> с классом container элементом <section> с классом row-alt . Затем изменим каждый элемент <section> с классом container на элемент <div> для лучшего соответствия семантики.

Каждая из наших внутренних страниц должна теперь включать в себя следующее:

Раз мы обновляем наши внутренние страницы, давайте сделаем у них вступление чуть более привлекательным. Начнём с добавления вступления на каждой странице немного ниже <h1> в каждом элементе <section> с классом row-alt . Наша страница speakers.html, к примеру, теперь может включать следующий раздел:

Дополнительно со вставкой абзаца также изменим некоторые стили в разделе со вступлением. Чтобы сделать это, мы добавим класс lead к элементу <div> , который уже содержит класс container . Он может быть найден внутри элемента <section> с классом row-alt . Наше вступление для каждой внутренней страницы теперь будет выглядеть так:

После того, как класс lead находится на своём месте, мы выровняем по центру весь текст внутри этих элементов <div> . Также увеличим font-size и line-height у всех абзацев в этих <div> .

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

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

Страница Спикеры сайта Styles Conference, в комплекте с градиентом

Рис. 7.03. Страница Спикеры сайта Styles Conference, в комплекте с градиентом

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Использование нескольких фоновых изображений

Долгое время к элементам разрешалось добавлять только одно фоновое изображение за раз, что создавало немало трудностей при дизайне страниц. К счастью, в CSS3 мы можем использовать более одного фонового изображения для элемента, разделяя запятыми несколько фонов в свойстве background или background-image .

Фоновое изображение идущее первым будет на переднем плане, а последнее в списке фоновое изображение будет на заднем плане. Любое значение между первым и последним будет, соответственно, располагаться посередине между ними. Вот пример CSS для элемента <div> , который использует три фоновых изображения:

Данный код использует сокращённое значение для свойства background , связывая несколько фоновых картинок вместе. Эти сокращённые значения также могут быть разбиты по свойствам background-image , background-position и background-repeat со значениями, разделёнными запятыми.

Пример нескольких фоновых изображений

Давайте ещё раз вернёмся к сообщению об успехе, чтобы объединить фоновую картинку галочки с градиентом.

Чтобы сделать это, мы включим два значения во второе свойство background . Первое значение будет картинкой галочки на переднем плане. Второе значение будет линейным градиентом на заднем плане. Эти два значения разделяются запятой.

Демонстрация нескольких фоновых изображений

Изучаем новые свойства фона

Наряду с градиентами и несколькими фоновыми изображениями, CSS3 представил три новых свойства: background-size , background-clip и background-origin .

Свойство background-size позволяет изменить размер фонового изображения, в то время как свойства background-clip и background-origin позволяют контролировать, как фоновое изображение обрезается и где фоновое изображение располагается в элементе (внутри border или внутри padding , например).

background-size

Свойство background-size позволяет указать размер фонового изображения. Это свойство принимает несколько значений, в том числе размер и ключевые слова.

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

Следовательно, свойство background-size с шириной 100% установит, что фоновое изображение занимает всю ширину элемента. Если второе значение не определено после ширины, то значение высоты будет задано автоматически, чтобы сохранить пропорции фонового изображения.

Ключевое слово auto может быть задействовано в качестве значения ширины или высоты, чтобы сохранить пропорции фонового изображения. Так, если мы хотим установить высоту фоновой картинки на 75% от высоты элемента при сохранении её пропорций, то можем задать значение background-size как auto 75% .

Демонстрация background-size

Ключевые слова cover и contain

В дополнение к размерам свойство background-size также допускает ключевые слова cover и contain .

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

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

Значения cover и contain могут привести к небольшим искажениям фоновых изображений, особенно, когда картинка растягивается за пределами своих исходных размеров. Мы должны следить за этим при использовании данных значений и убедиться, что стили в результате являются подходящими.

background-clip и background-origin

Свойство background-clip определяет площадь поверхности, которую охватывает фоновое изображение, а свойство background-origin определяет, откуда должно начинаться background-position . Внедрение этих двух новых свойств связано с внедрением трёх новых значений: border-box , padding-box и content-box . Каждое из этих трёх значений может быть использовано для свойств background-clip и background-origin .

Значение свойства background-clip по умолчанию устанавливается как border-box , что позволяет фоновому изображению расширяться в область границ. Между тем, свойство background-origin по умолчанию устанавливается как padding-box , что позволяет фоновому изображению начинаться там же, где и padding у элемента.

Значение border-box расширяет фон до границ элемента

Рис. 7.04. Значение border-box расширяет фон до границ элемента

Рис. 7.05. Значение padding-box расширяет фон до padding у элемента, но фон при этом находится внутри границ

Рис. 7.06. Значение content-box содержит фон внутри padding и border у элемента

Мы уже обсуждали значения этих ключевых слов, когда рассматривали свойство box-sizing в уроке 4, «Открываем блочную модель». Смысл самих значений не изменился, но их функции меняются при использовании разных свойств фона.

Резюме

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

Кратко, в этом уроке мы рассмотрели следующее:

  • как добавить цвет фона и фоновое изображение к элементам;
  • линейные и радиальные градиенты и их настройка;
  • как задать несколько фоновых изображений для одного элемента;
  • новые свойства CSS3, которые позволяют менять размер, площадь поверхности и область позиционирования фоновых изображений

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

Градиенты CSS

Градиенты CSS

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

Градиенты обычно состоят из одного цвета, переходящего в другой, но в CSS можно контролировать каждый аспект этого процесса, от его направления до цветов (сколько угодно много) до того, где будет происходить изменение этих цветов. Давайте все из них рассмотрим.

Градиенты – это фоновое изображение

Тогда как объявления сплошного цвета использует свойство background-color в CSS, градиенты применяют background-image. Оно очень удобно по нескольким причинам, которые мы объясним позже. Условно обозначаемое свойство background поймет, что вы имеете в виду, если заявить из них что-то одно.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Линейный градиент

Возможно, самый привычный и нужный вид градиента &#8212; linear-gradient(). Ось координат может идти слева направо, сверху вниз или под любым выбранным вами углом. Если не заявлять угол, то будет подразумеваться сверху вниз:

Разделенные запятыми цвета отображают обычно применяемый вами цвет: Hex, именованные цвета, rgba, hsla и т.д. Чтобы сделать градиент слева направо, передайте дополнительный параметр в начале функции linear-gradient(), начинающейся со слова to, означающем направление, например to right:

Синтаксис to также работает для углов. Например, если вам нужна ось градиента, начинающаяся с нижнего левого угла и идущая в верхний правый угол, можно сказать to top right:

Если бы блок был квадратным, то угол такого градиента стал бы 45°, но это не так. Если нужно гарантировать 45°, можно это заявить:

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

Также можно заявить, где должен начинаться любой из отдельных цветов. Это называется «цветовыми остановами». Скажем, если вам нужно, чтобы желтый занимал больше всего места, а красный – совсем немного в самом начале, можно сделать color-stop желтого цвета довольно рано:

Мы склонный считать градиенты исчезающими цветами, но если у вас есть два одинаковых цветовых стопа, можно сделать немедленную смену одного плотного цвета другим плотным цветом. Это может пригодиться при заявлении фона в полную высоту, имитирующего колонки.

Браузерная поддержка/Префиксы

До сих пор мы рассматривали только новый синтаксис, но градиенты CSS уже довольно долго побыли в употреблении. У них хорошая браузерная поддержка. Ненадежными они становятся в синтаксисе и с префиксами. Браузеры поддерживают три разных синтаксиса. Официально они так не называются, но можете называть их:

Старый: исходный способ, применимый исключительно к WebKit, с такими штуками, как from() и color-stop()

Подростковый: старая система углов, например, left

Молодой: свежеиспеченная система углов, например, to right

А также префиксы. Давайте составим список:

Chrome

1-9: Старый, с префиксом

10-25: Подростковый, с префиксом

26: Молодой, без префикса

Safari

3-: Поддержка отсутствует

4-5.0: Старый, с префиксом

6.1: Молодой, без префикса

Firefox

3.5-: Поддержка отсутствует

3.6-15: Подростковый, с префиксом

16: Молодой, без префикса

Opera

11.0-: Поддержка отсутствует

11.1-11.5: Подростковый, с префиксом, только линейный

11.6-12: Подростковый, с префиксом, добавлен радиальный

12.1: Подростковый, без префикса

15: Молодой, без префикса

IE

8-: Поддержка отсутствует

9: Только фильтры

10+: Молодой, без префикса (также поддерживается Подростковый с префиксом)

Android

2.0-: Поддержка отсутствует

2.1-3.0: Подростковый, с префиксом

4.0-4.3: Молодой, с префиксом

4.4+: Молодой, без префикса

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

iOS

3-: Поддержка отсутствует

3.2-4.3: Подростковый, с префиксом

5.0-6.1: Молодой, с префиксом

7.0: Молодой, без префикса

Здесь имеется небольшое наложение. Например, когда браузер поддерживает «молодой» синтаксис, он, возможно, также поддерживает более старые синтаксисы, включающие префикс. Лучше всего поступать так: если поддерживается «молодой», то его и применяйте. Так что, если вам нужна абсолютная глубочайшая браузерная поддержка, линейный градиент будет выглядеть примерно так:

Тут ужасно много кода. Писать его вручную – это возможные ошибки и большое количество труда. Справиться с ним помогает Autoprefixer, позволяющий отрезать фрагменты кода, когда вы решите, какие браузеры будете поддерживать. Примесь-миксин Compass умеет делать URI данных SVG для IE 9, если вам это важно.

Фильтры IE

Internet Explorer (IE) 6-9, хотя и не поддерживает синтаксис градиентов CSS, предлагает программный метод создания фоновых градиентов

Вот некоторые рассуждения на тему, применять их или нет:

filter обычно считается плохим для производительности,

background-image отменяет фильтр, поэтому если вам нужно применить его для альтернативного варианта, фильтры останутся за бортом. Если в качестве альтернативы подходит плотный цвет (background-color), можно применить фильтр

Даже хотя фильтры работают только со значениями hex, все равно можно получить alpha-прозрачность, поставив префикс к значению hex с количеством прозрачности от 00 (0%) до FF (100%). Пример:

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

Радиальные градиенты отличаются от линейных тем, что начинаются в одной точке и «исходят» наружу. Градиенты часто используют для имитации освещения, которое, как мы знаем, не всегда прямое, поэтому ими можно пользоваться для того, чтобы сделать градиент еще натуральнее.

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

Видно, как этот градиент создает фигуру-эллипс, так как элемент не квадратный. Это градиент по умолчанию (с ellipse в качестве первого параметра), но если мы скажем, что хотим окружность, то можем ее сделать:

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

Здесь возможны значения: closest-corner, closest-side, farthest-corner, farthest-side. О них можно думать так: «Мне нужно, чтобы этот радиальный градиент затухал от центральной точки до __________, приспосабливался и заполнял все вокруг».

Радиальному градиенту также не нужно по умолчанию начинаться в центре, вы можете назначить определенную точку, использовав at ______ в качестве первого параметра, как здесь:

Я проясню здесь все, приведя пример квадрата и регулировки цветового останова:

Браузерная поддержка

В основном такая же, как у linear-gradient(), за исключением того, что, когда начиналась поддержка градиентов, в очень старой версии Opera были только линейные, а не радиальные. Как и линейный, radial-gradient() претерпел некоторые изменения синтаксиса. И опять здесь: «Старый», «Подростковый» и «Молодой».

Старый: с префиксом -webkit-, штуки вроде from() и color-stop()

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

Молодой: многословный первый параметр, типа circle closest-corner at top right

И снова я позволил бы справляться с этим Autoprefixer. Вы пишете в новейшем синтаксисе, он делает альтернативные варианты. Радиальные градиенты более заумные, чем линейные, поэтому я советую удовлетвориться новейшим синтаксисом и продолжить работу с ним (и, если нужно, забудьте все, что знаете о старых синтаксисах).

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

У повторных градиентов ненамного меньшая браузерная поддержка. У них есть как линейные, так и радиальные разновидности.

Применительно к неповторным градиентам существует способ их создания так, чтобы тот был крошечным прямоугольником, и при выравнивании с прочими крошечными прямоугольными версиями самого себя создавал повторяющийся узор. Поэтому сначала сделайте такой градиент и установите background-size, чтобы получился такой маленький прямоугольник. Теперь легко создаются полоски, которые затем можно вращать и делать все, что угодно.

Пользуясь repeating-linear-gradient(), не приходится прибегать к подобным хитростям. Размер градиента определяется последним цветовым стопом. Если он происходит на 20px, то размер градиента (который затем повторяется) – это квадрат 20px на 20px.

Градиент на базе CSS: старые решения и новые возможности

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

градиент на базе css

В первую очередь необходимо разобраться с понятием градиента. Что же это такое?

Градиент – особый фон который состоит из двух и более цветов или оттенков, переход которых от одного к другому осуществляется плавно.

Технически градиент определяется двумя основными точками, для которых четко определяется цвет и прозрачность. Цвета промежуточных точек между ключевыми определяются математическими приемами.

Градиент делится на несколько разновидностей:

  1. Линейный – градиентный переход цветов осуществляется вдоль прямой линии.
  2. Круговой – цветовые преобразования осуществляется по кругу, от центра до дальних точек.
  3. Угловой – переход осуществляется по периметру окружности.
  4. Отраженный – является комплексом линейного градиента и зеркального отображения.
  5. Алмазный – эффект свечения драгоценного камня.

Ниже представлены примеры градиентов. Номер на рисунке соответствует номеру типа в списке выше.

Виды градиента

Как выглядит градиент на сайте?

Очень часто градиент применяется в меню или кнопках. Это придает эффект объемности и формирует особый стиль, который можно увидеть на примере ниже

Градиентное меню

А вот на этой картинке видно, каким образом применяют градиент в блоках. В данном случае это футер

Градиентный футер

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

Отцовский метод: градиент на CSS + картинка

В те времена, когда верстальщики могли положиться только на CSS2, градиент устанавливался по следующему принципу

  1. Создается картинка шириной в 1 пиксель (или высотой – это зависит от направления градиента), которая представляет из себя образец требуемого градиента.
  2. Размножаем картинку по требуемой оси.

Ниже показано, как это прописывается в файле CSS:

В этой записи цвет фона, записанного в background, должен совпадать с цветом последнего пикселя картинки. Был рассмотрен вариант, когда градиент позиционируется вверху. Теперь рассмотрим, как его позиционировать внизу:

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

Градиент на css2

Также стоит отметить, что если градиент направлен не вдоль вертикальной оси, а горизонтальной, то repeat-x нужно заменить на repeat-y.

Кроме того, хотелось бы отметить положительные стороны этого метода:

  • легкость использования и минимальная запись в коде в виде одной команды;
  • высокий показатель кроссбраузерности.

Не стоит забывать, что не существует идеальных решений, у каждого есть свои недостатки:

  • фоновая картинка, которая представляет дополнительную нагрузку на сервер, не смотря на то, что ее размер максимально минимизирован;
  • в дополнение к первому недостатку, до загрузки фонового изображения пользователь будет видеть блок со сплошной окраской;
  • таким способом можно реализовать только линейный градиент, для других разновидностей нужно будет создавать большие картинки на весь фон, так как для них нельзя будет применить цикличность (repeat);

Напоследок необходимо отметить еще одну особенность метода. При изменении высоты блока картинка не будет масштабировать, поэтому верх или низ блока будет залит сплошным цветом.

Продвинутый метод: градиент только на CSS

С выходом новой спецификации CSS3 появились новые функции, посредством которых можно устанавливать градиентный фон блока. Первая функция — linear-gradient();, которая формирует линейный градиент, и вторая — radial-gradient();, которая отвечает за радиальный градиент. Этот тандем позволит создавать любой существующий вид градиента. Также стоит отметить широкий спектр возможностей функций, в который входит возможность установки многоцветного градиента, а также устанавливать свое местоположение через background-position. Ниже в таблицах представлен полный потенциал возможностей этих функций

Перечень параметров функции linear-gradient()
Параметр Краткое пояснение Пример использования
bg-position Определяет местоположение начала градиента. Изначально градиент фиксируется в верхнем левом углу контейнера .grad
angle Определяет угол распространения градиента. Если значение этого параметра не выставлено, то угол составляет 0deg. .grad
color-stop Устанавливает цвет основных точек, между которыми производится цветовой переход. Обязательный параметр для указания. Допускается применить 2 значения и более. .grad
Перечень параметров функции radial-gradient()
Параметр Краткое пояснение Пример использования
bg-position Устанавливает центр градиента относительно периметра блока. Изначально системой выбирается положение center center. .grad
angle Определяет угол распространения градиента. Если значение этого параметра не выставлено, то угол составляет 0deg. .grad
shape Определяет форму распространения градиента. Доступны два возможных варианта — круглая (по умолчанию) и эллиптическая. .grad
size Определяет местоположение начала градиента. не считая пиксельных значений, допускается использовать такие команды: closest-side (contain) — ближайшая граница контейнера, closest-corner — ближайший угол контейнера, farthest-side — дальнейшая граница контейнера, farthest-corner(cover) — дальнейший угол. .grad
color-stop Устанавливает цвет основных точек, между которыми производится цветовой переход. Обязательный параметр для указания. Допускается применить 2 значения и более. .grad

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

Поддержка браузерами

Mozzila Firefox

С 2010 года разработчики «огненной лисички» выпустили новую версию браузера Firefox 3.6., которая освоила применение вендорных свойств -moz-linear-gradient() и -moz-radial-gradient(). Эти свойства позволили производить линейные и радиальные градиенты соответственно.

Эти функции по своему назначению и функционалу полностью соответствуют оригиналу. Ниже представлена правильная запись свойства для таблицы стилей:

Важно помнить, что указанный код корректно отработает только в версиях, которые вышли не раньше, чем Firefox 3.6.

Chrome и Safari

Браузеры на движке webkit тоже выпустили свои вендоры для оптимизации работы своих продуктов с градиентами. Таким образом, Safari может работать с градиентами после выхода версии 4.0, а Chrome – с версии 2.0. смотрим пример кода ниже:

Интересен тот факт, что последние версии Chrome легко распознают свойства, написанные по синтаксису Firefox:

Вторая характерная особенность браузеров webkit заключается в возможности установки радиального повторяющегося градиента. Чтобы понять, как это сделать – просто опустите глаза ниже:

Internet Explorer

Наш самый переборчивый ветеран среди браузеров — Internet Explorer работает с градиентами только через посредничество специальных фильтров. Эти фильтры стали доступны для IE после версии 5.5. «Какой фильтр?» – спросите вы. «А вот такой», — отвечу я, указывая на строку, пониже этой

Эта запись соответствует только линейному не повторяющемуся градиенту. Направление перехода цветов определяются следующими командами:

  • GradientType=1 – вдоль горизонтальной оси.
  • GradientType=0 – вдоль вертикальной оси.

С выходом в свет версии 8.0 IE стал поддерживать еще одну запись градиентного фона:

Однако первоначальная форма записи новыми версиями тоже отлично распознается.

Также не стоит забывать про плагин PIE. Он оптимизирует работу самых проблемных версий IE – от 6.0 до 8.0.

Opera

Этот браузер дольше всего сопротивлялся применению градиента в своей среде. Однако с выходом версии 11.1 поддался влиянию большинства своих коллег. С этого момента браузер может работать с вендорными свойствами -o-linear-gradient и -o-repeating-linear-gradient для применения в background:

Преимущества и недостатки применения нового метода

В качестве сильных сторон новых функций спецификаций CSS3 отметим следующее:

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

Единственный недостаток этого свойства – кроссбраузерность. Именно из-за низкого показателя этого параметра одна строчка кода превращается, как минимум, в 4, чтобы каждому браузеру разъяснить, как работать с градиентом и как его корректно вывести на странице.

Исключительным и принципиальным отличием продвинутого способа от отцовского метода заключается в резиновых свойствах первого. Другими словами, если блок будет растягиваться по высоте, то градиент автоматически растянется вместе с ним. Для случая использования картинки – это непозволительная роскошь.

Выводы

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

Добавить комментарий

Ваш адрес email не будет опубликован.