Linear-gradient(): линейный градиент в фоне
Цветовой градиент — это плавный переход от одного заданного цвета к другому через промежуточные цвета. В линейном градиенте переход происходит по прямой, от точки A к точке B. Градиент может иметь и более двух опорных точек — тогда переход совершается от точки A к точке B, затем от точки B к точке C и так далее.
Как сделать фоновый линейный градиент в CSS
В CSS3 вы можете добавлять градиентный фон к элементам через уже известное свойство background-image . В качестве значения используется ключевое слово linear-gradient() , где в скобках необходимо указать стартовую точку градиента, начальный цвет и конечный цвет.
Например, давайте сделаем фоновый линейный градиент с переходом от фиолетового цвета к красному. При этом мы хотим, чтобы начальная точка с фиолетовым цветом была с правой стороны, а вектор градиента направлялся влево. Запишем код:
background-image: linear-gradient(to left, violet, red);
Цвета точек градиента можно записывать в любом формате, доступном в CSS, будь-то шестнадцатеричный код, формат RGB или другой. Направление градиента задается с помощью приставки to и затем ключевых слов left , right , top и bottom , которые можно комбинировать для изменения наклона. Например:
background-image: linear-gradient(to bottom right, #ee82ee, #ff0000);
Кроме этого, можно прямо указать угол наклона, использовав положительное либо отрицательное число с приставкой deg (без пробела). При заданном угле 0º либо 360º градиентная линия будет идти снизу вверх. При увеличении угла наклона движение вектора происходит по часовой стрелке (при использовании отрицательного значения движение меняется на противоположное). Пример записи кода:
background-image: linear-gradient(-110deg, #ee82ee, #ff0000);
Чтобы лучше понять поведение линейных градиентов, необходимо видеть их. Поэтому рекомендуем вам самостоятельно попрактиковаться после прочтения данного урока.
Несколько опорных точек
Как мы уже сказали, у градиента может быть более двух опорных точек. При этом фон будет плавно переходить от первого цвета ко второму, от второго к третьему, от третьего к четвертому и так далее, пока не достигнет финальной опорной точки. Если вы хотите увеличить количество данных точек в градиенте, просто допишите их через запятую. Например:
background-image: linear-gradient(145deg, #ee82ee, slateblue, #ffd86a, purple);
В нашем примере указаны четыре опорных цветовых точки, но их можно добавлять сколько угодно и в каких угодно доступных цветовых форматах.
Длина переходов
По умолчанию браузер размещает точки на равном расстоянии, поэтому и градация получается равномерной. Но этим расстоянием можно управлять, используя единицы измерения CSS. Давайте разберем следующий пример:
background-image: linear-gradient(#92009b 20%, #f5e944 90%, #00ffa2);
В нашем коде после цвета #92009b указано значение 20% . Поскольку оно стоит возле первой опорной точки, это означает, что указанным цветом будет закрашено 20% длины элемента. После чего уже начинается градиент: значение 90% говорит браузеру, что нужно достичь цвета #f5e944 к 90% длины элемента (начав на уровне 20%). После чего в оставшемся пространстве начинается переход к третьему цвету — #00ffa2 .
Эта тема также требует практики. Попробуйте создать градиентный фон с несколькими опорными точками (более двух), поиграться со значениями расстояний и понаблюдать за изменениями градиента в браузере.
Вендорные префиксы
Для обеспечения кроссбраузерности к некоторым поздним CSS-свойствам нужно дописывать вендорные префиксы — специальные приставки, которые добавляют разработчики браузеров:
- -webkit- — префикс для Chrome, Safari, Android;
- -moz- — префикс для Firefox;
- -o- — префикс для Opera.
Градиентный фон тоже требует использования данных префиксов, если есть необходимость в поддержке максимального количества браузеров. Для этого адаптируйте код следующим образом:
background-image: -webkit-linear-gradient(left, violet, red); background-image: -moz-linear-gradient(left, violet, red); background-image: -o-linear-gradient(left, violet, red); background-image: linear-gradient(to left, violet, red);
Для добавления префикса требуется создавать отдельное объявление. Кроме того, как вы могли заметить, свойства с вендорными префиксами не требуют использования приставки to при указании направления градиента.
Поддержка Internet Explorer
К сожалению, градиентный фон работает только в IE10+. Предыдущие версии не понимают его и будут игнорировать. Чтобы обеспечить хотя бы обычный фон в старых браузерах, можно создать т. н. «заглушку»: выберите подходящий оттенок и запишите свойство background-color над свойством с градиентом. Таким образом, старый браузер применит «резервный» фоновый цвет, а неизвестные ему свойства пропустит, тогда как в более современном браузере градиентный фон наложится на сплошной фон и перекроет его.
Если же у вас установлен полупрозрачный градиент (например, с использованием цветового формата RGBA) и вы не хотите, чтобы сквозь него просвечивался резервный фон-заглушка, задавайте градиент через сокращенное свойство background вместо background-image . Тогда значение background-color будет перезаписано на transparent .
Далее в учебнике: repeating-linear-gradient() — повторяющийся линейный градиент.
Использование CSS-градиентов
CSS-градиенты представлены типом данных (en-US), специальным типом (en-US), состоящим из последовательного перехода между двумя и более цветами. Вы можете выбрать один из трёх типов градиентов: линейный (создаётся с помощью функции linear-gradient() (en-US)), круговой (создаётся с помощью radial-gradient() (en-US)) и конический (создаётся с помощью функции conic-gradient() (en-US)). Вы можете также создавать повторяющиеся градиенты с помощью функций repeating-linear-gradient() (en-US), repeating-radial-gradient() (en-US) и repeating-conic-gradient() (en-US).
Градиенты могут быть использованы везде, где может быть использован тип , например в качестве фона. Так как градиенты генерируются динамически, они могут избавить от необходимости использовать файлы растровых изображений, которые ранее использовались для достижения похожих эффектов. В дополнение к этому, так как градиенты генерируются браузером, они выглядят лучше, чем растровые изображения в случае увеличения масштаба, и их размер может быть изменён на лету.
Мы начнём с того, что покажем вам линейные градиенты, затем покажем возможности, поддерживаемые всеми типами градиентов, используя линейные градиенты в качестве примера, затем перейдём к круговым, коническим и повторяющимся градиентам.
Использование линейных градиентов
Линейный градиент создаёт цветную полосу, имеющую вид прямой линии.
Обычный линейный градиент
Чтобы создать самый простой тип градиента, всё, что вам нужно – это указать два цвета. Они называются точки остановки цвета. Их должно быть, как минимум, две, но у вас может быть столько, сколько захотите.
div class="simple-linear">div>
div width: 120px; height: 120px; >
.simple-linear background: linear-gradient(blue, pink); >
Изменение направления
По умолчанию линейные градиенты идут сверху вниз. Вы можете изменить угол поворота путём задания направления.
div class="horizontal-gradient">div>
div width: 120px; height: 120px; >
.horizontal-gradient background: linear-gradient(to right, blue, pink); >
Диагональные градиенты
Вы можете даже создать градиент, проходящий диагонально, из угла в угол.
div class="diagonal-gradient">div>
div width: 200px; height: 100px; >
.diagonal-gradient background: linear-gradient(to bottom right, blue, pink); >
Использование углов
Если вы хотите больше контроля над его направлением, вы можете задать градиенту определённый угол.
div class="angled-gradient">div>
div width: 120px; height: 120px; >
.angled-gradient background: linear-gradient(70deg, blue, pink); >
При использовании угла 0deg создаётся вертикальный градиент, идущий снизу вверх, 90deg создаёт горизонтальный градиент, идущий слева направо, и так далее по часовой стрелке. Отрицательные углы идут против часовой стрелки.
Указание цветов и создание эффектов
Все типы CSS-градиентов – это диапазон позиционно-зависимых цветов. Цвета, создаваемые CSS-градиентами, могут варьироваться непрерывно с изменением позиции, создавая плавные цветовые переходы. Возможно также создавать полосы сплошных цветов, и резкие переходы между двумя цветами. Следующее примеры работают во всех градиентных функциях:
Использование более двух цветов
Вам не нужно ограничиваться двумя цветами – вы можете использовать столько, сколько хотите! По умолчанию цвета равномерно распределены по градиенту.
div class="auto-spaced-linear-gradient">div>
div width: 120px; height: 120px; >
.auto-spaced-linear-gradient background: linear-gradient(red, yellow, blue, orange); >
Расположение точек остановок цветов
Вам не нужно оставлять ваши точки остановок цветов на их исходных позициях. Чтобы подправить их расположение, вы можете не задавать каждому ничего, или задать одну или две процентные, а для круговых и линейных градиентов – абсолютные значения. Если вы зададите расположение с процентах, 0% будет представлять начальную точку, в то время как 100% будет являться конечной точкой; однако, если необходимо, вы можете использовать значения и вне этого диапазона для достижения желаемого эффекта. Если вы не будете задавать расположение, позиция этой точки остановки будет автоматически рассчитана за вас так, что первая точка остановки будет расположена на 0% , а последняя – на 100% , а все остальные точки остановки будут расположены на полпути между соседними точками остановки.
div class="multicolor-linear">div>
div width: 120px; height: 120px; >
.multicolor-linear background: linear-gradient(to left, lime 28px, red 77%, cyan); >
Создание резких переходов
Чтобы создать резкий переход между двумя цветами, т. е. получить черту вместо постепенного перехода, обе соседние точки остановки должны быть установлены в одном месте. В этом примере цвета делят точку остановки на отметке 50% , посередине градиента:
div class="striped">div>
div width: 120px; height: 120px; >
.striped background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); >
Подсказки градиента
По умолчанию градиент идёт плавно от одного цвета до другого. Вы можете добавить цветовую подсказку, чтобы переместить значение средней точки перехода в определённую точку градиента. В этом примере мы переместили среднюю точку перехода из отметки 50% на отметку 10%.
div class="color-hint">div> div class="simple-linear">div>
div width: 120px; height: 120px; float: left; margin-right: 10px; >
.color-hint background: linear-gradient(blue, 10%, pink); > .simple-linear background: linear-gradient(blue, pink); >
Создание цветных линий и полосок
Чтобы добавить внутрь градиента сплошную цветную область без плавного перехода, добавьте две позиции для точки остановки. Точки остановки могут быть в двух позициях, что эквивалентно двум подряд точкам остановки с тем же цветом на разных позициях. Цвет достигнет полной насыщенности на первой точке, проследует с той же насыщенностью до второй точки остановки и перейдёт в цвет следующей точки остановки через первую позицию следующей точки остановки.
div class="multiposition-stops">div> div class="multiposition-stop2">div>
div width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; >
.multiposition-stops background: linear-gradient( to left, lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% ); background: linear-gradient( to left, lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% ); > .multiposition-stop2 background: linear-gradient( to left, lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% ); background: linear-gradient( to left, lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% ); >
В первом примере выше лаймовый цвет идёт от отметки 0%, далее, как указано, до отметки 20%, сделает переход от лаймового до красного через 10% ширины градиента, достигнет сплошного красного на отметке 30%, и останется таким до 45% градиента, где он потускнеет до голубого, оставаясь таким ещё 15% градиента, и так далее.
Во втором примере каждая вторая точка остановки для каждого цвета находится на той же позиции, что и первая точка остановки соседнего цвета, создавая полосатый эффект.
В обоих примерах градиент написан дважды: первый – это метод из CSS-изображений уровня 3 использующий повторения цвета на каждой остановке, а второй пример – это метод из CSS-изображений уровня 4, где в линейном объявлении точек остановки используются множественные точки остановки с двумя значениями длин точек остановки.
Управление переходом градиента
По умолчанию градиент плавно переходит между цветами двух соседних точек остановки, а средняя точка между этими двумя точками остановки является средним значением цветового перехода. Вы можете контролировать интерполяцию или переход между двумя точками остановки добавлением его расположения в цветовой подсказке. В этом примере цвет достигает средней точки перехода от лаймового до голубого на расстоянии 20% градиента вместо стандартных 50%. Во втором примере нет такой подсказки, чтобы подчеркнуть отличие, получаемое при её использовании:
div class="colorhint-gradient">div> div class="regular-progression">div>
div width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; >
.colorhint-gradient background: linear-gradient(to top, black, 20%, cyan); > .regular-progression background: linear-gradient(to top, black, cyan); >
Перекрытие градиентов
Градиенты поддерживают прозрачность, так что вы можете накладывать фоны для получения всяких разных эффектов. Фоны накладываются снизу вверх таким образом, что первый объявленный будет лежать поверх остальных.
div class="layered-image">div>
div width: 300px; height: 150px; >
.layered-image background: linear-gradient(to right, transparent, mistyrose), url("critters.png"); >
Наслаивание градиентов
Вы можете даже наслаивать градиенты друг на друга. Если верхние градиенты не полностью непрозрачны, градиенты, лежащие под ними, тоже будут видны.
div class="stacked-linear">div>
div width: 200px; height: 200px; >
.stacked-linear background: linear-gradient( 217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71% ), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%); >
Использование круговых градиентов
Круговые градиенты схожи с линейными градиентами, за исключением того, что они создают градиентный круг по направлению от центральной точки. Вы можете указать, где должна находиться центральная точка. Вы также можете сделать её круглой или овальной.
Обычный круговой градиент
Как и в случае с линейными градиентами, всё, что вам нужно, чтобы создать круговой градиент – это два цвета. По умолчанию центр градиента находится на отметке 50% 50%, градиент становится овальным с учётом соотношения сторон содержащего его блока:
div class="simple-radial">div>
div width: 240px; height: 120px; >
.simple-radial background: radial-gradient(red, blue); >
Размещение круговых точек остановки
Опять же, как и у линейных градиентов, вы можете расположить каждую круговую точку остановки, указав значение в виде процентной или абсолютной длины.
div class="radial-gradient">div>
div width: 120px; height: 120px; >
.radial-gradient background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%); >
Расположение центра градиента
Вы можете расположить центр градиента с помощью ключевых значений, процентной или абсолютной длины. Значения в виде числа или процента повторяются в случае, если указано только одно из них, иначе порядок повторения будет определяться порядком расположения, начиная слева и сверху.
div class="radial-gradient">div>
div width: 120px; height: 240px; >
.radial-gradient background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%); >
Задание размеров кругового градиента
В отличие от линейных градиентов, круговому градиенту можно задавать размеры. Возможные значения включат в себя: ближайший угол, ближайшая сторона, самый дальний угол и самая дальняя сторона, самый дальний угол – значение по умолчанию.
Пример: ближайшая сторона для эллипса
В этом примере используется значение размера closest-side , которое означает, что размер определяется расстоянием от начальной точки (центра) до ближайшей стороны блока.
div class="radial-ellipse-side">div>
div width: 240px; height: 100px; >
.radial-ellipse-side background: radial-gradient( ellipse closest-side, red, yellow 10%, #1e90ff 50%, beige ); >
Пример: самый дальний угол для эллипса
Этот пример схож с предыдущим, за исключением того, что его размер указан как farthest-corner , что устанавливает размер градиента значением расстояния от начальной точки до самого дальнего угла блока.
div class="radial-ellipse-far">div>
div width: 240px; height: 100px; >
.radial-ellipse-far background: radial-gradient( ellipse farthest-corner at 90% 90%, red, yellow 10%, #1e90ff 50%, beige ); >
Пример: ближайшая сторона для круга
Этот пример использует closest-side , что задаёт размер круга как расстояние между начальной точкой (центром) и ближайшей стороной. Радиус круга – это расстояние между центром градиента и ближайшей стороной. Круг, с учётом позиционирования в точке 25% от левой стороны и 25% от низа, ближе всего к низу, так как расстояние по высоте в этом случае меньше, чем по ширине.
div class="radial-circle-close">div>
div width: 240px; height: 120px; >
.radial-circle-close background: radial-gradient( circle closest-side at 25% 75%, red, yellow 10%, #1e90ff 50%, beige ); >
Наложение круговых градиентов
Вы можете накладывать круговые градиенты так же, как линейные. Первый объявленный будет сверху, последний – снизу.
div class="stacked-radial">div>
div width: 200px; height: 200px; >
.stacked-radial background: radial-gradient( circle at 50% 0, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0) 70.71% ), radial-gradient( circle at 6.7% 75%, rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0) 70.71% ), radial-gradient( circle at 93.3% 75%, rgba(0, 255, 0, 0.5), rgba(0, 255, 0, 0) 70.71% ) beige; border-radius: 50%; >
Использование конических градиентов
CSS-функция conic-gradient() создаёт изображение, состоящее из градиента с переходом цвета, обёрнутым вокруг центральной точки (в отличие от градиента, исходящего кругом от центральной точки). Образцом конического градиента можно назвать круговые диаграммы и цветовые круги, но он также может быть использован для создания шахматной доски (клетки) и других интересных эффектов.
Синтаксис конического градиента схож с синтаксисом кругового градиента, но с тем отличием, что точки остановки цвета располагаются вокруг градиентной дуги, вдоль длины окружности круга, а не по градиентной линии, идущей от центра градиента. Также, точки остановки цвета задаются только в процентах или градусах, абсолютные величины недопустимы.
В круговом градиенте цвета переходят от центра окружности наружу, во всех направлениях. В случае конического градиента цвета идут, как бы оборачиваясь вокруг центра круга, начиная сверху и двигаясь по часовой стрелке. Так же, как и в круговом градиенте, вы можете указать расположение центра градиента. Так же, как и в линейном градиенте, вы можете изменять угол градиента.
Обычный конический градиент
Так же, как и в случае с линейными и круговыми градиентами, всё, что вам нужно для создания конического градиента – это два цвета. По умолчанию центр градиента находится в точке 50% 50%, начало градиента направлено вверх:
div class="simple-conic">div>
div width: 120px; height: 120px; >
.simple-conic background: conic-gradient(red, blue); >
Расположение конического центра
Как и в круговом градиенте, вы можете задать расположение центра конического градиента с помощью ключевых значений, процентных или абсолютных величин с использованием ключевого слова «at».
div class="conic-gradient">div>
div width: 120px; height: 120px; >
.conic-gradient background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%); >
Изменение угла
Вы можете задать угол, в котором направлено начало градиента значением типа , с предшествующим ему ключевым словом «from».
div class="conic-gradient">div>
div width: 120px; height: 120px; >
.conic-gradient background: conic-gradient( from 45deg, red, orange, yellow, green, blue, purple ); >
Использование повторяющихся градиентов
Размер повторяющейся градиентной линии или дуги – это длина от значения первой до значения последней точки остановки цвета. Если первая точка остановки содержит только цвет без указания длины до точки остановки, то используется значение по умолчанию, равное 0. Если последняя точка остановки содержит только цвет без указания длины до точки установки, то используется значение по умолчанию, равное 100%. Если ни то, ни другое не определено, то линия градиента будет равна 100%, что означает, что линейный и конический градиент не будет повторяться, а круговой градиент будет повторяться, только если радиус градиента меньше, чем расстояние между центром градиента и самым дальним углом. Если первая точка остановки определена и имеет значение больше 0, градиент будет повторяться при условии, что размер линии или дуги равен разнице между первой и последней точкой остановки, если эта разница меньше, чем 100% или 360 градусов.
Повторяющиеся линейные градиенты
В этом примере используется repeating-linear-gradient() (en-US) для создания повторяющегося градиента, идущего по прямой линии. Цветовая последовательность начинается заново с каждым повторением градиента. В данном случае градиент имеет длину 10px.
div class="repeating-linear">div>
div width: 120px; height: 120px; >
.repeating-linear background: repeating-linear-gradient( -45deg, red, red 5px, blue 5px, blue 10px ); >
Множественные повторяющиеся линейные градиенты
Так же, как и в случае с обычными линейными и круговыми градиентами, вы можете использовать множественные градиенты, один поверх другого. Это имеет смысл, только если градиенты частично прозрачны, что позволяет видеть одни градиенты сквозь прозрачные части других градиентов, этого же можно достичь при условии использования разных размеров фона (background-size), при этом возможно ещё и при разных значениях свойства background-position для каждого градиента. Мы использовали прозрачность.
В данном случае градиентные линии имеют длину 300px, 230px и 300px.
div class="multi-repeating-linear">div>
div width: 600px; height: 400px; >
.multi-repeating-linear background: repeating-linear-gradient( 190deg, rgba(255, 0, 0, 0.5) 40px, rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px, rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px, rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px, rgba(255, 0, 0, 0.5) 300px ), repeating-linear-gradient( -190deg, rgba(255, 0, 0, 0.5) 30px, rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px, rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px, rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px, rgba(255, 0, 0, 0.5) 230px ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green 200px, blue 250px, indigo 300px, violet 350px, red 370px); >
Клетчатый градиент
Для создания клетчатого градиента мы используем несколько полупрозрачных перекрывающих друг друга градиентов. В первом объявлении фона мы внесли в список каждую остановку цвета отдельно. Во втором объявлении свойства background используется синтаксис многопозиционных остановок цвета:
div class="plaid-gradient">div>
div width: 200px; height: 200px; >
.plaid-gradient background: repeating-linear-gradient( 90deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px ), repeating-linear-gradient( 0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px ), repeating-linear-gradient( -45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px ), repeating-linear-gradient(45deg, transparent, transparent 5px, rgba( 143, 77, 63, 0.25 ) 5px, rgba(143, 77, 63, 0.25) 10px); background: repeating-linear-gradient( 90deg, transparent 0 50px, rgba(255, 127, 0, 0.25) 50px 56px, transparent 56px 63px, rgba(255, 127, 0, 0.25) 63px 69px, transparent 69px 116px, rgba(255, 206, 0, 0.25) 116px 166px ), repeating-linear-gradient( 0deg, transparent 0 50px, rgba(255, 127, 0, 0.25) 50px 56px, transparent 56px 63px, rgba(255, 127, 0, 0.25) 63px 69px, transparent 69px 116px, rgba(255, 206, 0, 0.25) 116px 166px ), repeating-linear-gradient( -45deg, transparent 0 5px, rgba(143, 77, 63, 0.25) 5px 10px ), repeating-linear-gradient(45deg, transparent 0 5px, rgba( 143, 77, 63, 0.25 ) 5px 10px); >
Повторяющиеся круговые градиенты
В этом примере для создания кругового градиента, повторяющегося из центральной точки, используется repeating-radial-gradient() (en-US). Цветовая последовательность начинаются заново с каждой итерацией повторения градиента.
div class="repeating-radial">div>
div width: 120px; height: 120px; >
.repeating-radial background: repeating-radial-gradient( black, black 5px, white 5px, white 10px ); >
Множественные повторяющиеся круговые градиенты
div class="multi-target">div>
div width: 250px; height: 150px; >
.multi-target background: repeating-radial-gradient( ellipse at 80% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 15px, rgba(255, 255, 255, 0.5) 15px, rgba(255, 255, 255, 0.5) 30px ) top left no-repeat, repeating-radial-gradient( ellipse at 20% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 10px, rgba(255, 255, 255, 0.5) 10px, rgba(255, 255, 255, 0.5) 20px ) top left no-repeat yellow; background-size: 200px 200px, 150px 150px; >
Смотрите также
- Градиентные функции: linear-gradient() (en-US), radial-gradient() (en-US), conic-gradient() (en-US), repeating-linear-gradient() (en-US), repeating-radial-gradient() (en-US), repeating-conic-gradient() (en-US)
- Типы данных CSS, связанные с градиентами: (en-US), (en-US)
- Свойства CSS, связанные с градиентами: background , background-image
- Галерея шаблонов градиентов CSS, от Lea Verou
- Библиотека градиентов CSS3, от Estelle Weyl
- Генератор градиентов CSS
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Как сделать градиент фона в css
Градиентный фон можно устанавливать в свойствах background и background-image, но, для экономии места, все примеры будут записаны в обобщенном свойстве background. Значение которое принимает свойство background может быть одним из:
linear-gradient(), линейный градиент, создается с помощью двух и более цветов, для которых задано направление, или линия градиента.
body /* необходимо задать высоту блока */ height: 100vh; /* зальем body документа градиентом из 3 цветов, начало градиента - нижний левый угол*/ background: linear-gradient(45deg, #4158D0 0%, #4158D0 30%, #C850C0 30%, #C850C0 60%, #FFCC70 60%, #FFCC70 100%); > Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета. Тогда и границы градиента будут четкие, без плавного перехода.
body /* необходимо задать высоту блока */ height: 100vh; /* зальем body документа градиентом из 3 цветов, начало градиента - нижний левый угол*/ background: linear-gradient(45deg, #4158D0 35%, #C850C0 35%, #C850C0 65%, #FFCC70 65%, #FFCC70 100%); > radial-gradient(), радиальный (круговой) градиент, отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.
body /* необходимо задать высоту блока */ height: 100vh; /* зальем body документа градиентом из 2 цветов, начало градиента - центр страницы*/ background: radial-gradient(#4158d0, #c850c0); > Используя в градиентах прозрачный цвет, можно создавать эффекты размытий или «боке».
repeating-linear-gradient() или repeating-radial-gradient() — вышеуказанные варианты только с функцией повтора, чаще всего с помощью этих вариантов создают полосатые узоры.
body /* необходимо задать высоту блока */ height: 100vh; /* зальем body документа градиентом из 2 цветов, начало градиента - центр страницы*/ background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); > 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 — 2023 Active-Vision. Политика конфиденциальности. Вся информация на сайте носит справочный характер и не является публичной офертой, определяемой статьей 437 ГК РФ