Глубокое погружение CSS в радиальные и конические градиенты

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

Чтобы следовать дальше, вам не нужно знать ни о radial-gradient , ни о conic-gradient . Я постараюсь объяснить их по-хорошему.

Давайте погрузимся!

• Что такое радиальный градиент?
  • Самый простой пример
  • Как работает радиальный градиент?
• Что такое конический градиент?
• Примеры использования радиальных градиентов
  • radial-gradient в разделе героя
  • Эффект пунктирного узора
  • Эффекты изображения
• Примеры использования конических градиентов
  • Круговые диаграммы
  • Фоны и узоры
  • Шаблоны пользовательского интерфейса
  • Анимация конических градиентов с помощью @property
  • Срежьте углы с помощью нестандартных форм
  • Конические градиенты
  • Раздел Фоны

Что такое радиальный градиент?

Благодаря своему названию, radial-gradient дают нам возможность рисовать радиальные элементы, такие как круг или эллипс.

Давайте рассмотрим самый простой синтаксис.

Самый простой пример

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

 .element { background: radial-gradient(#9c27b0, #ff9800); }

Это самый простой radial-gradient , который мы можем сделать в CSS. Вы можете удивиться, почему по умолчанию используется эллипс? Хорошо, позвольте мне объяснить.

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

• Размер не определен;
• Или есть два значения (для ширины и высоты).

Как работает радиальный градиент?

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

Во-первых, давайте вернемся к исходному примеру.

 .element { background: radial-gradient(#9c27b0, #ff9800); }

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

Эллипс заполняет ширину и высоту своего контейнера. Он выглядит размытым, потому что браузер предположил, что начальная и конечная точки равны 0% и 100% соответственно.

Вот как браузер видит градиент:

 .element { background: radial-gradient(#9c27b0 0%, #ff9800 100%); }

Если мы добавим circle перед первой точкой цвета, то это будет выглядеть так:

 .element { background: radial-gradient(circle, #9c27b0, #ff9800); }

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

По умолчанию оба они центрированы по горизонтали и вертикали в своем контейнере. Другими словами, при 50% 50% :

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

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

 .element { background: radial-gradient(circle at top left, #9c27b0, #ff9800); }

Мы могли бы также центрировать его на правой стороне. Добавление только right приведет к центрированию круга right 50% :

 .element { background: radial-gradient(circle at right, #9c27b0, #ff9800); }

Вот как это выглядит:

Что такое конический градиент?

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

 .element { background: conic-gradient(#9c27b0, #ff9800); }

Посмотрите, как начинается градиент от центральной точки элемента. По умолчанию он вращается от 0deg до 360 .

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

 .element { background: conic-gradient(#9c27b0 50%, #ff9800); }

Теперь первый цвет заполняет 50% элемента, а второй будет постепенно проявляться до 100% .

Что произойдет, если мы применим жесткую остановку и ко второму цвету? В приведенном ниже фрагменте первый цвет заполнит 50% элемента, второй — от 50% до конца ( 100% ).

 .element { background: conic-gradient(#9c27b0 50%, #ff9800 0); }

Увеличение значения первой остановки цвета создаст заливку под углом:

 .element { background: conic-gradient(#9c27b0 65%, #ff9800 0); }

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

 .element { background: repeating-conic-gradient( #9c27b0 0 15deg, #ff9800 15deg 30deg ); }

Приведенные выше фрагменты заполняют первый цвет от 0deg до 15deg , затем второй цвет заполняет от 15deg до 30deg . С повторением это будет выглядеть как на рисунке ниже:

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

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

radial-gradient в разделе героя

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

Распространенным решением для этого является добавление эллипса того же цвета, что и фон под ним (чтобы он смешался с ним).

Вот главный раздел с эллипсом (выделен серым цветом только для демонстрационных целей):

Вот как отразить это в CSS:

 .hero { background-color: #fbfafa; background-image: radial-gradient(#fbfafa, rgba(0,0,0,0) center/70% 70% no-repeat, url("hero-bg.svg"); background-position: center; background-size: 70% 70%, cover; background-repeat: no-repeat; }

Таким образом, мы скрыли шаблон под контентом, теперь его намного легче читать.

Эффект пунктирного узора

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

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

Вот как это выглядит само по себе:

Когда этот шаблон повторяется, вот как это выглядит:

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

 .dot-pattern { --color-1: #9c27b0; --color-2: rgba(0,0,0,0); background-image: radial-gradient(circle at 2px 2px, var(--color-1) 1px, var(--color-2) 0); background-size: 15px 15px; }

Эффекты изображения

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

 .thumb:after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, #9c27b0, #ff9800); mix-blend-mode: hard-light; opacity: 0.4; }

Примеры использования конических градиентов

Круговые диаграммы

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

 .pie-chart { width: 100px; height: 100px; background: conic-gradient(from 0deg, #b2daf9 128deg, #2096f3 0); border-radius: 50%; }

Фоны и узоры

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

Вот что происходит в следующем градиенте:

• Цвет #fff покрывает 90 90deg элемента;
• Затем следует #000 до 180deg ;
• Затем следует #fff до 270deg ;
• Наконец, #000 заполнен до конечного угла ( 360deg ).

 .checkerboard { --size: 25px; width: 200px; height: 100px; background-image: conic-gradient(#fff 90deg, #000 0 180deg, #fff 0 270deg, #000 0); background-size: var(--size) var(--size); }

При повторении и управлении через background-size это будет выглядеть так:

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

 .element { background-image: conic-gradient(#fff 90deg, #000 0 136deg, #fff 0 313deg, #000 0); }

Шаблоны пользовательского интерфейса

Иногда нам может понадобиться сгенерировать случайный шаблон пользовательского интерфейса, который принимает разные формы. Для этого мы можем использовать conic-gradient . Идея состоит в том, что мы контролируем размер градиента с помощью background-size , а затем меняем угол conic-gradient для достижения различных эффектов.

У нас есть элемент шириной и высотой 200px . Внутри этого элемента мы будем повторять фон.

 .element { --size: 20px; width: 200px; height: 200px; background-size: var(--size) var(--size); }

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

Теперь каждый квадрат, который вы видите, будет содержать conic-gradient . А пока я добавлю два синих оттенка, чтобы лучше продемонстрировать концепцию.

 .element { --size: 20px; width: 200px; height: 200px; background: conic-gradient(#2296F3 0.13turn, rgba(255,255,255,0) 0); background-size: var(--size) var(--size); }

Вот так выглядит конический градиент без повторения:

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

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

Анимация конических градиентов с помощью @property

Мы можем создавать интересные анимационные эффекты с помощью conic-gradient . Однако это невозможно по умолчанию. Нам нужно использовать определение @property для определения пользовательского свойства, которое мы будем использовать для анимации.

 @property --conic-mask { syntax: '<percentage>'; inherits: false; initial-value: 0%; } .conic-mask { --conic-mask: 0%; -webkit-mask: conic-gradient(from 0deg at 50% 50%, #000 var(--conic-mask), #0000); transition: --conic-mask 1s ease-out; } .conic-mask: hover { --conic-mask: 100%; }

Срежьте углы с помощью нестандартных форм

Это демо Темани Афиф. Идея состоит в том, чтобы использовать conic-gradient в качестве маски для создания эффектов срезанных углов:

Конические градиенты

Мы можем использовать conic-gradient для создания тонких эффектов градиента, которые имеют более темные углы или более светлые углы с другими цветами. Conic.css — это крошечная CSS-библиотека Адама Аргайла, которая содержит множество прекрасных конических градиентов.

Использование конических градиентов для фона раздела

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

 .footer { background: conic-gradient(from 0.25turn at 25% 0%, #FFD9CE, rgba(#FFD9CE, 0) 50%); }

• Посмотреть демо →

Заключение

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

Я надеюсь, что вы найдете статью полезной. Большое спасибо за чтение!

Дальнейшее чтение журнала Smashing Magazine

• Глубокое погружение object-fit и background-size в CSS
• Распространенные проблемы с CSS для интерфейсных проектов
• Использование цветов HSL в CSS
• Проблемы переполнения в CSS