Как сделать градиентный фон на веб-странице?
Для создания градиентов предназначена функция linear-gradient(), которая добавляется к свойству background или background-image.
background: linear-gradient(#9A5044, #E8D9A9);
Без указания дополнительных параметров градиент получается вертикальным, первое значение указывает цвет сверху, второе — снизу. Браузер уже сам делает плавный переход между указанными цветами.
Чтобы сделать градиент в виде фона веб-страницы, background с linear-gradient() следует добавить к селектору body . Однако такой фон привязан к высоте содержимого и если оно меньше высоты веб-страницы, то результат получается так себе (рис. 1).
Рис. 1. Вид градиента
Такое можно избежать, если к background добавить параметр fixed , тогда высота градиента будет совпадать с высотой веб-страницы, а при прокрутке содержимого градиент остаётся неподвижным (пример 1).
Пример 1. Градиентный фон
Результат данного примера показан на рис. 2. Для наглядности добавлен высокий белый блок, показывающий что при прокрутке веб-страницы градиент не меняется.
Рис. 2. Вид веб-страницы с градиентным фоном
См. также
- linear-gradient()
- Градиенты в CSS
- Градиенты у
- Линейный градиент
- Оформление кнопок
- Установка фона и градиента
Градиенты в CSS
Когда мы говорим о градиентах в CSS, мы говорим о цветных градиентах.
В CSS существует два типа градиентов:
- линейные: цвета идут от одной точки к другой, по прямой линии;
- радиальные: цвета идут от центра круга к его краям, во всех направлениях.
Градиент считается фоновым изображением и должен использоваться с соответствующим свойством.
linear-gradient
Синтаксис для линейных градиентов является довольно сложным, но основная идея заключается в следующем:
- определить желаемые цвета;
- где эти цвета должны появиться вдоль оси (в начале, середине, конце и т. д.);
- в каком направлении должен идти градиент.
Давайте начнём с простого градиента из двух цветов:
Простой вертикальный фоновый градиент.Изменение направления
Если направление сверху вниз вам не подходит, вы можете поменять его на один из вариантов:
- определить назначение градиента, с помощью таких ключевых слов, как to left top ;
- определить конкретный угол в градусах, вроде 45deg .
Это направление должно быть установлено перед цветом:
Диагональный градиент от левого верхнего угла в правый нижний угол.Если вы хотите задать конкретный угол, то можете использовать значение в градусах:
- 0deg — снизу вверх;
- 20deg — немного по диагонали, идущей по часовой стрелке;
- 90deg — подобно 15 часам, слева направо;
- 180deg — это значение по умолчанию, сверху вниз.
Диагональный градиент с углом 20 градусов.Добавление большего количества цветов
Вы можете вставить столько цветов, сколько захотите. Они будут равномерно распределены вдоль оси:
- два цвета: 0% и 100%
- три цвета: 0%, 50% и 100%
- четыре цвета: 0%, 33%, 67% и 100%
Довольно некрасивый градиент, но тут важна идея.Определение конкретных точек цвета
Если вы не хотите, чтобы цвет распределялся равномерно, то можете установить определённые позиции цвета, используя либо проценты (%), либо пиксели (px):
Тоже уродливый градиент, но тут важна идея.В данных параметрах:
- у цвета orange не задана позиция цвета, так что значение по умолчанию равно 0%;
- цвет grey ближе к верху, на 10% вместо 50%;
- цвет yellow занимает половину градиента, от 50% и до конца 100%.
radial-gradient
В то время как линейные градиенты идут вдоль одиночной оси, радиальные градиенты распространяются во всех направлениях. Их синтаксис очень похож на линейные градиенты, поскольку у тех и других есть точки цвета. Но вместо указания направления вам необходимо задать:
- форму: круг или эллипс;
- начальную точку: которая будет центром круга или эллипса;
- конечную точку: где будет край круга или эллипса.
Это очень похоже на солнце, не так ли?- градиент является эллипсом;
- первый цвет начинается в центре;
- последний цвет заканчивается в самом дальнем углу.
Начальная позиция
Начальная позиция работает как background-position. Вы можете установить её через ключевое слово at .
Мрачный день.Конечная позиция
По умолчанию форма завершается в самом дальнем углу. Вы можете выбрать:
- closest-side
- closest-corner
- farthest-side
- farthest-corner
Разница одновременно трудна для понимания и представления, поэтому я не буду вдаваться в подробности. У Mozilla есть хорошее описание различных значений.
div < background-image: radial-gradient(closest-corner at 20px 20px, green, blue); padding: 1rem; width: 300px; >div:hover
Наведите указатель мыши на эту зелёную звезду в небе, чтобы увидеть как она расширяется.Фиксированный размер
Вместо установки начальной и конечной позиций, вы можете просто задать конкретные размеры:
Небольшой фиолетовый диск в море розового цвета.Градиенты в CSS являются мощным средством, учитывая бесконечное число вариантов.
Примеры на этой странице умышленно сделаны «некрасивыми», с ярко выраженными различиями цветов, чтобы лучше объяснить, как работает каждое свойство.
Но довольно легко писать едва уловимые градиенты, особенно для кнопок:
.button-grey < background-image: linear-gradient(#f2f2f2, #f2f2f2); >.button-yellow < background-image: linear-gradient(#fce374, #fcdf5b); >.button-orange < background-image: linear-gradient(#f58a38, #f57c20); >.button-red < background-image: linear-gradient(#ed6d64, #ed574c); >.button-purple < background-image: linear-gradient(#847bba, #7568ba); >.button-blue < background-image: linear-gradient(#42b0e3, #2ba9e3); >.button-green
Генератор градиентов CSS
Частичная поддержка с использованием синтаксиса filter
Полная поддержка с использованием SVG (выберите «IE9 поддержка»)
Использование браузера: 0.05%
Выберите «Максимальная совместимость» для поддержки
Поддержка с использованием префикса -moz-
Использование браузера: 0.01%
Выберите «Максимальная совместимость» для поддержки
Поддержка с использованием префикса -webkit-
Использование браузера: 0%
Выберите «Максимальная совместимость» для поддержки
Поддержка с использованием префикса -webkit-
Использование браузера: 0.01%
Выберите «Максимальная совместимость» для поддержки
Поддержка с использованием префикса -o-
Использование браузера: 0%
Выберите «Максимальная совместимость» для поддержки
Поддержка с использованием префикса -webkit-
Использование браузера: 0%
Выберите «Максимальная совместимость» для поддержки
Поддержка с использованием префикса -webkit-
Использование браузера: 0.09%
Выберите «Максимальная совместимость» для поддержки
Полная поддержка (без префикса)
Полная поддержка (без префикса)
Полная поддержка (без префикса)
Полная поддержка (без префикса)
Полная поддержка (без префикса)
Полная поддержка (без префикса)
Полная поддержка (без префикса)
Полная поддержка (без префикса)
Полная поддержка (без префикса)
поддержка IE9 (?) Максимальная совместимость
Поддержка полных градиентов с несколькими точками остановки для IE9 (с использованием SVG). Добавьте класс «gradient» ко всем вашим элементам, которые имеют градиент, и добавьте следующее переопределение в ваш HTML для завершения поддержки IE9:
Что нового
- » Не генерировать префиксные синтаксисы по умолчанию (включите обратно в режиме ‘Максимальная совместимость’)
Предыдущие версии (English)
- » Don’t generate older Opera, IE10 Preview, Webkit syntax by default (turn back on using «Maximize compatibility» mode)
- » Browser Compatibility panel showing supported browser versions, usage stats etc.
- » Support for radial and diagonal linear gradients
- » Support for full multi-stop gradients in Internet Explorer 9 (IE9) using SVG
- » Support for Sass SCSS format using Compassmixins (needs latest beta of Compass)
- » Copy to clipboard button for quickly grabbing the generated code
- » Easy resizing of preview panel by dragging its corner
- » Opacity support
- · Create transparent css gradients, or add fade-in, fade-out, semi-transparency and similar effects
- · Add any number of opacity stops to your gradient
- · Supports opacity stops at any position — completely independent of color stops
- · Automatically switch to rgba/hsla color output mode when transparency is used
- · Outputs older Internet Explorer opacity format (yes, this will even work with IE6!)
- · Opacity support when importing from CSS
- · Supports importing gradients with transparency from an image
- » New ‘Adjustments’ panel — tweak your gradient or create new flavors
- · Adjust hue, saturation and lightness
- · Reverse current gradient
- » Added support for 4 new gradient formats:
- · IE 10+
- · Newer Webkit
- · Opera 11.10+
- · W3C
- » Import from an image — convert an existing gradient image to CSS
- · Supports complex multi-stop gradients
- · Upload an image or import from an image URL
- » Import from CSS — enter existing gradient CSS in various formats and import it into the tool
- » Save your gradients as new presets
- · Edit your gradient, enter its name and hit ‘new’
- · Remove any of your preset gradients using its context menu (right click)
- · Your gradient presets will be persisted in the tool across sessions
Об этом
Редактор Ultimate CSS Gradient был создан Alex Sirota. Если этот инструмент вам понравился, ознакомьтесь с ColorZilla для более продвинутых инструментов, таких как инструменты для выбора цвета, палитровые редакторы и анализаторы сайтов.
Как вы, возможно, знаете, HTML5 ввел множество интересных возможностей для веб-разработчиков. Одной из таких возможностей является возможность указывать градиенты с помощью чистого CSS3, без необходимости создавать изображения и использовать их как повторяющиеся фоны для создания градиентных эффектов.
Важно: Для использования этого Генератора градиентов вам понадобится свежая версия Firefox, Chrome, Safari, Opera или IE. Результативные CSS градиенты являются кроссбраузерными — они будут работать в этих браузерах и также вернутся к более простому градиенту в старых версиях Internet Explorer.
Особенности
- Мощный интерфейс, похожий на Photoshop
- Кроссбраузерный вывод CSS
- Горизонтальные, вертикальные, диагональные и радиальные градиенты
- Комплексные градиенты с несколькими точками остановки
- Поддержка прозрачности с несколькими точками прозрачности
- Форматы цветов Hex, rgb, rgba, hsl, hsla
- Поддержка полных градиентов с несколькими точками остановки в IE9
- Импорт из изображения (конвертирование градиента изображения в CSS)
- Импорт из существующего CSS
- Регулировка градиента по оттенку, насыщенности и светлоте
- Более 135 предустановленных градиентов
- Сохранение пользовательских предустановок градиентов
- Вывод Sass
- Гибкая панель предварительного просмотра
- Постоянные ссылки на градиенты для отправки и обмена
- Скоро больше!
Помощь
- » Регулировать позицию градиентного маркера, перетаскивая маркер
- » Корректировать цвет стопа двойным кликом по маркеру стопа
- » Удалить стоп, перетаскивая маркер стопа вверх или вниз
- » Добавить новый стоп, щелкнув где-либо между существующими маркерами стопа
Панель ‘Предпросмотра’ позволяет предварительно просматривать текущий градиент как вертикальный или горизонтальный, а также быстро предварительно просматривать, как будет выглядеть градиент-запасной в IE.
Наконец, панель ‘CSS’ всегда содержит CSS для текущего градиента для удобства копирования и вставки в ваш стиль. Вы также можете использовать эту панель для импорта существующего CSS градиента в инструмент.
Благодарности
Градиентные предустановки ‘Ultimate Web 2.0 Gradients’ были получены на основе работы deziner folio и SGlider12.
Пипетка для выбора цвета является незначительной адаптацией работы John Dyer’s Color Picker.
Функция кодирования Base-64 взята от webtoolkit.
Tags: CSS Gradient Editor, CSS Gradient Generator, HTML5 Gradient Generator, CSS3 Gradient Generator, CSS Gradient Maker, CSS Gradient Creator, Linear Gradients, Radial Gradients, IE6, IE7, IE8, IE9, IE10, SVG Gradients, ColorZilla Редактор CSS градиента, Генератор CSS градиента, Генератор градиента HTML5, Генератор градиента CSS3, Создатель CSS градиента, Линейные градиенты, Радиальные градиенты, Градиенты SVG
Copyright © 2023 iosart labs llc, All Rights Reserved
Создание красивых градиентов на 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:
(Здесь мы используем линейные градиенты, но тот же трюк работает с радиальными и коническими градиентами!)
Но постойте, разве движок CSS не использует RGB-интерполяцию для вычисления пространств между каждым из указанных цветов? Если мы не передаём сотни цветов, достаточные для каждого отдельного пикселя, то всё равно используем RGB-интерполяцию!
Да, это правда, но, к счастью, это не особо важно.
Когда два цвета очень схожи друг с другом, на самом деле не важно, какую цветовую модель мы используем. Градиент получится приблизительно одинаковым. Мы не получим сильно отличающееся «среднее» значение, как бы мы ни вычисляли это «среднее».
Например, вот градиент, в котором используются два очень схожих цвета:
Цвета настолько близки, что RGB-интерполяция никак не может их испортить.
Итак, наш хитрый трюк заключается в том, чтобы сгенерировать набор промежуточных точек в выбранной цветовой модели и передать их в функцию градиента CSS. Движок CSS воспользуется RGB-интерполяцией, но это не повлияет на окончательный результат (по крайней мере, не настолько, чтобы это было заметно людям).
Ну а теперь самое интересное. Давайте поговорим о том, как генерировать эти градиенты.
Знакомство с генератором градиентов
Я создал инструмент, позволяющий генерировать роскошные, красивые градиенты, которые можно использовать в CSS:
Я в восторге от этого инструмента. В нём используются все элементы, о котором говорилось в посте, а также другие трюки (типа применения кривой для управления распределением цветов).
Настраивайте цвета, пока не получите нужный результат, а затем скопируйте фрагмент кода CSS внизу. Пока инструмент генерирует только линейные градиенты, но вы можете скопипастить набор цветов CSS и применять их в радиальных и конических градиентах!
Предыдущие работы
На создание собственного генератора меня вдохновили эти два чудесных генератора градиентов:
- Vivid Gradient Generator Tool Эрика Кеннеди
- Polychroma, созданный @stormwarning