Css генератор градиента: CSS Gradient генератор — создать градиент для веб сайта


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


Содержание

Радиальные градиенты • Про CSS

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

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

radial-gradient

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

background: radial-gradient(gold, orangered);

По умолчанию центр градиента находится по центру, градиент имеет форму эллипса:

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

Форма градиента

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

Чтобы градиент имел форму круга — это нужно задать явно с помощью ключевого слова circle

.

Если форма не задана, но задан размер — одно значение задает радиус круга, если значений два — градиент получает форму эллипса. При наличии размеров явное задание формы градиента игнорируется.

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

Для задания центра градиента используются те же ключевые слова, что и для линейного градиента, но с приставкой at: at top, at right, at bottom, at left и at center — значение по умолчанию.

Их так же можно сочетать между собой, чтобы расположить градиент на заданной стороне, например: at right top — в верхнем правом углу.

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

Код первого квадрата:

background: radial-gradient(at top left, purple, crimson, orangered, gold);

Также можно задавать точное положение градиента, например

at 20% 50% или at 10px 150px.

Размер градиента

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

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

Ниже примеры круглых и эллиптических градиентов. Форма фигуры определяется заданными размерами:

Также можно использовать ключевые слова:

closest-side — градиент заканчивается у границы элемента ближайшей к центру градиента. Если это эллипс, градиент касается всех границ элемента.

farthest-side — градиент заканчивается у дальней границы элемента. Если это эллипс, градиент касается всех границ элемента.

closest-corner — конечная фигура растягивается таким образом, чтобы она проходила через угол элемента, ближайший к центру градиента. Если конечная фигура — эллипс, градиент растягивается на всю фигуру. При этом параметре градиент заполняет собой всю фигуру, частично выходя за её пределы.

farthest-corner — аналогично closest-corner, только конечная фигура проходит через угол, дальний от центра градиента. Значение по умолчанию.

Некоторым градиентам добавлено положение at bottom, чтобы было лучше видно действие кода:

repeating-radial-gradient

Радиальный градиент также может быть повторяющимся. Примерный код:

background: repeating-radial-gradient(circle,
  darkkhaki, darkkhaki .5em,
  transparent .5em, transparent 1.5em);

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

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

Сочетая несколько фонов с разными параметрами можно получить удивительные вещи:

Если при создании узоров использовать относительные единицы (em, %), а не абсоюлютные (px), размер получившихся паттернов потом можно будет легко регулировать изменяя только размер шрифта.

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

Создание красивых градиентов на CSS

Вот линейный градиент на CSS, идущий от чисто жёлтого до чисто синего цвета:

Заметили, что в центре он становится бледным и грязным?

Это явление Эрик Кеннеди назвал «мёртвой зоной серого». Если вы тщательно не выбираете цвета для своих градиентов, то в ваших градиентах на CSS часто возникает такая обесцвеченная часть посередине.

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

Как вычисляются градиенты

Задавались ли вы когда-нибудь вопросом, как работает алгоритм

linear-gradient

в CSS? Как он вычисляет конкретное значение цвета для каждого пикселя вдоль спектра?

Он вычисляет его, беря математическое среднее для каждого из трёх цветовых каналов: Red, Green и Blue.





[Прим. пер.: в оригинале статьи все изображения интерактивны.]

В цветовом пространстве RGB мы создаём цвета смешением трёх каналов: красного, зелёного и синего. Каждый канал имеет диапазон значений от 0 до 255.

Если мы увеличим до максимума значения всех трёх каналов — 255 / 255 / 255, то получим чисто белый цвет. А если установим каждый канал на 0, то получим чёрный, отсутствие всех цветов.

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

В показанном выше виджете градиента мы начали с чисто жёлтого цвета (255/255/0). При перемещении по градиенту мы начинаем примешивать синий (0/0/255). К тому моменту, как мы достигнем самой середины, мы уберём половину жёлтого и добавим половину синего.

Иными словами, все три канала сходятся к их среднему значению, 127,5. И в результате получается серый цвет.

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

насыщенности

Альтернативные цветовые модели

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

Давайте поговорим о другой цветовой модели: HSL.

HSL расшифровывается как Hue / Saturation / Lightness (тон, насыщенность и светлота). Если вы пользовались селектором цветов, то, вероятно работали с этой цветовой моделью.

Пример:

Вот что означает каждое значение:

  • Hue (тон) управляет тем, каким будет пигмент, где находится цвет на шкале цветов.
  • Saturation (насыщенность) управляет тем, насколько ярок будет цвет.
  • Lightness (светлость) управляет тем, насколько светлым или тёмным будет цвет.

Лично мне такой способ кажется

гораздо

более интуитивным способом восприятя цветов.

Но вот что по-настоящему волшебно: что если вместо усреднения значений RGB в наших градиентах мы будем усреднять значения HSL?





Мёртвой зоны серого больше нет, потому что теперь мы смешиваем не значения R/G/B, а значения H/S/L.

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

Вот ещё один пример, на этот раз смешение цветов с разной насыщенностью и светлостью. Ниже для сравнения показаны цвета со стандартным RGB-смешением:





Достаточно наглядная разница, правда?

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

Согласно цветовой модели HSL, оба этих цвета имеют одинаковую «светлость»:

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

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






Какая цветовая модель лучше всего?

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

Используем знания на практике

У меня есть хорошие и плохие новости. Давайте начнём с плохих.

CSS не позволяет нам выбирать цветовую модель. используемую в вычислении градиентов. Мы не можем выбрать интерполяцию HSL для конкретного градиента, по крайней мере, пока. Насколько я знаю, CSS Images Level 4 даёт возможность указания «способа интерполирования цветов», но он поддерживается не всеми браузерами.

Однако есть и хорошие новости: исхитрившись, мы можем обойти эти ограничения.

Градиенты в CSS не привязаны только к двум крайним цветам. Можно передавать 3 цвета, или 10 цветов, или даже 100 цветов.

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




Далее мы берём этот набор цветов и передаём каждое значение функции градиента CSS:

.box {
        background-image: linear-gradient(
        to right,
        #ffff00,
        #f8ea47,
        #f0d465,
        #f0d465,
        #e7bf7c,
        #ddaa8f,
        #d095a1,
        #c280b2,
        #b26cc2,
        #9d56d2,
        #8440e1,
        #6028f0,
        #0000ff
        )
        }

(Здесь мы используем линейные градиенты, но тот же трюк работает с радиальными и коническими градиентами!)

Но постойте, разве движок CSS не использует RGB-интерполяцию для вычисления пространств между каждым из указанных цветов? Если мы не передаём сотни цветов, достаточные для каждого отдельного пикселя, то всё равно используем RGB-интерполяцию!

Да, это правда, но, к счастью, это не особо важно.

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

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


Цвета настолько близки, что RGB-интерполяция никак не может их испортить.

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

Ну а теперь самое интересное. Давайте поговорим о том, как генерировать эти градиенты.

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

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

Я в восторге от этого инструмента. В нём используются все элементы, о котором говорилось в посте, а также другие трюки (типа применения кривой для управления

распределением

цветов).

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

Генератор находится здесь: https://www.joshwcomeau.com/gradient-generator/

Предыдущие работы

На создание собственного генератора меня вдохновили эти два чудесных генератора градиентов:

Краткая запись CSS как антипаттерн

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

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

Когда мы пишем что-то вроде этого:

.btn {
  background: red;
}

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

.btn {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: red;
}

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

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

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

В нашем примере мы хотели сделать следующее:

.btn {
  background-color: red;
}

И в этом коде мы делаем именно то, что нужно и ничего более.

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

.base-class {
  background-position: 0 0;
  background-repeat: no-repeat;
}

.base-class--modifier {
  background: radial-gradient(...)
}

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

Команда не смогла разобраться с проблемой, в качестве выхода было предложено “пригласить Гарри, чтобы он разобрался с градиентом” (Гарри Робертс это автор статьи — прим. пер.). Годы опыта в качестве разработчика инстинктивно показали мне, где искать и я нашел: причиной была спрятанная в генераторе градиентов Sass краткая запись свойства background.

Эта проблема является традиционной для генераторов градиентов, поэтому:

  1. Обновите свой генератор градиентов прямо сейчас.
  2. Отправьте пулл-реквест во все проекты, где используется краткая запись.
  3. Проверьте весь код, который вы скопировали из онлайн-генераторов градиентов.

Пример с background это лишь один из множества случаев, когда нам не стоит использовать краткую запись. Не менее распространено вертикальное центрирование с помощью margin: 0 auto;:

. wrapper {
  margin: 0 auto;
}

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

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

.wrapper {
  margin-right: auto;
  margin-left:  auto;
}

Поищите в стилях вашего проекта 0 auto прямо сейчас и посмотрите, что вы найдете.

Исключения

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

.box {
  padding: 10px;
}

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

.btn {
  padding: 12px 24px;
}

И к этой:

.foo {
  margin: 12px 17px 16px 10px;
}

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

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

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

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

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

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

Конический градиент задается путем указания угла поворота, центра градиента, а затем указания списка цветовых точек. В отличие от линейных и радиальных градиентов, у которых ограничители цвета размещаются путем указания длины, ограничители цвета конического градиента задаются углом. Единицы включают градусов для градусов, градусов для градиентов, рад для радиан и витков для витков. В окружности 360 градусов, 400 град, 2π радиан и 1 оборот.Браузеры, поддерживающие конические градиенты, также принимают значения в процентах, где 100% соответствует 360 градусам, но это не указано в спецификации.

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

Дуга градиента представляет собой окружность градиента. Начальной точкой градиента или дуги является север, или 12:00.Затем градиент поворачивается на угол из . Цвета градиента определяются расположенными под углом цветовыми точками, их начальными и конечными точками, а также между ними и дополнительными угловыми точками остановки цвета. Переходы между цветами можно изменить с помощью цветовых подсказок между цветовыми точками соседних цветов.

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

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

  конически-градиентный (красный, оранжевый, желтый, зеленый, синий);
конический градиент (красный 0 градусов, оранжевый 90 градусов, желтый 180 градусов, зеленый 270 градусов, синий 360 градусов);
  

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

  конически-градиентный(красный 40град, 80град, синий 360град);
  

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

  конический градиент (#fff 0,09 витка, #bbb 0,09 витка, #bbb 0,27 витка, #666 0,27 витка, #666 0,54 витка, #000 0,54 витка);
конический градиент (#fff 0turn 0. 09 витков, #bbb 0,09 витков 0,27 витков, #666 0,27 витков 0,54 витков, #000 0,54 витков 1 витков);
  

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

  конический градиент (красный 0,8 рад, желтый 0,6 рад, синий 1,3 рад);
  

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

  конический градиент (#fff 90 градусов, #000 0,25 витка 0,5 витка, #fff 1 рад 1,5 рад, #000 300 град);
размер фона: 25% 25%;
  

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

Модные градиенты в веб-дизайне

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

Градиенты были в моде уже некоторое время, они первоначально возвращались традиционным способом в фоны и изображения.Spotify снова сделал их популярными, применив двухцветные градиенты к фотографиям в качестве характерного элемента бренда в своих кампаниях и на микросайтах. В настоящее время история пересматривается, проводя нас через исследование различных эстетических движений 80-х и зарождение веб-дизайна в 90-х. Это возрождение дает нам многоцветные ретро-градиенты и двухцветные градиенты от V A P O R W A V E до Memphis Design.

Коллекция градиентов Awwwards

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

Типы градиентов

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

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

Полезные инструменты для градиентов CSS

Чтобы воссоздать эти эффекты в CSS, доступно множество инструментов, позволяющих создавать их с помощью визуальных редакторов, просто скопировав и вставив код CSS, как вы можете видеть здесь: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Ослабление градиентов в CSS.

ЯЙЦЫ

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

ВЕБГРАДИЕНТЫ

Коллекция из 180 элементов градиентов с кодом CSS и фоновыми файлами PNG.

ЦВЕТОВОЕ ПРОСТРАНСТВО

Полный цветовой ресурс с генератором палитр, генератором градиентов и трехцветными градиентами.

КОЛХЮЭ

Классная подобранная палитра градиентов с кодом CSS и плагинами для Figma и Sketch.

ГРАБИЕНТ

Этот генератор даст вам линейные градиенты, которые вы можете настроить, а затем загрузить код градиента CSS!

КОНСТРУКТОР ЦВЕТА

Содержит множество бесплатных цветовых инструментов: генератор палитр, генератор градиентов, микшер цветов, «какой это цвет?», преобразователь цветов и многое другое!

CSS ГРАДИЕНТ

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

Как добавить изображения границ и градиентные границы с помощью Pure CSS

Введение

Возможно, вы использовали границы CSS в своих проектах. Это позволило вам установить border-style , border-color и border-width . Теперь современные веб-браузеры позволяют использовать изображения границ и градиентные границы.

В этой статье вы изучите border-image-source и border-image-slice .

Предпосылки

Если вы хотите следовать этой статье, вам понадобится:

  • Требуется некоторое знакомство с CSS.Вы можете воспользоваться серией руководств «Как создать веб-сайт с помощью CSS», если вам нужно освежить знания.
  • Современный веб-браузер, поддерживающий border-image , linear-gradient , radial-gradient и conic-gradient .

Настройка примера

Во-первых, рассмотрим класс box , который устанавливает некоторые размеры и центрирует содержимое:

  . ящик {
  ширина: 400 пикселей;
  высота: 200 пикселей;
  максимальная ширина: 100%;
  запас: 1рем авто;
  дисплей: гибкий;
  выравнивание элементов: по центру;
  выравнивание содержимого: по центру;
  размер шрифта: 2rem;
}
  

Затем используйте этот класс в элементе div :

  <дел>
  Пример коробки без рамки.

Теперь вы можете создать новый класс с границей :

  .с-границей {
  цвет границы: черный;
  стиль границы: сплошной;
  ширина границы: 30px;
}
  

Затем добавьте его в разметку:

  <дел>
  Пример коробки с рамкой.

Этот код отобразит следующее:

Пример коробки с рамкой.

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

Использование изображений границ

Сначала создайте новый класс with-border-image :

  .with-border-image {
  стиль границы: сплошной;
  ширина границы: 20 пикселей;
    border-image-source: url(/url/to/some/fancy/image. jpg);   граница изображения-срез: 60 30;  }
  

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

border-image-source указывает исходное изображение, которое может быть URL-адресом растрового или векторного изображения (SVG) или URI данных.

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

Затем добавьте его в разметку:

  <дел>
  Пример окна с рамкой.

Этот код отобразит следующее:

Пример окна с рамкой.

Если вы хотите полностью понять border-image-slice , вот отличная справочная статья от Codrops и еще одна статья от CSS-Tricks.

Использование сокращенного свойства

Существует сокращенное свойство для одновременного указания значений для border-image-source и border-image-slice : border-image .

Вспомните, как в предыдущем примере использовались отдельные свойства:

  .with-border-image {
  стиль границы: сплошной;
  ширина границы: 20 пикселей;
    border-image-source: url(/url/to/some/fancy/image.jpg);   граница изображения-срез: 60 30;  }
  

Это тот же пример, переписанный с сокращенным свойством:

.
  .с изображением границы {
  стиль границы: сплошной;
  ширина границы: 20 пикселей;
    border-image: url(/url/to/some/fancy/image.jpg) 60 30;  }
  

Эти значения эквивалентны.

Использование градиентных границ

Поддерживаются три типа градиентов: линейный, радиальный и конический. С градиентами вам нужно указать border-image-slice значение 1 .

Использование линейного градиента

Вот линейный градиент:

  .с линейным градиентом {
  стиль границы: сплошной;
  ширина границы: 10px;
    border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;  }
  

Добавьте это в свою разметку. Этот код отобразит следующее:

Пример блока с линейным градиентом.

Теперь у вас есть элемент с линейным градиентом, использующим linear-gradient .

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

Вот пример радиального градиента:

  .с радиальным градиентом {
  стиль границы: сплошной;
  ширина границы: 10px;
    border-image: радиальный градиент (rgb (0,143,104), rgb (250,224,66)) 1;  }
  

Добавьте это в свою разметку. Этот код отобразит следующее:

Пример блока с радиальным градиентом.

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

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

Вот пример конического градиента:

  .with-conic-gradient {
  стиль границы: сплошной;
  ширина границы: 10px;
    border-image: конический градиент (красный, желтый, салатовый, цвет морской волны, синий, пурпурный, красный) 1;  }
  

Добавьте это в свою разметку. Этот код отобразит следующее:

Пример коробки с коническим градиентом.

Теперь у вас есть элемент с линейным градиентом, использующим conic-gradient .

Заключение

В этой статье вы изучили border-image-source и border-image-slice .

Могу ли я использовать border-image с 2020 года? показывает, что 99% браузеров по всему миру поддерживают свойство border-image . Учитывайте использование браузера вашей целевой аудиторией при внедрении новых функций.

К сожалению, border-image пока не работает должным образом с border-radius . Если вы хотите, чтобы ваш элемент имел радиус границы и границу градиента, вас могут заинтересовать эти подходы, которые используют вложенные элементы с фоновым изображением и фоновым цветом , чтобы создать иллюзию градиента border-image .

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

Градиентные границы CSS | CodyHouse

Как создать градиентные границы в CSS.

Самый простой способ применить градиент к границе — использовать свойство border-image (аналогично тому, как это делается с фоновыми градиентами):

  .btn-градиент-1 {
  ширина границы: 4px;
  стиль границы: сплошной;
  изображение границы: линейный градиент (вправо, темно-синий, темно-зеленый) 1;
}  

‘1’ после объявления linear-gradient — это значение border-image-slice.Используя 1, мы указываем, что нам нужна одна граничная область.

Недостаток этого подхода в том, что вы не можете комбинировать border-image с border-radius. 🤷‍♂️

  .btn-градиент-1 {
  // ..
  изображение границы: линейный градиент (вправо, темно-синий, темно-зеленый) 1;
  радиус границы: 50em; // 👈 не работает
}  

Альтернативный подход #

Существует альтернативный подход, основанный на свойстве background-clip, который совместим со свойством border-radius .

  .btn-градиент-2 {
  задний план:
    линейный градиент (var (--color-bg), var (--color-bg)) padding-box,
    линейно-градиентный (вправо, темно-синий, темно-зеленый) бордюр;
  радиус границы: 50em;
  граница: 4px сплошная прозрачная;
}  

Значения padding-box и border-box, указанные после линейных градиентов, представляют значения background-clip.

Первый линейный градиент ограничен полем заполнения (т. е. всем содержимым элемента, кроме границ).Это «поддельный» градиент, потому что мы используем один и тот же цвет дважды; мы используем его, чтобы замаскировать второй фоновый градиент цветом фона.

Второй градиент находится ниже первого и используется для применения желаемых цветов градиента. В отличие от первого, второй градиент покрывает область границы (background-clip: border-box).

Наконец, требуется прозрачная рамка, чтобы отделить border-box от padding box (иначе они были бы одинаковыми, и первый градиент полностью перекрыл бы второй).

Comments