CSS3 Градиенты

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

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

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

• Линейные градиенты — направление вниз/вверх/влево/вправо/по диагонали
• Радиальные градиенты — определяются их центром

Свойства, связанные с линейным градиентом:background-image。

Онлайн-инструмент для линейного градиента:Online Gradient Tool.

Поддержка браузеров

Числа в таблице показывают первую версию браузера, которая полностью поддерживает это свойство.

Примечание:IE8 и более ранние версии браузеров IE не поддерживают это свойство.

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

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

Примеры линейных градиентов:

Синтаксис

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

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

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

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

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

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

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

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

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

Если вы хотите более точно управлять направлением градиента, можно задать угол вместо предопределённого направления (to bottom, to top, to right, to left, to bottom right и т. д.).

Синтаксис

background-image: linear-gradient(angle, color-stop1, color-stop2);

Угол — это угол между горизонтальной линией и линией градиента, отсчитываемый против часовой стрелки. Другими словами, 0deg создаст градиент снизу вверх, а 90deg — градиент слева направо.

Однако учтите, что многие браузеры (Chrome, Safari, Firefox и т. д.) используют старый стандарт, где 0deg создаст градиент слева направо, а 90deg — снизу вверх. Формула преобразования:90 - x = yгде x — стандартный угол, а y — нестандартный угол.

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

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

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

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

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

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

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

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

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

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

Радиальные градиенты CSS3

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

Чтобы создать радиальный градиент, необходимо также определить как минимум две цветовые остановки. Цветовые остановки — это цвета, между которыми вы хотите создавать плавные переходы. Вы также можете указать центр градиента, форму (круг или эллипс) и размер. По умолчанию центр градиента — center (то есть в центральной точке), форма — ellipse, а размер — farthest-corner.

Примеры радиальных градиентов:

Синтаксис

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

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

Радиальный градиент — неравномерно распределённые цветовые остановки

Задать форму

Параметр shape определяет форму. Он может принимать значение circle или ellipse. Здесь circle означает круг, а ellipse означает эллипс. Значение по умолчанию — ellipse.

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

Параметр size определяет размер градиента. Он может быть одним из следующих четырёх значений:

• closest-side
• farthest-side
• closest-corner
• farthest-corner

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

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