Css градиенты: Сборник CSS градиентов

Содержание

выходим за рамки и взрываем звезды с border-image и градиентами — CSS-LIVE

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

Один! 🤯 Причем его даже не надо дублировать: достаточно указать один раз в одном-единственном свойстве. Таким примером в CodePen на днях поделился Темани Афиф, автор занятного и познавательного проекта css-challenges.com.

Эта «магия» — заслуга свойства border-image. У нас уже есть статья о нем и его возможностях. Увы, громоздкий синтаксис и неинтуитивное поведение — особенно с градиентами — до сих пор мешают ему стать популярным. Сам Афиф в Твиттере признал, что «border-image принадлежит к тёмной стороне CSS»: очень уж трудно представить себе наглядно, как масштабируются, нарезаются и потом опять масштабируются части картинки. И многие даже не пытаются разобраться в нем. А зря!

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

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

See the Pen
Untitled by Ilya Streltsyn (@SelenIT)
on CodePen.

или «отзывчивая» имитация старого ЭЛТ-экрана:

See the Pen
responsive old CRT screen with border-image and gradient by Ilya Streltsyn (@SelenIT)
on CodePen.

А во-вторых, border-image — уже не единственное свойство с таким синтаксисом. Недавно к нему добавилось еще одно — mask-border, из модуля СSS-масок 1 уровня. Оно уже работает в Safari и Chrome с аналогами (в виде -webkit-mask-box-image). И задает маску для обрезки всего элемента — включая его фон и рамку, нарисованную через border-image (можете еще раз посмотреть пример с косыми секциями, в самом низу:).

Чтобы овладеть мощью этой темной стороны CSS, надо поупражняться. Упражнение будет типичное для темной стороны: взорвать звезду! Правда, делать это мы будем на безопасном (относительно: может затянуть, как черная дыра!:) полигоне — в игре CSSBattle, одно из заданий которой (№83) так и называется — «Сверхновая»:

Напомним, задача этой игры — воспроизвести картинку 400×300 в окне такого же размера минимально возможным CSS-кодом. Рисовать «облака плазмы» по отдельности — не наш, не «тёмносторонний» путь 👾. Поступим проще: нарисуем 4 голубых круга на синем фоне, а поверх наложим синий квадрат с желтым кругом и повернем на 45°.

Круги получаются частично «наехавшими» друг на друга. Рисовать их отдельными элементами, множествеными фонами, тенями и т.п. — долго и скучно. Можно проще и короче!

See the Pen
Recreating CSSBattle Target#83 with border-image, part 1 by Ilya Streltsyn (@SelenIT)
on CodePen.

Вот как это работает:

Определяем контуры будущей рамки. Пользуясь тем, что можно выходить за края элемента, добавляем по 50px сверху и снизу, получается квадрат 400×400.
Заливаем этот квадрат синим градиентом с голубым кругом радиусом 64px в центре. Это и будет наша исходная картинка для нарезки.
Из этой картинки выделяем и копируем 4 угловых «плитки» размером 254×254 пикселя (см. прошлую статью для наглядности). Центр круга попадает в каждую «плитку», но два крайних сегмента по 9px оказываются отрезанными.
Масштабируем плитки до нужной толщины рамки. У нас рамка заполняет весь квадрат, без центральной «дырки», так что толщина — 200px (половина стороны). Радиусы кругов уменьшатся в 254/200 = 1.27 раза, т.е. до 50px (столько и было нужно!)
Кладем плитки на углы квадрата, обрезанные края кругов стыкуются друг с другом. Всё!

Толщину в п. 4 можно задать не ровно 200px, но и больше (например, 288px = 3in): итоговый размер плиток всё равно будет 200×200, они всегда ужимаются, чтобы поместиться. Этим можно сэкономить один-два символа.

Теперь маленький квадрат: у него размер 120×120, а круг внутри желтый, радиусом 30px и строго по центру. Здесь нам фактически не нужна сама рамка, только центральная плитка — аналог фона. За нее отвечает ключевое слово fill, у которого есть еще и приятный побочный эффект — картинка рисуется независимо от наличия обычного

border-а:

See the Pen
Recreating CSSBattle Target#83 with border-image, part 2 by Ilya Streltsyn (@SelenIT)
on CodePen.

В CSSBattle мы по умолчанию на «тёмной стороне» HTML — в Quirks mode, «режиме совместимости со старыми глюками». А значит, можем отбросить height (в Quirks mode body само растягивается на доступную высоту html) и px у margin-а (предупреждение: так можно только в CSSBattle, не повторяйте это в реальных проектах!), еще чуть уменьшив код. Копируем его в окошко игры, жмем Submit… БУМ! 💥 В космосе звук не распространяется, но радость от успешного испытания слышна аж на сервере

😂

Но писать «border-image: radial-gradient» два раза — всё равно долго и скучно. Подправим-ка стили body, чтобы унифицировать его border-image с html:


body {
  border-image: radial-gradient(#EEB850 30px,#243D83 0) 0 fill / 0 / 50px 0;
  margin: 140; /* размер автоматом станет 120x20 */
}

Самому body не обязательно быть квадратным, квадратной должна быть лишь рамка – так что делаем его прямоугольным (заодно margin сократился) и используем уже знакомый трюк. Теперь можно написать border-image: radial-gradient() один раз, для универсального селектора, а для body только переопределить цвет и радиус внутреннего круга и начальный/конечный размер угловых плиток. Это можно сделать с помощью кастомных свойств (CSS-переменных).

Но в CSS есть пара «исконных» переменных: currentColor для цветов и единица измерения em для размеров. Так что решение сокращается до…

See the Pen
Recreating CSSBattle Target#83 with border-image, part 2 by Ilya Streltsyn (@SelenIT)
on CodePen.

У html переход от первой цветовой зоны ко второй находится в 4em = 64px от центра, т.е. дальше края второй (желтой) зоны, а значит, вторая зона не видна. У body же, наоборот, первая (голубая) зона сжимается в ноль (1em = 0), и видна только желтая. Заодно обнуляется и толщина рисованной рамки. Лишь для «вырезки» плиток пришлось использовать отдельную переменную, а не размер в em — это безразмерное число, а не длина, и в CSS это несоизмеримые друг с другом величины (как метры и килограммы).

Путем зверской минификации это решение можно ужать как минимум до 150 знаков. Заявка на место в первой десятке! Еще раз посмотрим на процесс нарезки и масштабирования «плиток» в анимации:

See the Pen
Recreating CSSBattle Target#83 with border-image, part 1 by Ilya Streltsyn (@SelenIT)
on CodePen.

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

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

Но не позволяйте тёмной стороне взять верх над вами, и в реальных проектах не забывайте про доктайп 😉

P.S. Это тоже может быть интересно:

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

Follow @samgozman

градиентов CSS | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

CSS-градиенты

— CR

Глобальное использование
94,96% + 3,09% «=» 98,05%

Метод определения линейного или радиального цветового градиента как изображения CSS.

Хром

4 — 9: Partial support
10 — 25: Supported
26 — 109: Supported
25% — Supported»> 110: Supported
111 — 113: Supported

Edge

12 — 109: Supported
110: Поддерживается

Safari

3,1 — 3.2: не поддерживается
4 — 5: частичная поддержка
5,1 — 6: частичная поддержка
6.1 — 15,3: частичная поддержка
15.4 — 16.2: Подподдертала
4005: 3
62% — Supported»>4444 4005: 3 40054444444444: 3
4005:
16,4 — TP: Поддерживается

Firefox

2 — 3,5: не поддерживается
3,6 — 15: частичная поддержка
16 — 35: частичная поддержка
36: 109: Поддержка
70707070707070707070707070707070707070707070707070707070: 35: 35: 111 — 112: Поддерживается

Opera

9 — 11: не поддерживается
11,1 — 11,5: частичная поддержка
11,6 — 12: Поддержанный
27% — Supported»> 12,1 — 94: Поддержка
12.1 — 94: поддерживает
: 70015
12,1 — 94:
: 70015
12,1 — 94:
: 70015
12.1 —
1. 5,5 — 9: не поддерживается
2. 10: Поддерживается
3. 11: Поддерживается
Chrome для Android
1. 110: поддержан
Safari на IOS

SAFARI на IOS

. 6.1: Частичная поддержка

02% — Partial support»> 7 — 15,3: Частичная поддержка
15,4 — 16,2: Поддержано
16,3: Поддержано
16,4: Поддержано

Samsung Internet

4- 1

Opera Mini

Все: не поддерживается

Opera Mobile

10 — 11: не поддерживается
11.1 — 11.5: Partial. 73: Supported

UC Browser for Android

13.4: Supported

Android Browser

2.1 — 3: Partial support
17% — Supported, requires this prefix to work: -webkit-«> 4 — 4.3: Supported
4.4 — 4.4.4: Supported
109: Supported

Firefox for Android

110: Supported

QQ Browser

13.1: Supported

Baidu Browser

13.18: Supported

KaiOS Browser

2.5: Supported
3: Поддерживается

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

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

Firefox 10+, Opera 11. 6+, Chrome 26+ и IE10+ также поддерживают новый синтаксис «to (side)».

Ресурсы:: Инструмент для эмуляции поддержки в IE; Webplatform Docs; Редактор поперечного браузера

Sub-Features:

CSS. Повторяя 903

Comsicles Gradient

0202020202. с линейным градиентом, радиальным градиентом или коническим градиентом.

Итак, вот линейный градиент CSS, переход от чистого желтого к чистому синему:

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

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

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

Ссылка на этот заголовок

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

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

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

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

Как использовать: Нажмите и перетащите, чтобы изменить положение индикатора, или сфокусируйте индикатор и используйте клавиши со стрелками влево/вправо.

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

Если мы выставим на максимум все три канала — 255/255/255 — мы получим чистый белый цвет. И если мы установим каждый канал в 0, мы получим черный цвет, отсутствие какого-либо цвета.

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

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

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

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

Ссылка на этот заголовок

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

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

Поговорим о другом цветовом режиме: HSL .

HSL расшифровывается как 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. функция:
(Здесь мы используем линейные градиенты, но тот же трюк работает для радиальных и конических градиентов!)
Но подождите, не будет ли движок CSS по-прежнему использовать интерполяцию RGB для вычисления пробелов между каждого предоставленного цвета? Если мы не передаем сотен цветов, достаточно для каждого отдельного пикселя, мы все еще полагаемся на интерполяцию RGB!
Это правда, но, к счастью, это не имеет большого значения.
Когда два цвета очень похожи друг на друга, на самом деле не имеет значения, какой цветовой режим мы используем. Вы получите примерно такой же градиент. Мы не получим сильно отличающееся «среднее» значение, независимо от того, как вы определяете «среднее».
Например, вот градиент, в котором используются два очень похожих цвета:
Цвета настолько похожи, что интерполяция RGB не может их испортить.
Итак, наша хитрая уловка состоит в том, чтобы сгенерировать кучу средних цветов, используя пользовательский цветовой режим, и передать их все нашей функции градиента CSS. Движок CSS будет использовать интерполяцию RGB, но это не повлияет на конечный результат (по крайней мере, не настолько, чтобы это было заметно человеку).
Хорошо, теперь самое интересное. Давайте поговорим о том, как создавать эти градиенты. 😄
Ссылка на этот заголовок
Представляем «Генератор градиента»
Я создал инструмент, который поможет вам создавать пышные, красивые градиенты, которые вы можете использовать в CSS.
Мне очень нравится этот инструмент. Он использует все то, о чем мы говорили в этом блоге, а также несколько других изящных приемов (например, использование кривой плавности для управления распределением 90 226 90 227 цветов).

Штирлиц — Сеть печатных салонов в Перми