Как добавить градиент в css
Перейти к содержимому

Как добавить градиент в css

  • автор:

Как сделать градиентный фон на веб-странице?

Для создания градиентов предназначена функция linear-gradient(), которая добавляется к свойству background или background-image.

background: linear-gradient(#9A5044, #E8D9A9);

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

Чтобы сделать градиент в виде фона веб-страницы, background с linear-gradient() следует добавить к селектору body . Однако такой фон привязан к высоте содержимого и если оно меньше высоты веб-страницы, то результат получается так себе (рис. 1).

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

Рис. 1. Вид градиента

Такое можно избежать, если к background добавить параметр fixed , тогда высота градиента будет совпадать с высотой веб-страницы, а при прокрутке содержимого градиент остаётся неподвижным (пример 1).

Пример 1. Градиентный фон

Результат данного примера показан на рис. 2. Для наглядности добавлен высокий белый блок, показывающий что при прокрутке веб-страницы градиент не меняется.

Вид веб-страницы с градиентным фоном

Рис. 2. Вид веб-страницы с градиентным фоном

См. также

  • Градиенты в CSS
  • Градиенты у
  • Линейный градиент
  • Оформление кнопок
  • Установка фона и градиента
  • Функция linear-gradient()

Функция linear-gradient

Функция linear-gradient задает линейный градиент. Применяется к свойствам, которые задают картинку фона: background , background-image или картинку границы: border-image , background-image-source .

Синтаксис

Значения

Значение Описание
направление Задает определенное направление градиента в любых единицах для углов либо ключевыми словами top , left , right , bottom или их комбинацией: top left , top right и так далее. Порядок слов не важен: можно писать top left и left top , разницы нет. Параметр необязательный: если его не написать, градиент будет идти сверху вниз (как при to top ). Перед направлением ставится слово to .
угол Угол в любых единицах для углов. Может быть положительным или отрицательным. Параметр необязательный. Одновременно может быть задан или угол, или направление (или вообще ничего).
цвет1 Начальный цвет градиента в любых единицах для цвета.
цвет2 Конечный цвет градиента в любых единицах для цвета.
размер Задает протяженность определенного цвета градиента в любых единицах для размера.

Пример . Самый простой вариант

Посмотрим на примере:

Пример . Добавляем угол

Посмотрим на примере:

Пример . Добавляем направление

Вместо угла можно добавить направление top , left , right , bottom или их комбинацию: top left , top right Перед направлением ставится слово to .

Посмотрим на примере:

Пример . Добавляем направление

Укажем другое направление:

Пример . Добавляем размер

В следующем примере поведение будет следующее: чистый красный цвет будет от 0px до 30px , от 30px до 50px будет градиент от красного до голубого, а от 50px и до конца — чистый голубой:

Пример . Добавляем более чем 2 цвета

В следующем примере поведение будет следующее: чистый красный цвет будет от 0px до 30px , от 30px до 50px будет градиент от красного до голубого, а от 50px и до 70px — градиент от голубого до зеленого, а после 70px — чистый зеленый:

Пример . Резкие переходы

В следующем примере поведение будет следующее: чистый красный цвет будет от 0px до 30px , чистый голубой — от 30px до 60px , чистый зеленый — после 60px ( red 0px можно и не писать):

Пример . Размеры можно задавать и в процентах

В следующем примере поведение будет следующее: чистый красный цвет будет от 0% до 30% , чистый голубой — от 30% до 60% , чистый зеленый — после 60% ( red 0% можно и не писать):

Пример . Сочетание с background-size

В следующем примере поведение будет следующее: чистый красный цвет будет от 0px до 30px , чистый голубой — от 30px до 60px , при этом все это будет повторяться кусочками по 60px (из-за background-size: 60px; ):

Смотрите также

  • функцию linear-gradient ,
    которая создает линейный градиент
  • функцию radial-gradient ,
    которая создает радиальный градиент
  • функцию repeating-linear-gradient ,
    которая создает повторяющийся линейный градиент
  • функцию repeating-radial-gradient ,
    которая создает повторяющийся радиальный градиент

2.16. CSS-градиент

CSS-градиент представляет собой переходы от одного цвета к другому.

Градиенты создаются с помощью функций linear-gradient() и radial-gradient() .

Градиентный фон можно устанавливать в свойствах background , background-image , border-image и list-style-image .

Как сделать градиент в CSS

  • Содержание:
  • 1. Линейный градиент: linear-gradient()
  • 2. Радиальный градиент: radial-gradient()
  • 3. Повтор градиента: repeating-linear-gradient() и repeating-radial-gradient()
  • 4. Кроссбраузерный градиент
  • 5. Комбинация градиента и фонового изображения
Поддержка браузерами

IE: 10.0
Firefox: 16, 3.6 -moz-
Chrome: 26.0, 10.0 -webkit-
Safari: 6.1, 5.1 -webkit-
Opera: 12.1, 11.1 -o-
iOS Safari: 7.1
Opera Mini:
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Линейный градиент linear-gradient()

linear-gradient-axis

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

Если направление не указано, используется значение по умолчанию — сверху-вниз.

Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.

background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.); 

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

с помощью ключевых слов to top , to right , to bottom , to left , которые соответствуют углу градиента, равному 0deg , 90deg , 180deg и 270deg соответственно.

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

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

Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:

2. Радиальный градиент radial-gradient()

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

background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.); 

Форма градиента определяется ключевыми словами circle или ellipse . Если форма не задана, по умолчанию радиальный градиент принимает форму эллипса.

Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position , с добавлением приставки at . Если позиция центра не задана, используется значение по умолчанию at center .

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

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

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

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

Мяч
Кнопка
.wrap < height: 200px; padding: 50px 0; background: #cccccc; >.button
Почтовая марка

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

 
.container < background: #B7D1D8; padding: 25px; >.wrap < background: radial-gradient(transparent, transparent 4px, white 4px,white); padding: 10px; width: 300px; height: 220px; background-size: 20px 20px; background-position: -10px -10px; /*обрезаем узор по краю*/ margin: 0 auto; >img

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

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

4. Кроссбраузерный градиент

Для корректного отображения градиентов во всех браузерах необходимо добавить кроссбраузерную запись.

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

-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)"; /* IE 8-9 */ background: -webkit-linear-gradient(left, red, #f06d06); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */ background: -moz-linear-gradient(left, red, #f06d06); /* Firefox 3.6-15 */ background: -o-linear-gradient(left, red, #f06d06); /* Opera 11.1-12 */ background: linear-gradient(to right, red, #f06d06); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */

Повтор линейного градиента

background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */ background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1-12.0 */ background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6-15 */ background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Стандартный синтаксис */

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

background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1-6.0 */ background: -o-radial-gradient(red, yellow, green); /* Opera 11.6-12.0 */ background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6-15 */ background: radial-gradient(red, yellow, green); /* Стандартный синтаксис */ background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Safari 5.1-6.0 */ background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Opera 11.6-12.0 */ background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Firefox 3.6-15 */ background: radial-gradient(farthest-side at 60% 55%, red, yellow, black); /* Стандартный синтаксис */

Повтор радиального градиента

background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1-6.0 */ background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6-12.0 */ background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6-15 */ background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Стандартный синтаксис */

5. Комбинация градиента и фонового изображения

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

CSS gradient генератор

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

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

background: linear-gradient (#58b6b9, #edf1cf);

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

background: linear-gradient (to right, #94525c, #14aad7);

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

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

background: linear-gradient (to right, #94525c, #14aad7, cyan);

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

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

background: linear-gradient (to right, #a3795f 50%, #012754);

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

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

background: radial-gradient (#edf1cf, #43acb4);

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

background: radial-gradient (circle, #5d1a78, #414b50);

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

background: radial-gradient (circle at top left, #e1d767, #d3f6da);

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

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

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

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

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

 CSS div { background: linear-gradient(to right, rgba(75, 123, 211, 0.5), rgba(22, 215, 177, 0.3)), url('gradient.jpg'); } 

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

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

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

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

 CSS div { background-image: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6); -webkit-background-clip: text; background-clip: text; color: transparent; } 
  • Студия Профессиональная разработка сайтов под заказ Подробнее
  • Иконки Прекрасный способ визуально выразить главную мысль Подробнее
  • Сервисы Полезные инструменты для веб разработчиков Подробнее
  • Блог Делимся в опытом и знанием в IT сфере Подробнее
  • Поделиться ВконтактеFacebook Контакты support@active-vision.ru

© 2019 — 2024 Active-Vision. Политика конфиденциальности. Вся информация на сайте носит справочный характер и не является публичной офертой, определяемой статьей 437 ГК РФ

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

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