Css фон градиент: Линейный градиент | htmlbook.ru

10.05.2019 Facebook Twitter LinkedIn Google+ Разное

Содержание

Использование 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-го.

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

Blueprint фон с помощью градиентов CSS

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

Сегодня мы снова познаем силу великого и могучего CSS 3! Используя один лишь div блок и ни единого изображения, мы с вами сделаем фон в стиле светокопировального листа бумаги или blueprint paper. Для начала давайте разберёмся, что такое светокопировальная бумага и где она применялась, а так же где её можно применить в вебе.

Светокопировальная бумага — что это?

Светокопировальная бумага покрыта с одной из сторон очень тонким слоем светочувствительного вещества. Активно использовалась в 20 веке для копирования в светокопировальных аппаратах. Найти blueprint paper в виде форматной бумаги практически невозможно — она  поставляется исключительно в рулонах.

Со времени изобретения светокопировальной бумаги в 1861 году она притерпела множество изменений. Одно из самых видимых изменения — это цвет. В середине 30х годов 20ого века была наиболее распространена синяя копировальная бумага, которая и закрепилась в нашем представлении. Из-за цвета её и назвали на западе blueprint paper, а в СССР её прозвали просто «синькой».

Blueprint-бумага активно использовалась при создании чертежей, схем и прочих полётов инженерной фантазии того времени. Рисунок наносился белым цветом, который был отчётливо виден на синем фоне. Но где нам может понадобиться фон в стиле blueprint/светокопировальной бумаги в вебе?

На самом деле применений тут можно придумать массу — это может быть страница «в разработке», «ошибка 404»; блок-растяжка с начертаниями устройств для визуализации того, что компания разрабатывает адаптивные сайты; blueprint может отлично вписаться в формат уютного техно-блога или для создании страницы с бета-версией программного обеспечения. Использований масса, делается просто, а смотрится отлично! Давайте приступим!

Создаём сетку

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

See the Pen Simple crossing strips by Sam Gozman (@samgozman) on CodePen.

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

Накладываем три сетки

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

  • 1 сетка: 128px на 128px
  • 2 сетка: 32px на 32px
  • 3 сетка: 16px на 16px

Также для большего соответвтия поставленной цели подберём более подходящие цвета для фона и для сеток. Для более «натурального» вида сетки поверх синего фона сделаем линии с разным уровнем прозрачности (используем rgba либо hsla цвета). Первая сетка будет с прозрачностью 0.8 и толщиной 3px, вторая 0.6 и 2px, и третья с прозрачностью 0.3 и толщиной 1px соответсвенно. Прозрачность, как и цвет с толщиной, вы можете подобрать на ваше личное усмотрение.

See the Pen Simple blueprint pattern by Sam Gozman (@samgozman) on CodePen.

Добавим радиальный градиент

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

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

See the Pen Simple blueprint pattern with radial gradient by Sam Gozman (@samgozman) on CodePen.

Вот, теперь идеально! Используя только градиенты CSS и один div блок мы смогли реализовать паттерн blueprint, который спокойно можно использовать на вашем сайте. Я думаю, что это в очередной раз подтверждает силу и потенциал CSS.

Для большей реалистичности я бы ещё добавил лёгкий эффект зашумленности (noise effect), но как его грамотно реализовать, не прибегая к base64,  используя один лишь css, я не знаю. Если знаете как сделать реалистичный лёгкий эффект зашумленности с помощью градиентов css — пишите в комментарии, дополню статью.

Посмотреть целиком можно на CodePen.

Thursday, 29 December 2016

Кроссбраузерный 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-градиент, верстая шаблон.

Перевод

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

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

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

Тест о котором я упоминал в описании находится здесь: Тест CSS3. Стандарт оформления HTML документов

Реальный пример работы вы можете увидеть и скачать ниже:

Посмотреть примерСкачать

Как использовать?(простое повторение градиента)

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

1
2
3
4
5
6
7
8
9

/*Линейный*/  
.gradient {  
    background: repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);   
}  
 
/*Радиальный*/  
.gradient {  
    background: repeating-radial-gradient(50% 50%, circle, #f9f9f9, #cccccc 20px);    
}

(Создание шаблона для повторений)

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

HTML часть

Для этого нам нужен лишь один <div> и никаких изображений, только CSS3:

1
2

<div>
</div>

CSS3 часть

1
2
3
4
5
6
7
8
9
10

.gradient {  
    width: auto;  
    height: 500px;  
    margin: 0 50px;  
    background: -webkit-repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background: -moz-repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background: -o-repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background: repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background-size: 100% 21px;  
}

Последнее свойство означает что градиент будет растягиваться на всю страницу и повторяться через 21 пиксель. Чтобы свойство работало в разных браузерах мы используем специальные префиксы(«-webkit», «-moz», «-o»).

А для создания двух полосок слева мы используем псевдоэлемент :before :

1
2
3
4
5
6
7
8
9

.gradient:before {  
    content: "";  
    display: inline-block;  
    height: 500px;  
    width: 4px;  
    border-left: 4px double #FCA1A1;  
    position: relative;  
    left: 30px;  
}

Вывод

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


Успехов!

Источник: http://www.hongkiat.com/blog/css3-repeating-gradients/

Фоновые текстуры в виде шахматной доски и полос с использованием градиентов CSS3

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

 

 

Демонстрация работы

Этот пример отображается в браузерах на движке Webkit, Firefox от версии 3,6, Opera от версии 11,5 и Internet Explorer от версии 10. Но в современных браузерах некоторые регулярные фоновые текстуры могут не отображаться из-за изменившейся формы записи градиентов.

Основная идея этого способа, взятая из спецификации изображений CSS3, следующая:

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

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

background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

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

Однако при такой записи одна плитка займет весь блок. Чтобы задать размер каждой плитки, можно воспользоваться размером фона:

-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;

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

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

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

Автор урока Lea Verou

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

Взгляд на CSS3 градиент (линейный и радиальный градиенты) | XoZblog

Здравствуйте, уважаемые читатели XoZbloga! Градиент является прекрасным инструментом манипуляции с цветом в CSS3. Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.

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

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

В общем случае синтаксис градиента (линейного) выглядит так:

1
2
3
4
5
6
7

div {
   background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
   background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
   background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
   background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
   background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}

Итак, давайте обо всем по порядку.

Прежде всего, линейный градиент объявлен функцией linear-gradient(). Функция имеет три основных значения. Первое значение определяет исходное положение. В примере указано top т.е. исходное положение сверху. Можно также использовать bottom, left и right;

1
2
3

div {  
    background-image: linear-gradient(top, #FF5A00, #FFAE00);    
}

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

1
2
3

div {  
    background-image: linear-gradient(45deg, #FF5A00, #FFAE00);  
}

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

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

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

1
2
3

div {
   background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}

Теперь давайте изменим значение стоп позиций, и на этот раз мы установим 50% для первого и второго цвета:

1
2
3

div {
   background-image: linear-gradient(top, #FF5A00 50%, #FFAE00 50%);
}

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

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

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

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

1
2
3

div {
   background: radial-gradient(circle, #F9E497, #FFAE00);
}

Если не указывать форму, то по-умолчанию будет установлен эллипс.

Также по-умолчанию установлена центральная позиция градиента, ее можно изменить. Позицию можно задать командами (top, bottom, left, right и center), а также их комбинациями, либо указать в процентах или пикселях.

Комбинации команд:

  • По центру вверху — top — 50% 0%;
  • В левом верхнем углу — left top — 0% 0%;
  • В правом верхнем углу — right top — 100% 0%;
  • По центру — center — 50% 50%;
  • Слева по центру — left center — 0% 50%;
  • Справа по центру — right center — 100% 50%;
  • По центру снизу — bottom — 50% 100%;
  • В левом нижнем углу — left bottom — 0% 100%;
  • В правом нижнем углу — right bottom — 100% 100%.

Вот пример с процентами:

1
2
3

div {
   background-image: radial-gradient(70% 20%, circle, #F9E497, #FFAE00);
}

Первое значение по оси Х второе по У.

Также радиальному градиенту можно задавать размер. Размер указывается через пробел после формы градиента. По-умолчанию применяется farthest-corner (к дальнему углу). Расчет ведется от центральной точки градиента до:

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

Чтобы, это лучше понять рассмотрим на примере. Градиент эллиптической формы с белым начальным и конечным синим цветом:

1
2
3

div {
   background-image: radial-gradient(230px 50px, ellipse closest-side, white, blue);
}

Размер рассчитывается из расстояния до ближних сторон, очевидно что верхняя ближе по оси Y и левая по оси X.

А теперь до дальних сторон:

1
2
3

div {
   background-image: radial-gradient(230px 50px, ellipse farthest-side, white, blue);
}

Результат, как говорится на лицо. Размер исчисляется из расстояния до дальних сторон.

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

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

1
2
3

div {  
    background-image: linear-gradient(top, rgba(255,90,0,0.2), rgba(255,174,0,0.2));  
}

Альфа канал, тот что последний и равен 0.2 указывает на то, что от 100% цвета используется только 20%.

В обоих видах CSS3 градиента можно использовать не два, а несколько цветов.

1
2
3

div {
   background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
}

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

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

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

1
2
3

div {
   background-image: repeating-radial-gradient(red, blue 20px, red 40px);
}

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

Кроссбраузерность

К сожалению, на момент написания этой статьи, современные браузеры еще не поддерживают стандартный синтаксис. Они по прежнему нуждаются в префиксах, каждый в своих (-webkit-, -moz-, -ms- и -o-). Поэтому синтаксически правильным является вот такое описание градиента:

1
2
3
4
5
6
7

div {
   background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); /* для Chrome и Safari */
   background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); /* для Firefox */
   background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); /* для IE 10+ */
   background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); /* для Opera */
   background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%); /* стандартный синтаксис */
}

Чтобы упростить задачу с префиксами, можно использовать бесплатную библиотеку Prefix-Free.

Для того чтобы градиент заработал на «9 осле» (Internet Explorer 9), пишем так:

1
2
3

div {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF5A00, endColorstr=#FFAE00);
}

Но даже здесь есть ограничения, нельзя добавить более 3 цветов и для использования прозрачности нужно немного изменить HEX код цвета:

1
2
3

div {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF5A00, endColorstr=#33FFAE00);
}

Где 33 сразу после решетки это процент насыщенности цвета.

Надеюсь, что статья оказалась для Вас полезной, а рассмотренная тема полностью раскрытой.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Не забывайте оставлять комментарии. Спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Как использовать фоновые градиенты 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

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

CSS Gradients

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

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

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

 
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'},
    }
  }
}

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

Ресурсы

CSS Color Gradient Generator: красивые градиенты бесплатно

Что такое цветовой градиент?

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

Как создать хороший цветовой градиент CSS

Обычно дизайнер вручную выбирает два или более цветов для создания цветового градиента. Это требует дизайнерского опыта и хорошего взгляда на цветовую гармонию. Наш генератор цветовых градиентов использует алгоритмов цветовых градиентов нашего создателя логотипов My Brand New Logo, который автоматически создает красивых и хорошо сбалансированных цветовых градиента . Вам просто нужно выбрать один цвет, и наш генератор градиентов автоматически сгенерирует красивый градиент на его основе.За кулисами происходит много науки о цвете, но будьте уверены, ваш цветовой градиент всегда выглядит хорошо.

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

Наш генератор фонового градиента CSS автоматически создает цветовой градиент на основе выбранного вами цвета. У нас есть разные стили градиентов. Стиль освещения создает цветовой градиент, который выглядит так, как будто он подсвечивается источником света. Идеально подходит для придания блеска вашим цветам. Deep style развивает эту концепцию и добавляет больше оттенков в цветовую гамму.Модель в стиле радуги идеально подходит для более светлых тонов, чтобы создать имитацию перламутра. А интенсивный стиль создает интенсивный, глубокий и богатый цветовой градиент.

Регулировка градиента цвета

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

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

Советы по дизайну с цветовым градиентом

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

перейдите к рекомендациям по цветовому градиенту

Градиентный фон для вашей электронной почты

Зачем использовать сплошной фон, если вы можете добавить блики градиентов в свое электронное письмо в формате HTML.

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

CSS3 Градиент

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

Как насчет поддержки в почтовых клиентах. Все ли почтовые клиенты поддерживают градиент CSS3? Нет, не все почтовые клиенты поддерживают градиент CSS3, но мы всегда можем вернуть его к сплошному фону. Тот факт, что некоторые почтовые клиенты (в основном более старые версии Outlook) не поддерживают эту спецификацию, не означает, что мы не должны отправлять электронную почту с красивым градиентным фоном пользователям, которые проверяют свою электронную почту в современных клиентах.

Я не собираюсь вдаваться в подробности CSS3 Gradient. В Интернете есть масса ресурсов, на которых вы можете учиться. Если вы используете Google для генератора градиентов CSS, вы найдете несколько веб-сайтов, которые сгенерируют его для вас. Объявление градиента CSS, которое мы будем использовать для нашего шаблона, показано ниже:

Это создаст диагональный (45 градусов) фон линейного градиента от цвета # 8e36e0 до цвета цвета # 164b92 .

Использование градиента CSS3 в электронном письме

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

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

Давайте посмотрим на ключевые строки кода электронной почты:

  • Строка 1
    Эта таблица будет основой нашего шаблона электронной почты. Полная ширина, белый фон, без интервала и заполнения ячеек.
  • Строка 3
    Это ячейка таблицы, в которую мы собираемся добавить наш градиент CSS3 как встроенный стиль.Здесь важно отметить атрибут bgcolor со значением # 164c92 . Также обратите внимание, как это отображается перед встроенным стилем, имеющим стиль градиента. Порядок размещения не имеет значения для почтового клиента, который не поддерживает градиент CSS3, но в других почтовых клиентах, если атрибут bgcolor идет после встроенного стиля, фон градиента будет заменен сплошным цветом, назначенным атрибуту bgcolor .
    Вот как мы устанавливаем возврат к сплошному фону для почтовых клиентов, которые не поддерживают градиент CSS3.
  • Строка 6 — Строка 11
    Эта строка предназначена для того, чтобы заставить градиентный фон работать для Outlook с использованием условного CSS, аналогичного тому, который мы используем для таргетинга IE7, IE8 или IE lt 9. Но с помощью электронной почты мы проверяем MSO для таргетинга версии Outlooks. Обратите внимание на mso-width-percent: 1000 , это сделает прямоугольник на 100% с. fillcolor = ”# 8e36e0 ″ — это начальный цвет, а color2 =” # 164c92 ″ — конечный цвет градиента.
  • Строка 13 — Строка 19
    Это будет таблица, в которой мы будем кодировать CTA. Все, что мы хотим заключить в градиентную ячейку, должно быть здесь.
  • Строка 30 — Строка 34
    Сюда помещаются другие копии электронной почты за пределами градиентной ячейки.

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

CSS Gradients with background-blend-mode

Свойство CSS background-blend-mode объединяет фоны элемента: цвета, изображения и градиенты вместе с режимами наложения, подобными Photoshop (умножение, экран, наложение и т. Д. ).Он очень новый и на данный момент поддерживается последними выпусками Chrome, Firefox и Opera. Свойство скоро появится в Safari, но не в Internet Explorer.

CSS-градиенты уже очень эффективны при создании шаблонов, как показано в галерее CSS-шаблонов Lea Verou. С новым свойством background-blend-mode возможности снова расширяются.

CSS-градиенты

полностью не зависят от разрешения и изменяются быстрее, чем изображения.Принимая во внимание соображения производительности, анимация и переходы возможны через свойства background-size или background-position .

Обратной стороной background-blend-mode наряду со многими очень новыми свойствами CSS является добавленная работа по обеспечению красивой альтернативы для браузеров без поддержки этого свойства. К счастью, это не так уж сложно. С помощью крошечного фрагмента Javascript мы можем определить, нет ли поддержки:

  if (! ("BackgroundBlendMode" в документе.тип кузова)) {
    // Нет поддержки background-blend-mode
  var html = document.getElementsByTagName ("html") [0];
  html.className = html.className + "режим наложения без фона";
}

В вашем файле CSS теперь вы можете указать разные стили для неподдерживаемых браузеров с помощью класса .no-background-blend-mode . Есть и другие способы определения поддержки, с помощью Modernizr или даже с помощью CSS @supports . Однако вы можете столкнуться с ситуацией, когда эта дополнительная работа даже не нужна, и если оставить неподдерживаемый браузер для рендеринга градиентов CSS без background-blend-mode выглядит нормально.

Приведенные выше градиенты, скорее всего, невозможно точно воспроизвести в CSS без background-blend-mode . Однако использование градиента CSS вместо изображения не только избавляет вас от HTTP-запроса, но и становится намного меньше по размеру. Размеры градиентов CSS вычисляются без префикса, что поддерживается всеми последними браузерами.

Свойства фонового изображения и градиента

Установите фоновое изображение и фоновый градиент элемента.

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

Тип

Выберите, использовать ли изображение или градиент.

Параметры и поведение:

  • Изображение (по умолчанию) — Установить фон как изображение
  • Gradient — Установить фон как градиент
  • Нет — Отменить фон

Изображение

Отображается, если изображение выбрано в поле Тип.

Установите фоновое изображение (или несколько фоновых изображений) для элемента.

Применение и опции:

  • Щелкните миниатюру , чтобы выбрать изображение
  • Для нескольких изображений или градиентов или их сочетания нажмите Добавить изображение или градиент , чтобы добавить другое изображение
  • Несколько изображений можно перетащить вверх и вниз, чтобы изменить их порядок наложения

Дополнительные сведения о фоновом изображении см. На странице https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

.

Стиль изображения Drupal

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

Размер

Установите размер фонового изображения элемента.

Параметры и поведение:

  • Авто — установка исходного размера фона
  • Содержать — Масштабировать изображение как можно больше, не обрезая его
  • Обложка — Масштабируйте изображение как можно больше, чтобы в элементе не было пустого места. При необходимости изображение будет обрезано
  • Numeric — Масштабировать изображение до указанных значений по ширине и высоте
    • Ширина — укажите ширину в пикселях или автоматически
    • Высота — укажите ширину в пикселях или автоматически

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

Дополнительную информацию о размере фонового изображения см. На сайте https: // developer.mozilla.org/en-US/docs/Web/CSS/background-size

Повторить

Установите, как будет повторяться фоновое изображение (или мозаика).

Параметры и поведение:

  • Без повтора — Отключить повторение фона
  • Repeat — Установите повторение фона по вертикали и горизонтали
  • Повторить по горизонтали — Установить горизонтальное повторение фона
  • Повторять по вертикали — Установить фоновое изображение на повторение по вертикали

Дополнительную информацию см. На сайте https: // developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

Приложение

Установите фиксированное фоновое изображение или прокрутите в окне просмотра браузера.

Параметры и поведение:

  • scroll — Установить фон для прокрутки с элементом
  • fixed — Исправить фон окна просмотра
  • local — Установить фон для прокрутки с содержимым элемента, если элемент имеет механизм прокрутки

Примечание. Фоновое прикрепление исправлено не будет работать на iOS и некоторых других мобильных устройствах.

Дополнительную информацию см. На странице https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

.

X-позиция

Установите горизонтальное положение фонового изображения.

Параметры и поведение:

  • слева — Установите фоновое изображение так, чтобы оно начиналось с левого края изображения
  • центр — Установите фоновое изображение, чтобы оно начиналось от центра изображения по горизонтали
  • справа — Установите фоновое изображение, чтобы оно начиналось с правого края изображения

Примечание: Используйте со смещением x для точного позиционирования изображения.

Дополнительную информацию см. На странице https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x

.

Смещение по оси X

Установите горизонтальное смещение фонового изображения.

Поведение:

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

Ожидаемое значение:

  • Введите число
  • Принимаются отрицательные значения

Принято единиц:

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

  • blank — Просто добавьте число, и значение будет интерпретировано как пиксели и будет автоматически преобразовано в rem, если это поведение задано в настройках базового блока
  • пикселей — значение будет применяться в пикселях
  • % — значение будет применяться в процентах от ширины родительского элемента

Примечание: Допускаются дополнительные единицы. Для получения дополнительной информации см. Https://www.w3schools.com/cssref/css_units.asp

Дополнительную информацию см. На странице https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x

.

Позиция Y

Установите вертикальное положение фонового изображения.

Параметры и поведение:

  • top — Установить фоновое изображение, чтобы оно начиналось с верхнего края изображения
  • центр — Установите фоновое изображение, чтобы оно начиналось от вертикального центра изображения
  • нижний — Установите фоновое изображение, чтобы оно начиналось с нижнего края изображения

Дополнительную информацию см. На сайте https: // developer.mozilla.org/en-US/docs/Web/CSS/background-position-y

Смещение по оси Y

Установите вертикальное смещение фонового изображения.

Поведение:

  • Положительные числа перемещают изображение от верхнего или нижнего края в зависимости от значения, установленного в позиции y
  • Пример: Если положение y установлено на нижнее значение, а смещение по оси y равно 100 пикселей, изображение переместится на 100 пикселей вверх на

Ожидаемое значение:

  • Введите число
  • Принимаются отрицательные значения

Принято единиц:

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

  • blank — Просто добавьте число, и значение будет интерпретировано как пиксели и будет автоматически преобразовано в rem, если это поведение задано в настройках базового блока
  • пикселей — значение будет применяться в пикселях
  • % — значение будет применяться в процентах от ширины родительского элемента

Примечание: Допускаются дополнительные единицы. Для получения дополнительной информации см. Https://www.w3schools.com/cssref/css_units.asp

Дополнительную информацию см. На странице https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y

.

Градиент

Отображается, если в поле Тип выбран градиент.

Установите фоновый градиент элемента.

Ожидаемое значение:

  • Выберите градиент в палитре градиентов

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

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

Дополнительную информацию см. На странице https://developer.mozilla.org/en-US/docs/Web/CSS/gradient

.

maizzle / example-gradient: используйте фоновые градиенты CSS в сообщениях электронной почты HTML с резервным вариантом VML для Outlook.

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

шаблоны

Включено 2 примера:

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

В шаблонах используется линейный градиент CSS background-image с резервным VML для Outlook, что означает, что он работает более чем в 87% всех почтовых клиентов (возможно, даже больше, многие почтовые клиенты для Mac должны это поддерживать) .

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

CSS gradient работает в:

  • Apple Mail
  • Почта iOS
  • Outlook iOS
  • Gmail iOS
  • Gmail Android
  • Gmail Интернет, Google Apps (браузер)
  • Samsung Mail
  • Thunderbird
  • + различные другие почтовые веб-клиенты

Резервное копирование VML работает в:

  • Outlook 2007
  • Outlook 2010
  • Outlook 2013
  • Outlook 2016
  • Outlook 2019

Сплошной цвет фона отображается в:

  • Outlook.com
  • Office 365
  • Yahoo! Почта
  • AOL Mail
  • Comcast, GMX, Telstra / BigPond
  • Outlook 2003
Градиенты CSS попутного ветра

Начиная с версии 1.7.0, Tailwind включает в себя утилиты градиента CSS. Однако в настоящее время они работают только с переменными CSS, которые плохо поддерживаются в почтовых клиентах.

Из-за этого этот Стартер вместо этого использует плагин tailwindcss-gradient .

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

Установите Maizzle CLI:

  установка npm -g @ maizzle / cli

Создайте новый проект на основе этого примера:

  maizzle new maizzle / example-gradient && cd example-gradient

Локальная разработка:

  maizzle serve

Сборка к производству:

  maizzle build производство

Документация

Прочтите руководство: https: // maizzle.com / руководства / css-background-gradient-html-emails /

Документация

Maizzle доступна по адресу https://maizzle.com

Как создать градиентную фоновую анимацию в Divi (2 способа)

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

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

Приступим!

Подглядывание

Вот краткий обзор обоих способов создания градиентной фоновой анимации в Divi.

# 1 Анимация градиентного фона с помощью фрагмента CSS и опции фона Divi

# 2 Анимация градиентного фона с использованием модулей Divi с радиальным градиентным фоном

Скачать макет БЕСПЛАТНО

Чтобы ознакомиться с дизайнами из этого урока, вам сначала нужно загрузить его, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже.Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл JSON в Divi Builder.

Давай перейдем к руководству, ладно?

Что нужно для начала работы

Для начала вам необходимо сделать следующее:

  1. Если вы еще этого не сделали, установите и активируйте тему Divi.
  2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
  3. Выберите вариант «Строить с нуля».

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Часть 1. Создание градиентной фоновой анимации с помощью фрагмента CSS и опции фона Divi

Для начала добавьте строку из одного столбца в раздел по умолчанию в Divi Builder.

Настройки раздела

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

Затем обновите заполнение следующим образом:

  • Padding: 0px вверху, 0px внизу

Настройки строк и столбцов

Параметры столбца

Откройте настройки строки, а затем обновите заполнение столбца следующим образом:

Затем добавьте следующий настраиваемый CSS к основному элементу столбца:

 высота: 40vw;

Настройки строки
Градиентный фон

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

Обновите настройки строки следующим образом:

  • Цвет градиентного фона слева: rgba (12,113,195,0,8)
  • Градиент фона справа Цвет: rgba (131,0,233,0,8)
  • Тип градиента: линейный
  • Направление градиента: 45 градусов

Размер

Затем обновите размер строки следующим образом:

  • Ширина: 100%
  • Макс.ширина: 100%

Пользовательский класс CSS

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

Перейдите на вкладку «Дополнительно» и добавьте следующий класс CSS:

  • Класс CSS: animate-gradient

Добавить модуль кода

После добавления класса CSS в строку добавьте модуль кода в строку.

Вставить CSS в модуль кода

Затем вставьте следующий код CSS в поле «Код настроек модуля кода»:

.animate-gradient {
размер фона: 400% 400%;
анимация: градиент 5s, легкость бесконечна;
}

@keyframes gradient {
0% {
фоновая позиция: 0% 50%;
}
50% {
фоновая позиция: 100% 50%;
}
100% {
фоновая позиция: 0% 50%;
}
}

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

Результат

Вот результат.Градиентный фон увеличен на 400% от исходного размера и анимируется перемещением влево и вправо.

Добавить призыв к действию

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

Настройки призыва к действию
Контент

Обновите содержимое следующим образом:

  • Добавить заголовок
  • Добавить текст кнопки
  • Добавить основной текст
  • URL ссылки на кнопку: #
  • Использовать цвет фона: NO

Дизайн

Перейдите на вкладку дизайна и обновите следующее:

  • Шрифт заголовка: Kaushan Script
  • Размер текста заголовка: 4vw (рабочий стол), 30px (телефон)
  • Высота строки заголовка: 1.4em
  • Шрифт текста: Roboto
  • Размер текста кнопки: 16 пикселей
  • Цвет текста кнопки: # 555555
  • Фон кнопки: #ffffff
  • Ширина границы кнопки: 0 пикселей
  • Радиус границы кнопки: 30 пикселей
  • Расстояние между буквами кнопки: 3 пикселя
  • Шрифт кнопок: Roboto Condensed
  • Толщина шрифта кнопок: полужирный

Результат

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

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

Если вы знакомы с CSS, вы можете настроить скорость и направление анимации, изменив значения свойств анимации.

Часть 2: Создание анимации градиентного фона с использованием модулей Divi с радиальным градиентным фоном

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

Вот как это сделать.

Дубликат раздела

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

Обновить настройки строки

После того, как раздел был продублирован и дополнительный модуль кода удален, откройте настройки строки и измените тип градиента фона:

Затем перейдите на вкладку «Дополнительно» и удалите класс CSS. Нам это не нужно.

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

  • Горизонтальный перелив: скрытый
  • Вертикальный перелив: скрытый

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

Добавить модуль первого делителя

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

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

Настройки модуля первого делителя
Разделитель градиентного фона

Обновите содержимое модуля разделителя следующим образом:

  • Разделитель экрана: NO
  • Цвет градиента фона слева: rgba (222,77,255,0.8)
  • Тип градиента: радиальный
  • Конечное положение: 70%

Размер разделителя

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

Позиция

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

Обновите следующее:

  • Позиция: Абсолютная
  • Индекс Z: -1

Масштабирование и преобразование

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

  • Масштаб преобразования (X и Y): 600%

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

Обновите следующее:

  • Transform Translate (Y): 0px
  • Преобразовать Перевести (X): 100%

Анимация

Наконец, давайте добавим нашу анимацию. Мы собираемся добавить слайд-анимацию, которая начинается за пределами окна слева, а затем скользит по секции за пределы правой части окна. Затем он будет повторять это в бесконечном цикле. Для этого обновления необходимо следующее:

  • Стиль анимации: Слайд
  • Направление анимации: 5000 мс
  • Интенсивность анимации: 85%
  • Начальная непрозрачность анимации: 100%
  • Кривая скорости анимации: линейная
  • Повтор анимации: цикл

Результат

Давайте проверим результат.

Добавить модуль второго делителя

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

Настройки модуля второго делителя
Цвет градиента

Затем обновите цвет градиента следующим образом:

  • Цвет градиентного фона слева: rgba (124,218,36,0,8)

Преобразовать Перевести

После этого обновите посадочную позицию модуля со следующим значением преобразования:

Transform Translate (X): -60%

Анимация

Для этого модуля мы собираемся добавить анимацию слайда слева, а не справа, как раньше.Обновите следующие настройки анимации:

  • Стиль анимации: Слайд
  • Направление анимации: влево
  • Интенсивность анимации: 100%

Добавить модуль третьего делителя

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

  • Цвет градиентного фона слева: rgba (224,43,32,0,8)

  • Transform Translate (Y): -100%
  • Преобразовать Перевести (X): 0%

  • Направление анимации: вверх
  • Интенсивность анимации: 82%

Результат

Посмотрите результат!

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

Последние мысли

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

Какой путь вам больше нравится?

Я с нетерпением жду вашего ответа в комментариях.

Comments
Leave Comment