Создание градиента в html

A CSS gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element to which it applies.

Syntax

The data type is defined with one of the function types listed below.

Linear gradient

Linear gradients transition colors progressively along an imaginary line. They are generated with the linear-gradient() function.

Radial gradient

Radial gradients transition colors progressively from a center point (origin). They are generated with the radial-gradient() function.

Repeating gradient

Repeating gradients duplicate a gradient as much as necessary to fill a given area. They are generated with the repeating-linear-gradient() and repeating-radial-gradient() functions.

Conic gradient

Conic gradients transition colors progressively around a circle. They are generated with the conic-gradient() function.

Interpolation

As with any interpolation involving colors, gradients are calculated in the alpha-premultiplied color space. This prevents unexpected shades of gray from appearing when both the color and the opacity are changing. (Be aware that older browsers may not use this behavior when using the transparent keyword.)

Formal syntax

=
|
|
|

=
linear-gradient( [ | to ]? , )

=
radial-gradient( [ || ]? [ at ]? , )

=
[ left | right ] ||
[ top | bottom ]

=
, [ ? , ]#

=
|
|

=
[ left | center | right ] || [ top | center | bottom ] |
[ left | center | right | ] [ top | center | bottom | ]? |
[ [ left | right ] ] && [ [ top | bottom ] ]

=
&&
?

=
closest-corner |
closest-side |
farthest-corner |
farthest-side

=
|

Examples

Linear gradient example

div class="linear-gradient">Linear gradientdiv>

div  width: 240px; height: 80px; >

.linear-gradient  background: linear-gradient( to right, red, orange, yellow, green, blue, indigo, violet ); >

Radial gradient example

div class="radial-gradient">Radial gradientdiv>

div  width: 240px; height: 80px; >

.radial-gradient  background: radial-gradient(red, yellow, rgb(30, 144, 255)); >

Repeating gradient examples

Simple repeating linear and radial gradient examples.

div class="linear-repeat">Repeating linear gradientdiv> br /> div class="radial-repeat">Repeating radial gradientdiv>

div  width: 240px; height: 80px; >

.linear-repeat  background: repeating-linear-gradient( to top left, lightpink, lightpink 5px, white 5px, white 10px ); > .radial-repeat  background: repeating-radial-gradient( powderblue, powderblue 8px, white 8px, white 16px ); >

Conic gradient example

A simple conic gradient example. Note that this isn’t supported widely across browser as of yet.

div class="conic-gradient">Conic gradientdiv>

div  width: 200px; height: 200px; >

.conic-gradient  background: conic-gradient(lightpink, white, powderblue); >

Specifications

Browser compatibility

BCD tables only load in the browser

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

CSS Gradients

CSS gradients let you display smooth transitions between two or more specified colors.

CSS defines three types of gradients:

Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
Conic Gradients (rotated around a center point)

CSS Linear Gradients

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

Syntax

Direction — Top to Bottom (this is default)

The following example shows a linear gradient that starts at the top. It starts red, transitioning to yellow:

Example

Direction — Left to Right

The following example shows a linear gradient that starts from the left. It starts red, transitioning to yellow:

Example

Direction — Diagonal

You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.

The following example shows a linear gradient that starts at top left (and goes to bottom right). It starts red, transitioning to yellow:

Example

Using Angles

If you want more control over the direction of the gradient, you can define an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.). A value of 0deg is equivalent to «to top». A value of 90deg is equivalent to «to right». A value of 180deg is equivalent to «to bottom».

Syntax

The following example shows how to use angles on linear gradients:

Example

Using Multiple Color Stops

The following example shows a linear gradient (from top to bottom) with multiple color stops:

Example

The following example shows how to create a linear gradient (from left to right) with the color of the rainbow and some text:

Example

Using Transparency

CSS gradients also support transparency, which can be used to create fading effects.

To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).

The following example shows a linear gradient that starts from the left. It starts fully transparent, transitioning to full color red:

Example

Repeating a linear-gradient

The repeating-linear-gradient() function is used to repeat linear gradients:

Example

A repeating linear gradient:

Источник

Несколько слов о градиентах

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

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

Что такое градиент?

Давайте, для галочки, вспомним, что такое градиент.

Градие́нт (от лат. gradiens, род. падеж gradientis — шагающий, растущий) — вектор, своим направлением указывающий направление наибольшего возрастания некоторой величины \varphi, значение которой меняется от одной точки пространства к другой (скалярного поля), а по величине (модулю) равный скорости роста этой величины в этом направлении

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

Форма записи градиентов в css

Давайте коротко рассмотрим, из чего же состоит классический градиент.

Градиент может быть записан двумя способами:

background: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);
background-image: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);

Какую форму записи использовать — решать вам.

В коде, приведенном выше, мы указали три значения свойств background:

1. То, каким будет градиент — linear-gradient — в данном случае он линейный. В дальнейшем в статье мы будем говорить именно о нем.
2. Указали угол наклона градиентной линии, который показывает направление градиента. Указывать направление можно двумя способами: [ | to ], где угол измеряется в deg, то есть — градус, или вторым способом — указанием позиции от и до. Например, to top, to right, to bottom left и т.д.
Значение цвета #******, которым будет начинаться и заканчиваться градиент.

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

Написание цвета градиентов

Цвет градиента может быть записан любым доступным обозначением:

Hex Color Code — #000000 или сокращением #000;
RGB Color Code — rgb(0, 0, 0);
Color Name — black;
HSL Color Code — hsl(0, 0%, 0%);

Вы также можете указывать цвета в процентном соотношении, добавив после цвета %. Например, rgb(0, 0, 0) 0%, rgb(255,255,255) 100%.

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

Градиенты с изображениями

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

В первом примере мы создали градиентный фон (пример 1), а во втором добавили изображение и наложили на него наш градиент (пример 2).

Градиент для текста

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

Главное помните, что некоторые свойства поддерживаются не всеми версиями браузеров. Проверить совместимость можно на сайте Can I use

Объединение градиентов CSS в режиме Background Blend Mode

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

Такие функции, как linear-gradient(), radial-gradient(), и repeating-linear-gradient(), repeating-radial-gradient() и другие разновидности имеют широкую поддержку и более стандартизированный синтаксис во всех современных браузерах. Однако, свойство background также может включать в себя более одного градиента, причем каждая функция разделяется запятой. Lea Verou продемонстрировала впечатляющие модели — паттерны, которые могут быть созданы с помощью этой техники: от шахматных досок, до кирпичей, до звезд. Но теперь, когда у нас есть свойство background-blend-mode, мы можем создать новые градиенты и шаблоны. Примеры ниже.

Спектральный фон

Наложим три градиента, чтобы создать фон с почти полным спектром цветов, который можно отобразить на мониторе.
.spectrum-background background:
linear-gradient(red, transparent),
linear-gradient(to top left, lime, transparent),
linear-gradient(to top right, blue, transparent);
background-blend-mode: screen;
>

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

Создаем плед на css

Мы также можем создать интересные шаблоны с градиентами при помощи background-blend-mode.
.plaid-background background:
repeating-linear-gradient(
-45deg,
transparent 0,
transparent 25%,
dodgerblue 0,
dodgerblue 50%
),
repeating-linear-gradient(
45deg,
transparent 0,
transparent 25%,
tomato 0,
tomato 50%
),
repeating-linear-gradient(
transparent 0,
transparent 25%,
gold 0,
gold 50%
), white;
background-blend-mode: multiply;
background-size: 100px 100px;
>

В итоге вот что у нас получилось,

Фон сайта с кружочками

Как насчет еще одного, на этот раз с радиальным градиентом:
.circles-background background:
radial-gradient(
khaki 40px,
transparent 0,
transparent 100%
),
radial-gradient(
skyblue 40px,
transparent 0,
transparent 100%
),
radial-gradient(
pink 40px,
transparent 0,
transparent 100%
), snow;
background-blend-mode: multiply;
background-size: 100px 100px;
background-position: 0 0, 33px 33px, -33px -33px;
>

Результат превосходит все ожидания,

Эффект ночного видения

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

Возьмем обычное изображение

и наложим на него радиальный градиент и градиент, который мы использовали при создании пледа — repeating-linear-gradient
.night-vision-effect background:
url(https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg),
radial-gradient(
rgba(0,255,0,.8),
black
),
repeating-linear-gradient(
transparent 0,
rgba(0,0,0,.2) 3px,
transparent 6px
);
background-blend-mode: overlay;
background-size: cover;
>

И вот результат.

Сайты-генераторы градиентов

Ниже я приведу подборку сайтов, позволяющих генерировать те самые градиенты, делать из них canvas, png и svg форматы и копировать код для установки в ваши проекты.

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

Всем удачи и приятного творчества. Пишите в комментариях свои любимые градиенты.

Источник

Читайте также: Linking Pages in HTML

Создание градиента в html