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

Градиент

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

Для создания градиентов используется функция градиента — linear-gradient() или radial-gradient() , которая применяется к свойству background или background-color .

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

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

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

Линейный градиент создается с помощью функции linear-gradient() . Равномерное распределение цветов градиента создается следующим способом:

Направление градиента можно задавать также с помощью угла наклона (deg), например:

Для неравномерного распределения цветов нужно указать позицию начала каждого цвета через точки остановки градиента (color stops).

Точки остановки градиентов указываются в %, где 0% — начало градиента, 100% — окончание градиента, например:

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

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

Радиальный градиент создается с помощью функции radial-gradient() . По умолчанию форма градиента — круг, центр градиента совпадает с центром блока.

Градиенту можно придать форму эллипса, изменяя пару значений, идущих после формы градиента, заданных в % или px, например background: radial-gradient(55% 65%, blue, green, yellow) . Первое значение задает размер по оси Х, второе — по оси Y.

Также можно менять положение градиента с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).

Значение Описание
closest-side Размер градиента рассчитывается из расстояния до любой ближней стороны блока (для circle ) или до ближних сторон по X и по У (для ellipse ).
farthest-side Размер рассчитывается из расстояния до дальних сторон.
closest-corner Размер рассчитывается из расстояния до ближних углов.
farthest-corner Размер рассчитывается из расстояния до дальних углов.

3. Повтор градиента

Повтор градиента задается с помощью двух функций: repeating-linear-gradient() и repeating-radial-gradient()

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

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

Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство background-image или универсальное свойство background , как показано в примере 1.

Пример 1. Градиент

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Линейный градиент для абзаца

Рис. 1. Линейный градиент для абзаца

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

Синтаксис linear-gradient

Для записи позиции вначале пишется to , а затем добавляются ключевые слова top , bottom и left , right , а также их сочетания. Порядок слов не важен, можно написать to left top или to top left . В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #000 и #fff, по другому от чёрного к белому.

Табл. 1. Типы градиента
Позиция Угол Описание Вид
to top 0deg Снизу вверх.
to left 270deg Справа налево.
to bottom 180deg Сверху вниз.
to right 90deg Слева направо.
to top left От правого нижнего угла к левому верхнему.
to top right От левого нижнего угла к правому верхнему.
to bottom left От правого верхнего угла к левому нижнему.
to bottom right От левого верхнего угла к правому нижнему.

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

Синтаксис linear-gradient

Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке. Отсчёт угла наклона градиентной линии показан ниже.

Угол

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

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

Пример 2. Полупрозрачные цвета

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Градиент с полупрозрачными цветами

Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию. В примере 3 показано создание градиентной кнопки, в которой положение второго цвета из трёх задано как 36%.

Пример 3. Градиентная кнопка

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера показан на рис. 3.

Градиентная кнопка

Рис. 3. Градиентная кнопка

За счёт задания положения цвета можно получить резкие переходы между цветами, что в итоге даёт набор однотонных полосок. Так, для двух цветов надо указать четыре цвета, первые два цвета одинаковы и начинаются от 0% до 50%, оставшиеся цвета также одинаковы меж собой и продолжаются от 50% до 100%. В примере 4 полоски добавляются в качестве фона веб-страницы. Из-за того, что крайние значения подставляются автоматически их можно не указывать, так что достаточно написать всего-лишь два цвета.

Пример 4. Однотонные полоски

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера показан на рис. 4. Обратите внимание, что один из цветов градиента задан прозрачным, поэтому он меняется косвенно через цвет фона веб-страницы.

CSS gradient генератор

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

Для того, чтобы задать градиент используется свойство background-image или сокращенный вариант background-image . И мы можем создать как линейный так и радиальный градиент, прописав значения либо linear-gradient, либо radial-gradient и указав начальный и конечный цвета. Вот пример синтаксиса:

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

Если заменить этот параметр на to top right вы получите диагональный градиент. Такой же эффект можно создать, указав параметр в градусах, например, 45deg .

Вы можете использовать больше чем 2 цвета, и цвета можно записать в том числе и по названию.

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

Если мы хотим, чтобы один цвет занимал больше места, чем другой, можно добавить значение в процентах непосредственно после цвета. Потренируйтесь на градиент css генераторе выше.

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

Используем все, что мы уже узнали ранее, чтобы создать радиальный градиент. На самом деле это довольно просто, достаточно в начале указать значение radial-gradient .

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

К тому же мы можем указать где будет центр радиального градиента. Давайте сделаем так, чтобы он был в левом верхнем углу:

Практическое использование CSS градиента

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

Градиент поверх картинки

Ниже вы видите пример слоя с градиентом поверх изображения. Здесь мы использовали полупрозрачные rgba цвета.

Свойство background может принимать сразу несколько значений. При этом первое будет верхним слоем, а последнее — нижним.

Мы получаем такой эффект:

Градиент в тексте

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

Возьмем элемент, в данном случае h1, и применим к нему градиент. Свойству background-clip присвоим значение text, это удалит фон из всего блока, за исключением текста. И, конечно же, следует сделать свойство color прозрачным, иначе мы не увидим градиент.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *