Background linear gradient css: linear-gradient() — CSS | MDN

Использование CSS-градиентов — CSS | MDN

CSS-градиенты представлены типом данных <gradient> (en-US), специальным типом <image> (en-US), состоящим из последовательного перехода между двумя и более цветами. Вы можете выбрать один из трёх типов градиентов: линейный (создаётся с помощью функции linear-gradient), круговой (создаётся с помощью radial-gradient) и конический (создаётся с помощью функции conic-gradient (en-US)). Вы можете также создавать повторяющиеся градиенты с помощью функций repeating-linear-gradient, repeating-radial-gradient (en-US) и repeating-conic-gradient (en-US).

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

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

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

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

Обычный линейный градиент

Чтобы создать самый простой тип градиента, всё, что вам нужно – это указать два цвета. Они называются

точки остановки цвета. Их должно быть, как минимум, две, но у вас может быть столько, сколько захотите.

.simple-linear {
  background: linear-gradient(blue, pink);
}

Изменение направления

По умолчанию линейные градиенты идут сверху вниз. Вы можете изменить угол поворота путём задания направления.

.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
}

Диагональные градиенты

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

.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}
 

Использование углов

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

.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}

При использовании угла 0deg создаётся вертикальный градиент, идущий снизу вверх, 90deg создаёт горизонтальный градиент, идущий слева направо, и так далее по часовой стрелке. Отрицательные углы идут против часовой стрелки.

Все типы CSS-градиентов – это диапазон позиционно-зависимых цветов. Цвета, создаваемые CSS-градиентами, могут варьироваться непрерывно с изменением позиции, создавая плавные цветовые переходы.

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

Использование более двух цветов

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

.auto-spaced-linear-gradient {
  background: linear-gradient(red, yellow, blue, orange);
}

Расположение точек остановок цветов

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

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

.multicolor-linear {
   background: linear-gradient(to left, lime 28px, red 77%, cyan);
}

Создание резких переходов

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

.striped {
   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}

Подсказки градиента

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

В этом примере мы переместили среднюю точку перехода из отметки 50% на отметку 10%.

.color-hint {
  background: linear-gradient(blue, 10%, pink);
}
.simple-linear {
  background: linear-gradient(blue, pink);
}

Создание цветных линий и полосок

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

.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%. Во втором примере нет такой подсказки, чтобы подчеркнуть отличие, получаемое при её использовании:

.colorhint-gradient {
  background: linear-gradient(to top, black, 20%, cyan);
}
.regular-progression {
  background: linear-gradient(to top, black, cyan);
}

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

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

.layered-image {
  background: linear-gradient(to right, transparent, mistyrose),
      url("https://mdn.mozillademos.org/files/15525/critters.png");
}

Наслаивание градиентов

Вы можете даже наслаивать градиенты друг на друга. Если верхние градиенты не полностью непрозрачны, градиенты, лежащие под ними, тоже будут видны.

.stacked-linear {
  background:
      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70. 71%),
      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

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

Обычный круговой градиент

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

.simple-radial {
  background: radial-gradient(red, blue);
}

Размещение круговых точек остановки

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

. radial-gradient {
  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
}

Расположение центра градиента

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

.radial-gradient {
  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
}

Задание размеров кругового градиента

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

Пример: ближайшая сторона для эллипса

В этом примере используется значение размера closest-side, которое означает, что размер определяется расстоянием от начальной точки (центра) до ближайшей стороны блока.

.radial-ellipse-side {
  background: radial-gradient(ellipse closest-side,
      red, yellow 10%, #1e90ff 50%, beige);
}

Пример: самый дальний угол для эллипса

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

.radial-ellipse-far {
  background: radial-gradient(ellipse farthest-corner at 90% 90%,
      red, yellow 10%, #1e90ff 50%, beige);
}

Пример: ближайшая сторона для круга

Этот пример использует closest-side, что задаёт размер круга как расстояние между начальной точкой (центром) и ближайшей стороной. Радиус круга – это расстояние между центром градиента и ближайшей стороной. Круг, с учётом позиционирования в точке 25% от левой стороны и 25% от низа, ближе всего к низу, так как расстояние по высоте в этом случае меньше, чем по ширине.

.radial-circle-close {
  background: radial-gradient(circle closest-side at 25% 75%,
      red, yellow 10%, #1e90ff 50%, beige);
}

Наложение круговых градиентов

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

.stacked-radial {
  background:
      radial-gradient(circle at 50% 0,
        rgba(255,0,0,.5),
        rgba(255,0,0,0) 70.71%),
      radial-gradient(circle at 6.7% 75%,
        rgba(0,0,255,.5),
        rgba(0,0,255,0) 70.71%),
      radial-gradient(circle at 93.3% 75%,
        rgba(0,255,0,.5),
        rgba(0,255,0,0) 70.71%) beige;
  border-radius: 50%;
}

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

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

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

Обычный конический градиент

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

. simple-conic {
  background: conic-gradient(red, blue);
}

Расположение конического центра

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

.conic-gradient {
  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
}

Изменение угла

Вы можете задать угол, в котором направлено начало градиента значением типа <angle>, с предшествующим ему ключевым словом «from».

.conic-gradient {
  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
}

Функции linear-gradient, radial-gradient и conic-gradient (en-US) не поддерживают автоматически повторяющиеся точки остановки цвета. Однако, для реализации этой функциональности существуют функции repeating-linear-gradient, repeating-radial-gradient (en-US) и repeating-conic-gradient (en-US).

Размер повторяющейся градиентной линии или дуги – это длина от значения первой до значения последней точки остановки цвета. Если первая точка остановки содержит только цвет без указания длины до точки остановки, то используется значение по умолчанию, равное 0. Если последняя точка остановки содержит только цвет без указания длины до точки установки, то используется значение по умолчанию, равное 100%. Если ни то, ни другое не определено, то линия градиента будет равна 100%, что означает, что линейный и конический градиент не будет повторяться, а круговой градиент будет повторяться, только если радиус градиента меньше, чем расстояние между центром градиента и самым дальним углом. Если первая точка остановки определена и имеет значение больше 0, градиент будет повторяться при условии, что размер линии или дуги равен разнице между первой и последней точкой остановки, если эта разница меньше, чем 100% или 360 градусов.

Повторяющиеся линейные градиенты

В этом примере используется repeating-linear-gradient для создания повторяющегося градиента, идущего по прямой линии. Цветовая последовательность начинается заново с каждым повторением градиента. В данном случае градиент имеет длину 10px.

.repeating-linear {
  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
}

Множественные повторяющиеся линейные градиенты

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

В данном случае градиентные линии имеют длину 300px, 230px и 300px.

.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 используется синтаксис многопозиционных остановок цвета:

. 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). Цветовая последовательность начинаются заново с каждой итерацией повторения градиента.

.repeating-radial {
  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}

Множественные повторяющиеся круговые градиенты

.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, radial-gradient, conic-gradient (en-US), repeating-linear-gradient, repeating-radial-gradient (en-US), repeating-conic-gradient (en-US)
• Типы данных CSS, связанные с градиентами: <gradient> (en-US), <image> (en-US)
• Свойства CSS, связанные с градиентами: background, background-image
• Галерея шаблонов градиентов CSS, от Lea Verou
• Библиотека градиентов CSS3, от Estelle Weyl
• Генератор градиентов CSS

Линейные градиенты • Про CSS

CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter, также для IE9 можно использовать SVG.

Спецификация: w3.org/TR/css3-images/#gradients.

Градиенты могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image.

linear-gradient

Линейные градиенты достаточно просты в использовании. Для самого элементарного градиента достаточно задать начальный и конечный цвета:

background: linear-gradient(orangered, gold);

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

Угол или направление градиента

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

В градусах: от 0 до 360, например 270deg.

Ключевыми словами:

to top = 0deg;

to right = 90deg;

to bottom = 180deg — значение по умолчанию;

to left = 270deg.

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

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

Вот код самого первого квадрата, для примера:

.top-left {
   background: linear-gradient(to top left, purple, crimson, orangered, gold);
}

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

Разница хорошо видна на прямоугольных фигурах:

Управление положением цветов

Значения точек остановки для цветов градиента задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.

Примеры задания значений в %, в em и значения, выходящие за границы элемента:

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

Так можно сделать, например, фон под боковую колонку, растянутый на всю высоту родительского элемента:

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

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

При отсутствии ограничений код может быть гораздо короче:

.light {
  background: peachpuff linear-gradient(90deg,
    rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, . 4) 50%
  ) center center / 2em;
}

.dark {
  background: steelblue linear-gradient(
    rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%
  ) center center / 100% 1em;
}

В первой строчке задаем фоновый цвет элемента, тип и направление (цвет и направление можно опустить), во второй — определяем цвета градиента и границу между ними, в третьей — задаем положение и размер получившегося изображения. Самая важная часть — размер. По умолчанию фон повторяется, поэтому получившийся паттерн заполнит собой фон элемента. Очень легко и понятно : )

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

Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:

Действующий пример (смотреть в Firefox): jsbin.com/OvOwEma/2/edit.

Чтобы этого избежать, используйте полностью прозрачные цвета нужного оттенка, например, белый: rgba(255, 255, 255, 0) или черный rgba(0, 0, 0, 0). Про разные способы задавать цвета можно почитать здесь.

Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться leaverou.github.io/css-colors, инструментом от Lea Verou.

repeating-linear-gradient

Помимо обычного linear-gradient можно сделать repeating-linear-gradient — повторяющийся градиент

Примерный код:

background: repeating-linear-gradient(
  green, green .5em,
  transparent .5em, transparent 1em
);

К сожалению, повторяющиеся градиенты ведут себя как попало и подойдут только для узоров, которым не важна точность. Если нужна аккуратность, используйте linear-gradient в сочетании с background-size и background-repeat.

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

Ограничения

Градиенты имеют такое же ограничение, что и box-shadow: им нельзя задавать отдельно цвета или направление. Это приводит к дублированию кода и острой потребности воспользоваться препроцессорами в случае создания сложных градиентов.

Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти.

Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/. Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.

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

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

Возможность применения CSS-градиента была реализована Webkit несколько лет назад, но он редко использовалася из-за несовместимости с большинством браузеров. Но теперь Firefox, начиная с версии 3.6+, начал поддерживать градиент, и мы можем создавать градиент без обязательного использования изображения. Opera добавила поддержку CSS-градиента начиная с версии 11.10.

В этой статье мы покажем Вам, как создать CSS-градиент, который будет поддерживаться всеми основными браузерами: IE, Firefox 3.6+, Safari, Opera 11.10+ и Chrome.

В CSS3 градиенты бывают двух видов — линейные и радиальные. Рассмотрим сначала линейный градиент.

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

Для Webkit—браузеров:

Следующий код предназначен для webkit браузеров, таких как Safari, Chrome, и т.д. Он создаст линейный градиент, от верхней точки (#ccc) к основанию (#000).

background: -webkit-linear-gradient(left top, left bottom, #ccc, #000);   

Примечание: В старых версиях Webkit-браузеров использовался немного другой синтаксис, первым параметром там указывался тип градиента.

Для Firefox 3.6+:

background: -moz-linear-gradient(top,  #ccc,  #000);  

Для Opera

Этот код будет работать в Опере начиная с версии 11. 10.

background: -o-linear-gradient(top,  #ccc,  #000); /* Opera 11.10+ */

Для Internet Explorer

Градиент для IE 10+

background: -ms-linear-gradient(top,  #ccc,  #000); /* IE10+ */

Этот фильтр будет работать в старых версиях IE:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cccccc’, endColorstr=’#000000′);

Кроссбраузерный CSS-градиент:

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

background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cccccc’, endColorstr=’#000000′); /* для IE6-9 */
background: -webkit-linear-gradient(top, bottom, #ccc, #000); /* для webkit-браузеров */
background: -moz-linear-gradient(top,  #ccc,  #000); /* для firefox 3. 6+ */
background: -o-linear-gradient(top,  #ccc,  #000); /* для Opera 11.10+ */
background: -ms-linear-gradient(top,  #ccc,  #000); /* для IE10+ */

Давайте рассмотрим подробнее синтаксис. Первое значение (point) является необязательным. Если значение не указано, то по умолчанию будет градиент будет идти от верха до низа. Вы можете использовать различные ключевые слова здесь. Это может быть одно ключевое слово или сочетание двух. Вы также можете использовать значения в градусах. Цель этого параметра заключается в определении, в каком направлении градиент будет распространяться. Кроме того, необходимо определить как минимум два цвета. Первый цвет будет в начале градиента, а последний цвет, соответственно, в конце. Здесь перечисленны возможные значения point:

• top
• right
• bottom
• left
• top left
• top right
  
• bottom left
• bottom right
• 0deg
• 11deg
• 67deg
• 182deg
• -45deg
• -90deg

Использование стоп-цвета

Цвета могут иметь необязательные stop значения. Если они не определены, то цвета переходят плавно от первого до последнего. Но вы можете использовать несколько цветов при создании градиента, и при этом вы можете изменять ширину каждого цвета устанавливая stop значения. Устанавливаемое значение может измеряться в любых допустимых CSS единицах (px, pt, em, % и т.д.). Эти значения помещается после цвета. Также вы можете использовать любые допустимые CSS-цвета, такие как ключевые слова (red, yellow, blue), или hex, hsl, rgb или rgba значения.

background-image: linear-gradient(top, yellow 10px, red 80px);
background-image: linear-gradient(top right, orange, green 30%, yellow 70%);
background-image: linear-gradient(60deg, red, white, blue 50%);

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

Радиальный градиент распространяется от точки в центре по окружности.

background: radial-gradient(
позиция или угол, форма или размер, от-стоп, стоп-цвет, до-стоп
);  

Синтаксис похож на линейный градиент, то тут еще добавилась форма и размер. Форма бывает двух видов — ellipse и circle, по умолчанию значение: ellipse. Значение размера может принимать одно из шести значений.

• closest-side — Ближайшая сторона. Градиент распространяется от центра по направлению к ближайшей стороне элемента (для circle), или к обоим, горизонтальной и вертикальной сторонам (для ellipse).
• closest-corner — Ближайший угол. Размер градиента таков, что он распространяется от центра к ближайшему углу элемента.
• farthest-side — Самая дальняя сторона. Градиент распространяется от центра по направлению к наиболее удаленной стороне элемента (для circle), или к обоим, горизонтальной и вертикальной, сторонам (для ellipse).
• farthest-corner — Самый дальний угол. Размер градиента таков, что он распространяется от центра к самому дальнему углу элемента.
• contain — тоже что и closest-side.
• cover — тоже что и farthest-corner.

background: radial-gradient(circle farthest-side,#000,#FFF,#000);

Онлайн-примеры

Дополнительная информация.

CSS-градиент для выпадающего меню:

Ниже представлено, как пример, выпадающее меню, которое использует только CSS3:  CSS-градиент, text-shadow, radius-border и box-shadow (никакого Javascript или изображений).

Ограничения Internet Explorer:

Фильтр градиента для Internet Explorer не поддерживает сolor-stop, gradient angle и radial gradient. Это означает, что Вы можете только определить горизонтальный или вертикальный линейный градиент с 2 цветами: StartColorStr и EndColorStr.

Полезные ссылки по теме:

Ultimate CSS Gradient Generator

CSS3 Gradient Generator

Заключение.

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

Перевод

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

Xamarin.

Forms Кисти: линейные градиенты — Xamarin

• 09/24/2020
• Чтение занимает 2 мин

В этой статье

загрузить пример Download the sample

LinearGradientBrushКласс является производным от GradientBrush класса и закрашивает область линейным градиентом, который смешивает два или более цвета вдоль линии, известной как ось градиента.The LinearGradientBrush class derives from the GradientBrush class, and paints an area with a linear gradient, which blends two or more colors along a line known as the gradient axis. GradientStop объекты используются для указания цветов в градиенте и их позиций.GradientStop objects are used to specify the colors in the gradient and their positions. Дополнительные сведения об GradientStop объектах см. в разделе Xamarin.Forms кисти: градиенты.For more information about GradientStop objects, see Xamarin.Forms Brushes: Gradients.

Класс LinearGradientBrush определяет следующие свойства:The LinearGradientBrush class defines the following properties:

• StartPointТип Point , который представляет начальные двухмерные координаты линейного градиента.StartPoint, of type Point, which represents the starting two-dimensional coordinates of the linear gradient. Значение этого свойства по умолчанию равно (0, 0).The default value of this property is (0,0).
• EndPointТип Point , который представляет завершающие двухмерные координаты линейного градиента.EndPoint, of type Point, which represents the ending two-dimensional coordinates of the linear gradient. Значение этого свойства по умолчанию равно (1, 1). The default value of this property is (1,1).

Эти свойства поддерживаются объектами BindableProperty, то есть эти свойства можно указывать в качестве целевых для привязки и стилизации данных.These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

LinearGradientBrushКласс также является IsEmpty методом, возвращающим объект bool , который представляет, назначена ли кисть какие-либо GradientStop объекты.The LinearGradientBrush class also as an IsEmpty method that returns a bool that represents whether the brush has been assigned any GradientStop objects.

Примечание

Линейные градиенты также можно создавать с помощью linear-gradient() функции CSS.Linear gradients can also be created with the linear-gradient() CSS function.

Создание LinearGradientBrushCreate a LinearGradientBrush

Ограничители градиента кисти линейного градиента располагаются вдоль оси градиента. A linear gradient brush’s gradient stops are positioned along the gradient axis. Ориентацию и размер оси градиента можно изменить с помощью StartPoint свойств кисти и EndPoint .The orientation and size of the gradient axis can be changed using the brush’s StartPoint and EndPoint properties. Управляя этими свойствами, можно создавать горизонтальные, вертикальные и диагональные градиенты, отменять направление градиента, уплотнение распределения градиента и т. д.By manipulating these properties, you can create horizontal, vertical, and diagonal gradients, reverse the gradient direction, condense the gradient spread, and more.

StartPointСвойства и EndPoint задаются относительно закрашиваемой области.The StartPoint and EndPoint properties are relative to the area being painted. (0, 0) представляет верхний левый угол закрашиваемой области, а (1, 1) — нижний правый угол закрашиваемой области. (0,0) represents the top-left corner of the area being painted, and (1,1) represents the bottom-right corner of the area being painted. На следующей диаграмме показана ось градиента для кисти по диагонали линейного градиента.The following diagram shows the gradient axis for a diagonal linear gradient brush:

На этой схеме пунктирная линия показывает ось градиента, которая выделяет путь интерполяции градиента от начальной точки к конечной точке.In this diagram, the dashed line shows the gradient axis, which highlights the interpolation path of the gradient from the start point to the end point.

Создание горизонтального линейного градиентаCreate a horizontal linear gradient

Чтобы создать горизонтальный линейный градиент, создайте LinearGradientBrush объект и установите его StartPoint в значение (0, 0) и задайте значение EndPoint (1, 0).To create a horizontal linear gradient, create a LinearGradientBrush object and set its StartPoint to (0,0) and its EndPoint to (1,0). Затем добавьте в коллекцию два или более GradientStop объектов, LinearGradientBrush.GradientStops которые определяют цвета градиента и их позиции.Then, add two or more GradientStop objects to the LinearGradientBrush.GradientStops collection, that specify the colors in the gradient and their positions.

В следующем примере XAML показан горизонтальный LinearGradientBrush , заданный как элемент Background Frame :The following XAML example shows a horizontal LinearGradientBrush that’s set as the Background of a Frame:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- StartPoint defaults to (0,0) -->
        <LinearGradientBrush EndPoint="1,0">
            <GradientStop Color="Yellow"
                          Offset="0. 1" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Frame.Background>
</Frame>  

В этом примере фон Frame закрашивается с LinearGradientBrush , который выполняет интерполяцию от желтой к зеленой по горизонтали:In this example, the background of the Frame is painted with a LinearGradientBrush that interpolates from yellow to green horizontally:

Создание вертикального линейного градиентаCreate a vertical linear gradient

Чтобы создать Вертикальный линейный градиент, создайте LinearGradientBrush объект и задайте для его свойства StartPoint значение (0, 0) и значение EndPoint (0, 1).To create a vertical linear gradient, create a LinearGradientBrush object and set its StartPoint to (0,0) and its EndPoint to (0,1). Затем добавьте в коллекцию два или более GradientStop объектов, LinearGradientBrush. GradientStops которые определяют цвета градиента и их позиции.Then, add two or more GradientStop objects to the LinearGradientBrush.GradientStops collection, that specify the colors in the gradient and their positions.

В следующем примере XAML показан вертикальный LinearGradientBrush , заданный в качестве Background объекта Frame :The following XAML example shows a vertical LinearGradientBrush that’s set as the Background of a Frame:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- StartPoint defaults to (0,0) -->    
        <LinearGradientBrush EndPoint="0,1">
            <GradientStop Color="Yellow"
                          Offset="0.1" />
            <GradientStop Color="Green"
                          Offset="1. 0" />
        </LinearGradientBrush>
    </Frame.Background>
</Frame>

В этом примере фон Frame закрашивается с LinearGradientBrush , который выполняет интерполяцию от желтого к зеленому по вертикали:In this example, the background of the Frame is painted with a LinearGradientBrush that interpolates from yellow to green vertically:

Создание диагонального линейного градиентаCreate a diagonal linear gradient

Чтобы создать диагональный линейный градиент, создайте LinearGradientBrush объект и задайте для него значение StartPoint (0, 0), а в качестве значения EndPoint (1, 1).To create a diagonal linear gradient, create a LinearGradientBrush object and set its StartPoint to (0,0) and its EndPoint to (1,1). Затем добавьте в коллекцию два или более GradientStop объектов, LinearGradientBrush. GradientStops которые определяют цвета градиента и их позиции.Then, add two or more GradientStop objects to the LinearGradientBrush.GradientStops collection, that specify the colors in the gradient and their positions.

В следующем примере XAML показана диагональная LinearGradientBrush , которая задается в качестве значения Background Frame :The following XAML example shows a diagonal LinearGradientBrush that’s set as the Background of a Frame:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- StartPoint defaults to (0,0)      
             Endpoint defaults to (1,1) -->
        <LinearGradientBrush>
            <GradientStop Color="Yellow"
                          Offset="0.1" />
            <GradientStop Color="Green"
                          Offset="1. 0" />
        </LinearGradientBrush>
    </Frame.Background>
</Frame>

В этом примере фон Frame закрашивается с LinearGradientBrush , который выполняет интерполяцию от желтого к зеленому:In this example, the background of the Frame is painted with a LinearGradientBrush that interpolates from yellow to green diagonally:

Использование градиентов CSS — CSS: каскадные таблицы стилей

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

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

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

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

Базовый линейный градиент

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

  .simple-linear {
  фон: линейно-градиентный (синий, розовый);
}  

Изменение направления

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

  .horizontal-gradient {
  фон: линейно-градиентный (вправо, синий, розовый);
}
  

Диагональные градиенты

Можно даже сделать градиент по диагонали, от угла к углу.

 .diagonal-gradient {
  фон: линейно-градиентный (справа внизу, синий, розовый);
}
  

Использование углов

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

  .angled-gradient {
  фон: линейно-градиентный (70град, синий, розовый);
}
  

При использовании угла 0deg создает вертикальный градиент снизу вверх, 90deg создает горизонтальный градиент слева направо и так далее по часовой стрелке. Отрицательные углы идут против часовой стрелки.

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

Использование более двух цветов

Вам не нужно ограничивать себя двумя цветами — вы можете использовать их сколько угодно! По умолчанию цвета равномерно распределены по градиенту.

  .auto-spaced-linear-gradient {
  фон: линейно-градиентный (красный, желтый, синий, оранжевый);
}
  

Позиционирование цветовых остановок

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

 . Многоцветно-линейный {
   фон: linear-gradient (слева, салатовый 28px, красный 77%, голубой);
}
  

Создание жестких линий

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

  . striped {
   фон: линейный градиент (слева внизу, голубой 50%, бледно-золотой 50%);
}  

Градиентные подсказки

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

  .color-hint {
  фон: линейно-градиентный (синий, 10%, розовый);
}
.simple-linear {
  фон: линейно-градиентный (синий, розовый);
}  

Создание цветных полос и полос

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

  .multiposition-stop {
   фон: linear-gradient (слева,
       лайм 20%, красный 30%, красный 45%, голубой 55%, голубой 70%, желтый 80%);
   фон: linear-gradient (слева,
       лайм 20%, красный 30% 45%, голубой 55% 70%, желтый 80%);
}
.multiposition-stop2 {
   фон: linear-gradient (слева,
      лайм 25%, красный 25%, красный 50%, голубой 50%, голубой 75%, желтый 75%);
   фон: linear-gradient (слева,
      лайм 25%, красный 25% 50%, голубой 50% 75%, желтый 75%);
}
  

В первом примере, приведенном выше, лайм переходит от отметки 0%, которая подразумевается, к отметке 20%, переходит от лайма к красному в течение следующих 10% ширины градиента, достигает сплошного красного цвета на 30%. отметка и остается сплошным красным до 45% градиента, где он исчезает до голубого, становится полностью голубым для 15% градиента и так далее.

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

В обоих примерах градиент записывается дважды: первый — это метод CSS изображений уровня 3 для повторения цвета для каждой остановки, а второй пример — это метод множественной остановки цвета изображений CSS уровня 4, включающий в себя две длины цветовых стопов в объявление linear-color-stop.

Управление продвижением градиента

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

  .colorhint-gradient {
  фон: линейно-градиентный (вверх, черный, 20%, голубой);
}
.regular-progression {
  фон: линейно-градиентный (вверх, черный, голубой);
}
  

Наложение градиентов

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

  .layered-image {
  фон: линейно-градиентный (вправо, прозрачный, туманная роза),
      URL ("https://mdn.mozillademos.org/files/15525/critters.png");
}
  

Составные градиенты

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

  .stacked-linear {
  задний план:
      линейный градиент (217deg, rgba (255,0,0 ,.8), ргба (255,0,0,0) 70,71%),
      линейный градиент (127 градусов, rgba (0,255,0, 0,8), rgba (0,255,0,0) 70,71%),
      линейный градиент (336deg, rgba (0,0,255, 0,8), rgba (0,0,255,0) 70,71%);
}
  

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

Базовый радиальный градиент

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

  .просто-радиальный {
  фон: радиально-градиентный (красный, синий);
}
  

Размещение радиальных ограничителей цвета

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

  .radial-gradient {
  фон: радиальный градиент (красный 10px, желтый 30%, # 1e90ff 50%);
}
  

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

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

  .radial-gradient {
  фон: радиальный градиент (при 0% 30%, красный 10 пикселей, желтый 30%, # 1e90ff 50%);
}
  

Размер радиальных градиентов

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

Пример: ближайшая сторона для эллипсов

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

  .radial-ellipse-side {
  фон: радиальный градиент (ближайшая сторона эллипса,
      красный, желтый 10%, # 1e90ff 50%, бежевый);
}
  

Пример: самый дальний угол для эллипсов

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

  .radial-ellipse-far {
  фон: радиальный градиент (самый дальний угол эллипса на 90% 90%,
      красный, желтый 10%, # 1e90ff 50%, бежевый);
}
  

Пример: ближайшая сторона для окружностей

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

  .radial-circle-close {
  фон: радиальный градиент (круг с ближайшей стороны на 25% 75%,
      красный, желтый 10%, # 1e90ff 50%, бежевый);
}
  

Пример: длина или процент для эллипсов

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

  .radial-ellipse-size {
   фон: радиальный градиент (эллипс 50% 50 пикселей,
      красный, желтый 10%, # 1e90ff 50%, бежевый);
}
  

Пример: длина окружности

Для кругов размер может быть задан как <длина>, которая является размером круга.

  .radial-circle-size {
  фон: радиальный градиент (круг 50 пикселей,
      красный, желтый 10%, # 1e90ff 50%, бежевый);
}
  

Наборные радиальные градиенты

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

  .stacked-radial {
  задний план:
      радиальный градиент (круг на 50% 0,
        rgba (255,0,0, .5),
        ргба (255,0,0,0) 70,71%),
      радиальный градиент (круг на 6,7% 75%,
        rgba (0,0,255, .5),
        ргба (0,0,255,0) 70,71%),
      радиальный градиент (круг на 93,3% 75%,
        rgba (0,255,0, . 5),
        rgba (0,255,0,0) 70,71%) бежевый;
  радиус границы: 50%;
}
  

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

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

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

Основной конический градиент

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

 .простой конический {
  фон: конический градиент (красный, синий);
}
  

Позиционирование конического центра

Подобно радиальным градиентам, вы можете расположить центр конического градиента с ключевыми терминами, процентными или абсолютными длинами с ключевым словом «at».

  .conic-gradient {
  фон: конический градиент (при 0% 30%, красный 10%, желтый 30%, # 1e90ff 50%);
}
  

Изменение угла

По умолчанию заданные вами точки разного цвета расположены на равном расстоянии по окружности.Вы можете расположить начальный угол конического градиента, используя ключевое слово «from» в начале, за которым следует угол или длина, и вы можете указать различные положения для цветовых ограничителей, включив после них угол или длину.

  .conic-gradient {
  фон: конический градиент (от 45 градусов, красный, оранжевый 50%, желтый 85%, зеленый);
}
  

Функции linear-gradient () , radial-gradient () и conic-gradient () не поддерживают автоматически повторяющиеся остановки цвета.Однако доступны функции repeat-linear-gradient () , repeat-radial-gradient () и repeat-conic-gradient () , которые предлагают эту функциональность.

Размер повторяющейся линии градиента или дуги — это длина между первым значением остановки цвета и значением длины последней границы цвета. Если первая контрольная точка цвета имеет только цвет и не имеет длины остановки цвета, значение по умолчанию равно 0. Если последняя контрольная точка цвета имеет только цвет и не имеет длины остановки цвета, значение по умолчанию равно 100%.Если ни один из них не объявлен, линия градиента составляет 100%, что означает, что линейный и конический градиенты не будут повторяться, а радиальный градиент будет повторяться только в том случае, если радиус градиента меньше, чем длина между центром градиента и самым дальним углом. Если объявлена ​​первая граница цвета и значение больше 0, градиент будет повторяться, поскольку размер линии или дуги — это разница между первой и последней границей цвета меньше 100% или 360 градусов.

Повторяющиеся линейные градиенты

В этом примере используется repeat-linear-gradient () для создания градиента, который многократно повторяется по прямой линии.Цвета снова чередуются по мере повторения градиента. В этом случае линия градиента имеет длину 10 пикселей.

 . Повторяюще-линейный {
  фон: повторяющийся линейный градиент (-45 градусов, красный, красный 5 пикселей, синий 5 пикселей, синий 10 пикселей);
}
  

Многократные повторяющиеся линейные градиенты

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

В этом случае линии градиента имеют длину 300 пикселей, 230 пикселей и 300 пикселей.

 . Многоповторно-линейный {
  задний план:
      повторяющийся линейный градиент (190deg, rgba (255, 0, 0, 0,5) 40 пикселей,
        rgba (255, 153, 0, 0,5) 80 пикселей, rgba (255, 255, 0, 0,5) 120 пикселей,
        rgba (0, 255, 0, 0,5) 160 пикселей, rgba (0, 0, 255, 0,5) 200 пикселей,
        rgba (75, 0, 130, 0,5) 240 пикселей, rgba (238, 130, 238, 0,5) 280 пикселей,
        rgba (255, 0, 0, 0.5) 300 пикселей),
      повторяющийся линейный градиент (-190deg, rgba (255, 0, 0, 0.5) 30 пикселей,
        rgba (255, 153, 0, 0,5) 60 пикселей, rgba (255, 255, 0, 0,5) 90 пикселей,
        rgba (0, 255, 0, 0,5) 120 пикселей, rgba (0, 0, 255, 0,5) 150 пикселей,
        rgba (75, 0, 130, 0,5) 180 пикселей, rgba (238, 130, 238, 0,5) 210 пикселей,
        rgba (255, 0, 0, 0.5) 230 пикселей),
      повторяющийся линейный градиент (23 градуса, красный 50 пикселей, оранжевый 100 пикселей,
        желтый 150 пикселей, зеленый 200 пикселей, синий 250 пикселей,
        индиго 300 пикселей, фиолетовый 350 пикселей, красный 370 пикселей);
}
  

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

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

  .plaid-gradient {
  задний план:
      повторяющийся линейный градиент (90 градусов, прозрачный, прозрачный 50 пикселей,
        rgba (255, 127, 0, 0,25) 50 пикселей, rgba (255, 127, 0, 0,25) 56 пикселей,
        прозрачный 56px, прозрачный 63px,
        rgba (255, 127, 0, 0,25) 63 пикселя, rgba (255, 127, 0, 0,25) 69 пикселей,
        прозрачный 69px, прозрачный 116px,
        rgba (255, 206, 0, 0.25) 116 пикселей, rgba (255, 206, 0, 0,25) 166 пикселей),
      повторяющийся линейный градиент (0 градусов, прозрачный, прозрачный 50 пикселей,
        rgba (255, 127, 0, 0,25) 50 пикселей, rgba (255, 127, 0, 0,25) 56 пикселей,
        прозрачный 56px, прозрачный 63px,
        rgba (255, 127, 0, 0,25) 63 пикселя, rgba (255, 127, 0, 0,25) 69 пикселей,
        прозрачный 69px, прозрачный 116px,
        rgba (255, 206, 0, 0,25) 116 пикселей, rgba (255, 206, 0, 0,25) 166 пикселей),
      повторяющийся линейный градиент (-45 градусов, прозрачный, прозрачный 5 пикселей,
        rgba (143, 77, 63, 0.25) 5px, rgba (143, 77, 63, 0,25) 10px),
      повторяющийся линейный градиент (45 градусов, прозрачный, прозрачный 5 пикселей,
        rgba (143, 77, 63, 0,25) 5 пикселей, rgba (143, 77, 63, 0,25) 10 пикселей);

  задний план:
      повторяющийся линейный градиент (90 градусов, прозрачный 0 50 пикселей,
        rgba (255, 127, 0, 0,25) 50 пикселей 56 пикселей,
        прозрачный 56px 63px,
        rgba (255, 127, 0, 0,25) 63 пикс. 69 пикс.,
        прозрачный 69px 116px,
        rgba (255, 206, 0, 0,25) 116 пикселей 166 пикселей),
      повторяющийся линейный градиент (0 градусов, прозрачный 0 50 пикселей,
        rgba (255, 127, 0, 0.25) 50px 56px,
        прозрачный 56px 63px,
        rgba (255, 127, 0, 0,25) 63 пикс. 69 пикс.,
        прозрачный 69px 116px,
        rgba (255, 206, 0, 0,25) 116 пикселей 166 пикселей),
      повторяющийся линейный градиент (-45 градусов, прозрачный 0 5 пикселей,
        rgba (143, 77, 63, 0,25) 5 пикселей 10 пикселей),
      повторяющийся линейный градиент (45 градусов, прозрачный 0 5 пикселей,
        rgba (143, 77, 63, 0,25) 5 пикселей 10 пикселей);
}
  

Повторяющиеся радиальные градиенты

В этом примере используется repeat-radial-gradient () для создания градиента, который многократно излучается из центральной точки.Цвета меняются снова и снова по мере повторения градиента.

 . Повторно-радиальный {
  фон: повторяющийся радиальный градиент (черный, черный 5 пикселей, белый 5 пикселей, белый 10 пикселей);
}
  

Многократные повторяющиеся радиальные градиенты

 . Многоцелевые {
  задний план:
      повторяющийся радиальный градиент (эллипс на 80% 50%, rgba (0,0,0,0,5),
        rgba (0,0,0,0.5) 15 пикселей, rgba (255,255,255,0,5) 15 пикселей,
        rgba (255,255,255,0,5) 30px) слева вверху без повтора,
      повторяющийся радиальный градиент (эллипс при 20% 50%, rgba (0,0,0,0.5),
        rgba (0,0,0,0.5) 10 пикселей, rgba (255,255,255,0,5) 10 пикселей,
        rgba (255,255,255,0.5) 20px) верхний левый без повтора желтый;
  размер фона: 200 пикселей 200 пикселей, 150 пикселей 150 пикселей;
}
  

repeat-linear-gradient () — CSS: каскадные таблицы стилей

Функция CSS repeat-linear-gradient () создает изображение, состоящее из повторяющихся линейных градиентов. Он похож на linear-gradient () и принимает те же аргументы, но повторяет остановку цвета бесконечно во всех направлениях, чтобы покрыть весь контейнер.Результатом функции является объект с типом данных <градиент> , который является особым типом .

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

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

Поскольку <градиент> с относятся к типу данных <изображение> , их можно использовать только там, где можно использовать <изображение> с. По этой причине repeat-linear-gradient () не будет работать с background-color и другими свойствами, которые используют тип данных .

 
повторяющийся линейный градиент (45 градусов, синий, красный 33,3%);


повторяющийся линейный градиент (слева вверху, синий, красный 20 пикселей);


повторяющийся линейный градиент (0 градусов, синий, зеленый 40%, красный);


повторяющийся линейный градиент (вправо, красный 0%, зеленый 10%, красный 20%);
  

Значения

<сторона или угол>

Положение начальной точки градиентной линии. Если указано, он состоит из слов с по и до двух ключевых слов: одно указывает горизонтальную сторону ( слева или справа ), а другое — вертикальную сторону ( верхний или нижний ).Порядок боковых ключевых слов не имеет значения. Если не указано, по умолчанию используется значение от до нижнего .

Значения сверху , снизу , слева и справа эквивалентны углам 0 градусов , 180 градусов , 270 градусов и 90 градусов соответственно. Остальные значения переводятся в угол.

<угол>

Угол направления линии градиента.Значение 0deg эквивалентно до ; увеличивающиеся значения вращаются оттуда по часовой стрелке.

Значение <цвет> цветовой остановки, за которым следуют одна или две необязательные позиции остановки (каждая из которых является либо <процент> , либо <длина> по оси градиента). Процент 0% , или длина 0 , представляет начало градиента; значение 100% составляет 100% от размера изображения, что означает, что градиент не будет повторяться.

<цвет-подсказка>

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

Формальный синтаксис

  повторяющийся-линейный-градиент ([<угол> | в <сторону-или-угол>,]? <Список-остановок-цветов>)
                            \ --------------------------------- / \ -------------- - /
                              Определение градиентной линии Список цветовых точек

где  = [left | справа] || [наверх | Нижний]
  и  = [ [, ? ]? ] #, <линейный-цвет-остановка>
  и  =  []?
  и <длина цветовой остановки> = [<процент> | <длина>] {1,2}
  и <цвет-подсказка> = [<процент> | <длина>]
  

Полоски зебры

  кузов {
  фоновое изображение: повторяющийся линейный градиент (-45 градусов,
      прозрачный,
      прозрачный 20px,
      черный 20px,
      черный 40px);
  
  фоновое изображение: повторяющийся линейный градиент (-45 градусов,
      прозрачный 0 20px,
      черный 20px 40px);
}
  

Десять повторяющихся горизонтальных стержней

  корпус {
  фоновое изображение: повторяющийся линейный градиент (вниз,
      RGB (26 198 204),
      RGB (26 198 204) 7%,
      rgb (100,100,100) 10%);
}
  

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

Таблицы BCD загружаются только в браузере

radial-gradient () — CSS: Cascading Style Sheets

Функция CSS radial-gradient () создает изображение, состоящее из постепенного перехода между двумя или более цветами, исходящими из исходной точки. Его форма может быть кругом или эллипсом. Результатом функции является объект с типом данных <градиент> , который является особым типом .

 
радиальный градиент (круг в центре, красный 0, синий, зеленый 100%)  

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

Значения

<позиция>

Положение градиента интерпретируется так же, как background-position или transform-origin . Если не указано, по умолчанию используется , центр .

<конечная-форма>

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

<размер>

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

Круглый и эллиптический градиенты принимают следующие ключевые слова для своего <размер> :

Ключевое слово	Описание
ближайшая сторона	Конечная форма градиента соответствует стороне прямоугольника, ближайшей к его центру (для кругов), или соответствует как вертикальной, так и горизонтальной сторонам, ближайшим к центру (для эллипсов).
ближайший угол	Форма окончания градиента имеет размер так, чтобы он точно совпадал с ближайшим от центра углом прямоугольника.
дальняя сторона	Аналогично ближайшей стороны, за исключением того, что размер конечной формы соответствует стороне коробки, наиболее удаленной от его центра (или вертикальной и горизонтальной сторонам).
дальний угол	Значение по умолчанию, конечная форма градиента имеет размер так, чтобы он точно совпадал с самым дальним углом прямоугольника от его центра.

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

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

Значение <цвет> для цветовой остановки, за которым следуют одна или две необязательные позиции остановки (либо <процент> , либо <длина> по оси градиента). Процент 0% , или длина 0 , представляет центр градиента; значение 100% представляет собой пересечение конечной формы с виртуальным лучом градиента.Промежуточные значения в процентах линейно расположены на луче градиента. Включение двух стоп-позиций эквивалентно объявлению двух цветных стопов одного цвета в этих двух позициях.

<цвет-подсказка>

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

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

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

Поскольку <градиент> с относятся к типу данных <изображение> , их можно использовать только там, где можно использовать <изображение> с.По этой причине radial-gradient () не будет работать с background-color и другими свойствами, которые используют тип данных .

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

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

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

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

Простой градиент

  .radial-gradient {
  background-image: radial-gradient (голубой 0%, прозрачный 20%, лосось 40%);
}  

Нецентрированный градиент

 .radial-gradient {
  background-image: radial-gradient (самый дальний угол 40 пикселей 40 пикселей,
      # f35 0%, # 43e 100%);
}  

Больше примеров радиального градиента

Таблицы BCD загружаются только в браузере

Примечания Quantum CSS

В Gecko была давняя ошибка, из-за которой радиальные градиенты, такие как , радиальный градиент (золотой круг, красный) работали, даже хотя они не должны из-за отсутствия запятой между кругом и золотом . Кроме того, выражения calc () были отклонены, что приводило к недопустимому значению, при использовании в качестве компонента радиуса функции radial-gradient () (ошибка 1376019).Новый параллельный CSS-движок Firefox (также известный как Quantum CSS или Stylo, выпущенный в Firefox 57) исправил эти ошибки.

Добавление градиента к тексту с помощью CSS

Градиенты CSS

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

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

  кузов {
  фон: linear-gradient (справа, # ee0979, # ff6a00);
}  

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

Обманом браузера для применения градиента к тексту

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

  h2 {
  font-size: 6rem;
  фон: линейно-градиентный (45deg, # f3ec78, # af4261);
}  

Начните так же, как и раньше, применив градиент к элементу body. Единственное изменение, которое мы сделали до сих пор, — это применение градиента к тегу h2. После этого вы увидите фон позади текста, но теперь он является частью элемента h2.Цвет текста по-прежнему будет черным.

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

  h2 {
  font-size: 6rem;
  фон: линейно-градиентный (45deg, # f3ec78, # af4261);
  фон-клип: текст; -webkit-background-clip: текст; -moz-background-clip: текст; -moz-text-fill-color: прозрачный; -webkit-text-fill-color: прозрачный;}  

Это изменение добавляет к правилу CSS два свойства.Это background-clip и text-fill-color . Установка background-clip для текста скроет фон, который не пересекает текст, а установка text-fill-color на прозрачный сделает текст прозрачным.

Префиксы поставщиков -moz и -webkit необходимы для правильной работы обоих этих правил, поскольку поддержка браузеров все еще нова, и есть несколько ошибок при их использовании с градиентами. Для получения дополнительной информации об ограничениях на использование этих правил посетите caniuse.com

Фиксация шкалы градиента для соответствия тексту.

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

Чтобы исправить это, вы можете настроить стиль тега h2 так, чтобы ограничивающая рамка для элемента была такой же, как пространство, занимаемое текстом.Один из способов сделать это — сделать свойство display для тега h2 встроенным блоком .

  h2 {
  font-size: 6rem;
  фон: линейно-градиентный (45deg, # f3ec78, # af4261);
  фон-клип: текст;
  -webkit-background-clip: текст;
  -moz-background-clip: текст;
  -moz-text-fill-color: прозрачный;
  -webkit-text-fill-color: прозрачный;
  display: inline-block}  

Добавление этого должно сделать градиент немного лучше. Имейте в виду, что это изменит поведение тега h2.Он больше не будет занимать все горизонтальное пространство в своем ряду. Если вам это нужно, вы можете добавить вокруг него еще один div со 100% шириной или вы можете попробовать использовать свойство background-size вместо display, чтобы настроить внешний вид вашего градиента.

Чтобы увидеть рабочую демонстрацию всего, что мы только что рассмотрели, есть песочница кода, иллюстрирующая 3 этапа процесса. Попробуйте применить разные градиенты и объединить этот трюк с анимацией CSS, чтобы создать свой собственный эффект. Чтобы попробовать классные градиенты, посетите сайт uiGradients

.

Как использовать фоновые градиенты CSS в электронных письмах HTML | Maizzle

Многие почтовые клиенты поддерживают фоновые градиенты CSS.

В этом руководстве вы узнаете, как использовать плагин tailwindcss-gradient для добавления красочных градиентов в ваши HTML-шаблоны электронной почты. Мы также расскажем, как добавить резервную копию, чтобы мы также отображали градиенты в Outlook, используя VML .

Начало работы

Начнем с создания нового проекта Maizzle.

Откройте окно терминала и выполните команду new :

  maizzle new  

Следуйте инструкциям, используя example-gradient в качестве имени папки.

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

Во-первых, cd в каталог проекта:

  cd example-gradient  

Затем установите плагин с помощью NPM:

  npm install tailwindcss-gradient  

По завершении откройте пример example- градиенты в вашем редакторе.

CSS Gradients

Давайте настроим и используем tailwindcss-gradient с Tailwind CSS.

Конфигурация Tailwind

Нам нужно указать Tailwind использовать плагин. Отредактируйте tailwind.config.js и require () плагин внутри плагинов : [] массив :

 
module.exports = {
  плагины: [
    require ('tailwindcss-gradient'),
  ]
}  

Затем нам нужно определить, какие градиенты мы хотим сгенерировать в зависимости от того, какие цвета. Мы делаем это в теме : {} ключ из tailwind.config.js .

Например, зарегистрируем линейные градиенты на основе существующей цветовой палитры:

 
module.exports = {
  тема: {
    linearGradientColors: theme => theme ('цвета'),
  }
}  

Если вы запустите maizzle build и посмотрите на один из шаблонов в build_local , вы увидите, что размер файла почти удвоился, а в нем много служебных классов градиента фонового изображения:

  .bg -gradient-t-transparent {
  фоновое изображение: линейный градиент (вверх, rgba (0, 0, 0, 0), прозрачный)! important;
}
  

Причина такого количества классов в том, что tailwindcss-gradient выводит утилиты для всех комбинаций цветов, определенных в нашей конфигурации.

Мы, конечно, можем изменить это и сгенерировать только несколько градиентов:

 
module.exports = {
  тема: {
    linearGradientColors: {
      'красный': '# f00',
      'красно-синий': ['# f00', '# 00f'],
      'красный-зеленый-синий': ['# f00', '# 0f0', '# 00f'],
      'черный-белый-с остановками': ['# 000', '# 000 45%', '#fff 55%', '#fff'],
    }
  }
}  

Снова запустите maizzle build , и теперь вы должны увидеть только 64 сгенерированных служебных класса.

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

Использование в HTML

Просто добавьте служебный класс к элементу, который поддерживает background-image CSS.

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

Outlook VML

Outlook для Windows не поддерживает градиенты CSS, но мы можем использовать VML .

Добавьте сразу после элемента с классом градиента CSS:

  

  

    

      
      [здесь ваш наложенный HTML]
      
    
  
  

Как видите, вам нужно установить фиксированную ширину для элемента — это рекомендуется вместо использования mso-width-percent: 1000; , так как он довольно глючный (особенно в Outlook 2013).

Ширина элемента должна соответствовать ширине его родительского элемента (в нашем случае ).

Основной градиент

Мы также можем добавить градиент к тексту электронного письма — включая поддержку Outlook.

Для этого мы:

1. создаем
   , который обертывает наш шаблон: он будет использоваться в качестве запасного цвета сплошного фона.
2. поместим код VML непосредственно внутри этого div, в основном обертывая весь наш шаблон. Обратите внимание, как мы используем мсо-ширины-процент: 1000; вместо фиксированной ширины на

Вот пример:

  

  
  <таблица>
    
      
        
      
    
  
  
  

Оба примера можно увидеть в репозитории проекта ↗

Избегайте встраивания

Большинство почтовых клиентов, поддерживающих градиенты CSS, также поддерживают запросы @media .

Мы можем зарегистрировать точку останова screen , чтобы Juice не встраивал наш градиент:

 
module.exports = {
  тема: {
    screen: {
      экран: {raw: 'screen'},
      sm: {max: '600px'},
    }
  }
}  

Затем мы можем написать служебный класс следующим образом:

Ресурсы

linear-gradient — файлы CSS 3

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

Совместимость

-webkit-linear-gradient Safari 5.1+ iOS 5+ Android 4+ Blackberry 10+ IE Mobile 10+
linear-gradient Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

Не поддерживается Internet Explorer до версии 10 и Opera Mini. Для получения подробной информации о совместимости посетите caniuse.com.

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

Firefox 16 + Safari 5.1 + Chrome 26 + Internet Explorer 10 + Opera 12.1+
iOS 5 + Android 4 + Blackberry 10 + IE Mobile 10+

Общее описание

Несколько градиентов можно назначить через запятую. По умолчанию градиенты заполняют весь фон. Для мозаичных градиентов см. Повторяющийся линейный градиент. Возможны значения rgba и transparent для всей информации о цвете.

фон : линейный градиент (1 слева, 2 красных, 3 синих 4 30%, 5 зеленых)

1. Необязательно.Начальная точка градиента, определяющая прямую линию, по которой градиент проходит до конечной точки. Применяются общие значения из свойства background-position. В этом случае left определяет градиент, идущий слева направо, left top будет диагональным градиентом, идущим от верхнего левого угла к нижнему правому. Также может быть углом, при котором 0 градусов указывает вправо, 90 градусов — вверх, а -45 градусов — от верхнего левого угла до нижнего правого. По умолчанию градиент сверху вниз (вверху).
2. Начальный цвет (первая остановка цвета).Также может быть усилено положением остановки для перемещения его положения на оси градиента (например, на 4).
3. Необязательно. Цветной стоп. В этом случае градиент не просто переходит от красного (2) к зеленому (5), а усиливается синей полосой цвета посередине. Возможны несколько цветовых остановок (возможно, усиленных положением остановки, например, 4), разделенных запятыми.
4. Необязательно. Остановить позицию. Определяет положение границы цвета на оси градиента. В этом случае синий устанавливается на 30% вместо 50% (что было бы естественным поведением).Также может быть значение длины (например, 20 пикселей).
5. Конечный цвет (последняя остановка цвета). Также может быть продлен стоп-позицией (например, в позиции 4).

Примеры

Диагональный градиент с несколькими цветовыми ограничителями

фон: линейный градиент (1225 градусов, 2 красных, 3 зеленых 20%, 4 желтых 70%, 5 черных)

1. Начальная точка. Градиент начинается в верхнем правом углу и продолжается до нижнего левого угла. То же, что и -135град.
2. Начальный цвет красный.
3. Цветной стоп.Цвет зеленый на 20% по оси градиента (вместо 33%, что было бы его естественным положением).
4. Цветной стоп. Цвет желтый на 70% по оси градиента (вместо 66%).
5. Конечный цвет белый.

Угловой градиент с только цветными ограничителями

фон: линейный градиент (1 105 градусов, 2 черных 20%, 3 пурпурных 80%)

1. Начальная точка. Уклон имеет угол 105 градусов.
2. Цветной стоп. Начальный цвет черного перемещается на 20% по оси градиента (вместо 0%).
3. Цветной стоп. Конечный цвет пурпурного перемещается на 80% по оси градиента (вместо 100%).

Дополнительная литература

Для получения дополнительной информации см. Сайт W3C (новый синтаксис), сайт Safari и сайт MDN (включая информацию о совместимости для более старых версий браузеров).

---

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

Совместимость

-webkit-radial-gradient Safari 5.1+ iOS 5+ Android 4+ Blackberry 10+ IE Mobile 10+
радиально-градиентный Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

Не поддерживается Internet Explorer до версии 10 и Opera Mini. Для получения подробной информации о совместимости посетите caniuse.com.

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

Firefox 16 + Safari 5.1 + Chrome 26 + Internet Explorer 10 + Opera 12.1+
iOS 5 + Android 4 + Blackberry 10 + IE Mobile 10+

Общее описание

Несколько градиентов можно назначить через запятую.По умолчанию градиенты заполняют весь фон. Для мозаичных градиентов см. Repeating-Radial-gradient. Возможны значения rgba и transparent для всей информации о цвете.

фон: радиальный градиент (1 60 пикселей 45 пикселей, 2 круга 3 ближайшей стороны, 4 красных, 5 синих 6 60%, 7 зеленых)

1. Необязательно. Центр градиента. Применяются общие значения из свойства background-position. В этом случае 20px 40px определяет, что центр градиента находится на 20px от левой стороны содержащего поля и 40px от вершины.Также может быть процентное отношение к размерам коробки. По умолчанию центр, который также применяется ко второму значению, если задано только одно.
2. Необязательно. Форма градиента, в данном случае круглая. По умолчанию используется эллипс.
3. Необязательно. Размер градиента. Может быть определено ключевым словом или длиной объяснения. Доступные ключевые слова: ближайшая сторона, самый близкий угол, самая дальняя сторона, самый дальний угол. Смотри описание. Если указана длина, она относится к радиусам и должна состоять из двух значений: горизонтальной и вертикальной длины.По умолчанию самый дальний угол.
4. Начальный цвет (первая остановка цвета). Также может быть усилено положением остановки для перемещения его положения на луче градиента (например, на 6).
5. Необязательно. Цветной стоп. В этом случае градиент не просто переходит от красного (4) к зеленому (7), а усиливается синей полосой цвета посередине. Возможны несколько цветовых остановок (возможно, расширенных стоп-позицией, например, в 6), разделенных запятыми. ВНИМАНИЕ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
6. Необязательно. Остановить позицию. Определяет положение точки цвета на луче градиента.В этом случае синий устанавливается на 60% вместо 50% (что было бы естественным поведением). Также может быть значение длины (например, 20 пикселей).
7. Конечный цвет (последняя остановка цвета). Также может быть продлен стоп-позицией (например, 6).

Описание размера ключевых слов

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

1. ближайшая сторона: размер градиента задается таким образом, чтобы его внешняя форма соответствовала стороне рамки градиента, которая находится ближе всего к его центру.Если указан эллипс, стороны в обоих измерениях встречаются.
2. farthest-side: градиент имеет размер так, чтобы его внешняя форма соответствовала стороне рамки градиента, которая наиболее удалена от его центра. Если указан эллипс, стороны в обоих измерениях встречаются.
3. ближайший угол: градиент имеет размер так, чтобы его внешняя форма проходила через угол поля градиента, который находится ближе всего к его центру. Если указан эллипс, ему дается такое же соотношение сторон, как если бы была указана ближайшая сторона (1).
4. farthest-corner: градиент имеет размер так, чтобы его внешняя форма проходила через самый дальний от центра угол поля градиента (значение по умолчанию). Если указан эллипс, ему дается такое же соотношение сторон, как если бы была указана самая дальняя сторона (2).

Примеры

Круговой градиент, заканчивающийся в ближайшем углу

фон: радиальный градиент (1 60% 55%, 2 круга 3 ближайших угла, 4 красных, 5 зеленых 20%, 6 желтых 70%, 7 черных)

1. Центр градиента находится на 60% ширины прямоугольников по горизонтали и 55% от высоты по вертикали.
2. Круговой градиент.
3. Градиент имеет размер так, чтобы его внешняя форма проходила через ближайший угол рамки градиента.
4. Начальный цвет красный.
5. Цветной стоп. На градиентном луче зеленый цвет составляет 20% (вместо 33%, что было бы его естественным положением).
6. Цветной стоп. Цвет на градиентном луче желтый на 70% (вместо 66%).
7. Окончание цвета черный.

Эллиптический градиент, заканчивающийся на дальней стороне

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

фон: радиальный градиент (1 20 пикселей 40 пикселей, 2 крайние стороны, 3 белые 20%, 4 пурпурные)

1. Центр градиента находится на расстоянии 20 пикселей слева и 40 пикселей сверху.
2. Градиент подбирается таким образом, чтобы его внешняя форма соответствовала самым дальним сторонам.
3. Цветной стоп. Начальный цвет белого перемещается на 20% по оси градиента (вместо 0%).
4. Конечный цвет пурпурный.

Дополнительная литература

Для получения дополнительной информации см. Сайт W3C (новый синтаксис), сайт Safari и сайт MDN (включая информацию о совместимости для более старых версий браузеров).

---

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

Совместимость

-webkit-linear-gradient Safari 5.1+ iOS 5+ Android 4+ Blackberry 10+ IE Mobile 10+
linear-gradient Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

Не поддерживается Interent Explorer до версии 10 и Opera Mini.Для получения подробной информации о совместимости посетите caniuse.com.

Firefox 16 + Safari 5.1 + Chrome 26 + Internet Explorer 10 + Opera 12.1+
iOS 5 + Android 4 + Blackberry 10 + IE Mobile 10+

Общее описание

Для получения информации об общем синтаксисе см. Linear-gradient.

Примеры

Плавный градиент повторяется четыре раза

фон: повторяющийся линейный градиент (1 красный, 2 зеленых 18%, 3 синих 25%)

1. Начальный цвет красный.
2. Цветной стоп. Цвет зеленый на 18% по оси градиента (вместо 12,5%, что было бы его естественным положением).
3. Цветной стоп. Цвет синий на 25% по оси градиента. Положение последней остановки определяет, как часто градиент повторяется. Поскольку 25% составляет четверть 100%, градиент повторяется четыре раза.

Резкий переход градиента повторяется пять раз

фон: повторяющийся линейный градиент (1 красный, 2 красных 11 пикселя, 3 белых 11 пикселя, 4 белых 22 пикселя)

1. Начальный цвет красный.
2. Цветной стоп. Цвет красный на 11 пикселей по оси градиента.
3. Цветной стоп. Цвет белый на 11 пикселей по оси градиента. Поскольку два цвета установлены в одной позиции, они внезапно меняются, а не плавно переходят в розовый.
4. Цветной стоп. Цвет белый, 22 пикселя по оси градиента. Положение последней остановки определяет, как часто градиент повторяется. Предполагая, что высота прямоугольника составляет 110 пикселей, градиент вписывается в него пять раз из-за его длины 22 пикселей.

Дополнительная литература

Для получения дополнительной информации см. Сайт W3C (новый синтаксис), сайт Safari и сайт MDN (включая информацию о совместимости для более старых версий браузеров).

---

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

Совместимость

-webkit-radial-gradient Safari 5.1+ iOS 5+ Android 4+ Blackberry 10+ IE Mobile 10+
радиально-градиентный Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

Не поддерживается Internet Explorer до версии 10 и Opera Mini. Для получения подробной информации о совместимости посетите caniuse.com.

Firefox 16 + Safari 5.1 + Chrome 26 + Internet Explorer 10 + Opera 12.1+
iOS 5 + Android 4 + Blackberry 10 + IE Mobile 10+

Общее описание

Для получения информации об общем синтаксисе см. Radial-gradient.

Примеры

Плавный градиент повторяется два раза

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

фон: повторяющийся радиальный градиент (1 ближайшая сторона, 2 красных, 3 зеленых 20%, 4 синих 50%)

1. Размер градиента выбирается таким образом, чтобы его внешняя форма соответствовала ближайшей стороне.
2. Начальный цвет красный.
3. Цветной стоп. Цвет зеленый на 20% по оси градиента (вместо 25%, что было бы его естественным положением).
4. Цветной стоп. Цвет синий на 50% по оси градиента. Положение последней остановки определяет, как часто градиент повторяется. Поскольку 50% составляет половину от 100%, градиент повторяется два раза (на основе объявления ближайшей стороны в 1).

Резкий переход градиента повторяется бесконечно

фон: повторяющийся радиальный градиент (1 30% 40%, 2 красных, 3 красных 11 пикселя, 4 черных 11 пикселя, 5 черных 22 пикселя)

1. Центр градиента составляет 30% ширины прямоугольников по горизонтали и 40% высоты по вертикали, в результате получается эллиптическая форма.
2. Начальный цвет красный.
3. Цветной стоп. Цвет градиентного луча — красный, размер 11 пикселей.
4. Цветной стоп. Цвет на градиентном луче черный на 11 пикселей. Поскольку два цвета установлены в одном и том же положении, они внезапно меняются, вместо того, чтобы плавно переходить в рубиновый оттенок.
5. Цветной стоп. Цвет на градиентном луче черный, 22 пикселя. Поскольку длина градиента не определена, он повторяется бесконечно.

Дополнительная литература

Для получения дополнительной информации см. Сайт W3C (новый синтаксис), сайт Safari и сайт MDN (включая информацию о совместимости для более старых версий браузеров).

Сделайте красивые градиенты CSS [& SVG]

Как создавать красивые маслянисто-гладкие градиенты

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

Во всем виноват RGB, цветовая система по умолчанию, используемая компьютерами.В середине «куба», образованного RGB, находится линия серого цвета , тянущаяся от белого угла (вырезанного на иллюстрации ниже) до черного угла (нижнего угла, наиболее удаленного от зрителя).

В RGB все богатых, насыщенных цветов находятся в углах (во всяком случае, 6 из них). Центр серый.

Иллюстрация изменена пользователем Википедии SharkD

Когда вы создаете градиент, который простирается между достаточно далекими оттенками, прямая линия, соединяющая эти цвета (т.е. интерполяция градиента по умолчанию) проходит около ужасного центра куба — и вы получаете уродливую приглушенную середину вашего градиента.

Чтобы исправить это, вам нужно интерполировать иначе . (Да)

Наверное, проще всего показать вам:

Это небольшое приближение, поскольку мы сжимаем поперечное сечение куба в круг.

Чтобы получить градиент, избегающий серой мертвой зоны, вы не рисуете прямую линию от A до B, вы рисуете кривую biiiig .

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

цветовых градиентов в HCL, HSB и HSL

В этом инструменте (в настоящее время) вы можете создавать градиенты в 3 различных цветовых системах, которые дают несколько разные результаты:

• HCL (оттенок-цветность-яркость) : выбор этого инструмента по умолчанию, HCL — это удивительная цветовая система , которая не только создает красивые, богатые градиенты в широком диапазоне оттенков, но и делает это с плавным восприятием. способ.Если бы вы просматривали градиент в оттенках серого, вы бы увидели только плавный переход от более светлого к более темному серому, предотвращая ужасные «полосы», которые вы видите в некоторых вручную подобранных градиентах. (Примечание: перцептивно однородная природа HCL также делает его отличным для цветовых палитр визуализации данных)
• HSB (оттенок-насыщенность-яркость) : Хотя восприятие не является однородным, иногда HSB предлагает более интересный (и яркий) вариант градиента между двумя остановками.В частности, если ваш градиент HCL имеет уродливый коричнево-желтый цвет, попробуйте проверить версию HSB. HSB — фантастическая цветовая система для дизайнеров, и я написал подробное руководство по HSB.
• HSL (оттенок-насыщенность-легкость) : HSB и HSL часто очень похожи, особенно в ярких градиентах. Тем не менее, иногда стоит посмотреть и то, и другое. Также обратите внимание на розовую «полосу» в градиенте HSL выше — это, по сути, небольшой всплеск яркости, вызванный артефактами использования неперцептуальной цветовой системы.Используйте HCL, чтобы избежать этого. (Также: меня часто спрашивают о разнице между HSB и HSL)

Экспорт градиента как изображения SVG

Необходимо использовать один из этих градиентов в вашем дизайнерском приложении — например, Figma, Sketch или Adobe XD?

Просто — просто нажмите «Экспорт SVG» и перетащите файл прямо в свое дизайнерское приложение.

Но что, если вы разрабатываете в браузере? Нет проблем — просто возьмите…

Gradient CSS (для линейных, радиальных и конических градиентов)

Получить градиентный CSS для любого из 3-х типов градиентов очень просто.

Просто нажмите «Копировать CSS» и добавьте код к нужному элементу.

Примечание: если у вас есть другие свойства фона, установленные для рассматриваемого элемента, вы можете изменить свойство с background на background-image 👍

Подробнее о цвете

Чтобы узнать больше о цветных инструментах и ​​статьях об использовании цвета в дизайне пользовательского интерфейса, посетите:

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

.

No related posts.