Как сделать радугу в css

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

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

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Линейный градиент для абзаца

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

Табл. 1. Типы градиента

Позиция	Угол	Описание	Вид
to top	0deg	Снизу вверх.
to left	270deg	Справа налево.
to bottom	180deg	Сверху вниз.
to right	90deg	Слева направо.
to top left	От правого нижнего угла к левому верхнему.
to top right	От левого нижнего угла к правому верхнему.
to bottom left	От правого верхнего угла к левому нижнему.
to bottom right	От левого верхнего угла к правому нижнему.

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

Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке. Отсчёт угла наклона градиентной линии показан ниже.

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

Для создания сложных градиентов двух цветов уже будет недостаточно, синтаксис позволяет добавлять их неограниченное количество, перечисляя цвета через запятую. При этом можно использовать прозрачный цвет (ключевое слово transparent ), а также полупрозрачный с помощью формата RGBA, как показано в примере 2.

Пример 2. Полупрозрачные цвета

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Градиент с полупрозрачными цветами

Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию. В примере 3 показано создание градиентной кнопки, в которой положение второго цвета из трёх задано как 36%.

Пример 3. Градиентная кнопка

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера показан на рис. 3.

Рис. 3. Градиентная кнопка

За счёт задания положения цвета можно получить резкие переходы между цветами, что в итоге даёт набор однотонных полосок. Так, для двух цветов надо указать четыре цвета, первые два цвета одинаковы и начинаются от 0% до 50%, оставшиеся цвета также одинаковы меж собой и продолжаются от 50% до 100%. В примере 4 полоски добавляются в качестве фона веб-страницы. Из-за того, что крайние значения подставляются автоматически их можно не указывать, так что достаточно написать всего-лишь два цвета.

Пример 4. Однотонные полоски

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

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

Источник

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

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

Использование mix-blend-mode

Свойство mix-blend-mode определяет режим наложения цвета текста на фоновый цвет. Подобные режимы наложения можно увидеть в графических редакторах вроде Photoshop, соответственно, идея наложения и названия режимов позаимствованы оттуда.

Перед применением этого метода текст надо обернуть в какой-нибудь элемент (

и др.) и установить для него родителя. Мы сделаем такую структуру:

для текста.

ставим белый цвет фона и свойство mix-blend-mode со значением screen (пример 1).

Пример 1. Свойство mix-blend-mode

Результат данного примера показан на рис. 1.

Рис. 1. Градиентный текст

Минусы

Плюсы

-webkit-text-fill-color нужен для того, чтобы убрать исходный цвет у самого текста, без этого свойства метод работать не будет (пример 2).

Результат данного примера показан на рис. 2.

Рис. 2. Градиентный текст

Минусы

Плюсы

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

Источник

CSS Gradients

Градиенты CSS позволяют отображать плавные переходы между двумя или более указанными цветами.

CSS определяет два типа градиентов:

CSS линейные градиенты

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

Синтаксис

Линейный градиент-сверху вниз (по умолчанию)

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

Пример

Линейный градиент-слева направо

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

Пример

Линейный градиент-Диагональ

Можно сделать градиент по диагонали, указав как горизонтальные, так и вертикальные начальные позиции.

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

Пример

Использование углов

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

Синтаксис

Угол указывается в виде угла между горизонтальной линией и линией градиента.

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

Пример

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

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

Пример

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

Пример

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

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

Чтобы добавить прозрачность, мы используем функцию RGBA () для определения ограничителей цвета. Последний параметр в функции RGBA () может быть значением от 0 до 1, и он определяет прозрачность цвета: 0 указывает на полную прозрачность, 1 указывает на полный цвет (без прозрачности).

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

Пример

Повторение линейного градиента

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

Пример

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

CSS радиальные градиенты

Радиальный градиент определяется его центром.

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

Синтаксис

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

Радиальный градиент-равномерное расстояние между цветами останавливается (по умолчанию)

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

Пример

Радиальный градиент-по-разному пробелом останавливается цвет

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

Пример

Задать форму

Параметр Shape определяет форму. Он может принимать значение окружности или эллипса. Значением по умолчанию является эллипс.

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

Пример

Использование различных ключевых слов размера

Параметр size определяет размер градиента. Он может принимать четыре значения:

Пример

Радиальный градиент с различными ключевыми словами размера:

#grad1 <
background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
>

#grad2 <
background: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
>

Повторение радиального градиента

Функция повторения-радиального градиента () используется для повторения радиальных градиентов:

Источник

CSS функции: линейные градиенты

В предыдущей статье «Работа с фоном элемента в CSS» мы с Вами рассмотрели методы работы с таким свойством как background-image, которое позволяет задать одно или несколько фоновых изображений. Но это не единственное его применение, в CSS 3 была введена возможность использования фоновых градиентов в качестве фонового изображения. Другими словами задача по созданию градиента была возложена на браузер.

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

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

Функция linear-gradient() (линейный градиент) – является самой простой в понимании, она распространяет градиент по прямой от одного края элемента к другому с плавно переходящими цветовыми оттенками.

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

Результат нашего примера представлен на изображении:

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

Позиция градиента (использование ключевых слов).

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

Ключевое слово	Позиция градиента
to left	Градиент размещается справа налево.
to right	Градиент размещается слева направо.
to top	Градиент размещается снизу вверх.
to bottom	Градиент размещается сверху вниз. Это значение по умолчанию.
to left top	Градиент размещается от правого нижнего угла к левому верхнему.
to right top	Градиент размещается от левого нижнего угла к правому верхнему.
to left bottom	Градиент размещается от правого верхнего угла к левому нижнему.
to right bottom	Градиент размещается от левого верхнего угла к правому нижнему.

Давайте рассмотрим пример использования:

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

Результат нашего примера представлен на изображении:

Рис. 124 Позиция градиента (использование ключевых слов).

Обращаю Ваше внимание, что градиенты имеют следующую поддержку браузерами:

Функция	Chrome	Firefox	Opera	Safari	IExplorer	Edge
linear-gradient()	26.0 10.0 -webkit-	16.0 3.6 -moz-	12.1 11.1 -o-	6.1 5.1 -webkit-	10.0	12.0

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

Вендорные префиксы в большинстве случаев применяются непосредственно к CSS свойству:

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

В нашем случае значением свойства выступает функция и нам необходимо использовать вендорные индексы не к нашему свойству background-image – его поддерживают практически все браузеры с первых своих версий, а к значению (к функции linear-gradient()).

Еще один нюанс использования градиентов заключается в том, что раньше использовался другой синтаксис описания градиентов при использовании значений с вендорными индексами (индексами производителей). При использовании ключевых слов необходимо указывать их значение без предлога to и описывать градиент конечной точкой, а не точкой к которой должен проходить градиент:

Для удобства вы можете использовать следующую таблицу:

Значение без префикса	Значение с префиксом производителя	Позиция градиента
to left	right	Градиент размещается справа налево.
to right	left	Градиент размещается слева направо.
to top	bottom	Градиент размещается снизу вверх.
to bottom	top	Градиент размещается сверху вниз. Это значение по умолчанию.
to left top	right bottom	Градиент размещается от правого нижнего угла к левому верхнему.
to right top	left bottom	Градиент размещается от левого нижнего угла к правому верхнему.
to left bottom	right top	Градиент размещается от правого верхнего угла к левому нижнему.
to right bottom	left top	Градиент размещается от левого верхнего угла к правому нижнему.

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

Кроме того, он предоставляет альтернативный способ подключения градиента для браузеров Internet Explorer версий с 6ой по 9ую. Старость надо уважать, но давайте смотреть в будущее и не будем рассматривать методы работы с фильтрами Internet Explorer в учебнике.

Позиция градиента (использование градусов).

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

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

Рис. 125 Расположение градиента, заданного в градусах в квадратном элементе.

Значение в градусах	Соответствует ключевому слову	Размещение градиента
0 deg	to top	Снизу вверх.
45deg	to right top *	Градиент размещается под углом 45 градусов к точке пересечения линии координат.
90deg	to right	Слева направо.
135 deg	to right bottom *	Градиент размещается от левого верхнего угла к правому нижнему.
180deg	to bottom	Сверху вниз. Это значение по умолчанию.
225deg	to left bottom *	Градиент размещается от правого верхнего угла к левому нижнему.
270deg	to left	Справа налево.
315deg	to left top *	Градиент размещается от правого нижнего угла к левому верхнему.

Рис. 126 Расположение градиента в прямоугольном элементе (сравнение 45deg и to right top).

Выше были рассмотрены нюансы использование ключевых слов для поддержки «старых браузеров», как и с ключевыми словами, нам необходимо использовать для значений с вендорным индексом (индексом производителя) синтаксис, который использовался до современного стандарта. Точнее нам надо учесть тот факт, что рендеринг градиентов осуществлялся по тому принципу, что 0deg соответствовало расположение градиента вправо, а не к вершине (необходимо сделать поправку на 90 градусов ).

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

Мы хотим, чтобы на нашем сайте была более широкая поддержка браузеров, в том числе старых браузеров и мобильного браузера UC Browser для Android, который работает с градиентами, только если указан вендорный индекс –webkit–.

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

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

Теперь как это будет выглядеть объявление для поддержки старых браузеров:

Рассмотрим, как этот пример будет выглядеть в браузере, и перейдем к следующей теме:

Результат нашего примера:

Рис. 127 Позиция градиента (использование градусов).

Точки остановки градиента

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

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

Допускается указывать значения точек остановки (color stops) в единицах измерения длины (например – px или em), так и в процентных значениях. Как правило, процентные значения являются более удобными и адаптивными в использовании.

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

Рассмотрим использование точек остановки градиента на следующем примере:

Результат нашего примера:

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

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

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

В следующем примере мы создадим флаг Швейцарии (один к одному), используя три градиента, которые мы укажем в одном объявлении:

Рис. 129 Порядок наложения градиентов в примере.

Результат нашего примера:

Рис. 130 Пример создания флага Швейцарии с использованием нескольких градиентов.

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

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

Современный стандарт CSS 3 позволяет создать шаблон градиента с определенными точками остановки и повторить его по всему фону элемента. За повтор линейного градиента отвечает одноименная функция repeating-linear-gradient(), которая имеет следующий синтаксис:

Функция repeating-linear-gradient() имеет следующую поддержку браузерами:

Функция	Chrome	Firefox	Opera	Safari	IExplorer	Edge
repeating-linear-gradient()	26.0 10.0 -webkit-	16.0 3.6 -moz-	12.1 11.1 -o-	6.1 5.1 -webkit-	10.0	12.0

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

Рассмотрим применение функции:

Результат нашего примера:

Рис. 131 Пример использования повторяющихся линейных градиентов.

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

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

Результат нашего примера:

Рис. 132 Повторяющиеся линейные градиенты (четкие переходы между цветами).

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

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

Рассмотрим применение нескольктх функции repeating-linear-gradient() в одном объявлении:

Результат нашего примера:

Рис. 132a Повторяющиеся линейные градиенты (несколько функций).

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Практическое задание № 29.

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

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

Источник