CSS - Градиенты: Яркое путешествие для новичков

Здравствуйте, будущие маги CSS! Сегодня мы окунемся вяркий мир CSS градиентов. Затяните ремни, потому что мы собираемся покрасить веб的颜色, которые плавно перетекают друг в друга. Поверьте мне, к концу этого учебника вы будете создавать color masterpieces, которые сделали бы даже Пикассо завидовать!

Что такое CSS Gradient?

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

Типы CSS Градиентов

В палитре CSS цветов у нас есть три основных типа градиентов:

1. Линейные градиенты
2. Круговые градиенты
3. Конические градиенты

Давайте рассмотрим каждый из них подробнее, не так ли?

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

Линейные градиенты resemble прямую линию colors, изменяющуюся от точки A к точке B. Это наиболее распространенный и最容易 понять, так что давайте начнем здесь.

.linear-gradient {
background: linear-gradient(to right, red, yellow);
}

В этом примере мы создаем градиент, который идет слева направо, начиная с красного и заканчивая желтым. Просто, правда?

Но подождите, есть больше! Мы также можем указать направление, используя углы:

.angled-gradient {
background: linear-gradient(45deg, blue, green);
}

Это создает диагональный градиент от синего к зеленому под углом 45 градусов.

Круговые градиенты

Круговые градиенты resemble.circular rainbows, с colorами, исходящими из центральной точки.

.radial-gradient {
background: radial-gradient(circle, red, yellow, green);
}

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

Конические градиенты

Конические градиенты являются новыми детьми на block. Они resemble.color wheel, с colorами, вращающимися вокруг центральной точки.

.conic-gradient {
background: conic-gradient(red, yellow, green, blue, red);
}

Это создает полный поворот цветов, начинающийся и заканчивающийся красным.

Синтаксис

Теперь давайте разберем синтаксис для этих градиентов:

Тип градиента	Основной синтаксис
Линейный	linear-gradient([направление,] color1, color2, ...)
Круговой	radial-gradient([форма размера на позиции,] color1, color2, ...)
Конический	conic-gradient([от угла,] color1, color2, ...)

Градиенты для границ

Знаете ли вы, что вы можете использовать градиенты и для границ? Это как дать вашим элементам модный ремень!

.gradient-border {
border: 10px solid;
border-image: linear-gradient(to right, red, blue) 1;
}

Это создает границу, которая переходит от красного к синему.

Позиционирование color stops

Color stops resemble.checkpoints в вашем градиенте. Вы можете точно位置 их:

.color-stops {
background: linear-gradient(to right, red 20%, yellow 40%, green 60%, blue 80%);
}

Этот creates a gradient с конкретными colorами transitions на 20%, 40%, 60% и 80% ширины элемента.

Создание резких линий

Хотите резкий color change вместо плавного перехода? Просто используйте одинаковый процент для смежных color stops:

.hard-lines {
background: linear-gradient(to right, red 50%, blue 50%);
}

Это создает резкую линию между красным и синим посредине.

Color Bands Using Gradients

Вы можете создать color bands, повторяя color stops:

.color-bands {
background: linear-gradient(to right, red 25%, yellow 25% 50%, green 50% 75%, blue 75%);
}

Это создает четыре одинаковые по ширине color bands.

Stacked Gradients

Хотите получить действительно modny? Слоите несколько градиентов друг на друга:

.stacked-gradients {
background:
linear-gradient(to right, rgba(255,0,0,0.5), rgba(255,0,0,0)),
linear-gradient(to bottom, rgba(0,0,255,0.5), rgba(0,0,255,0));
}

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

Связанные функции

CSS градиенты являются частью большой семьи image функций. Вот некоторые из связанных функций:

Функция	Описание
repeating-linear-gradient()	Создает повторяющийся линейный градиент
repeating-radial-gradient()	Создает повторяющийся круговой градиент
repeating-conic-gradient()	Создает повторяющийся конический градиент
image()	Генерирует значение изображения
image-set()	Позволяет предоставлять несколько источников изображений для разных разрешений отображения

И вот вы и完成了 свой express курс по CSS градиентам. Помните, ключ к maîtriser градиенты - это экспериментирование. Не бойтесь играть с различными цветами, углами и положениями. Кто знает? Вы можете создать下一ую модную тенденцию в веб-дизайне!

Теперь, идите вперед и раскрашивайте веб своим новыми gradient силами. И помните, в мире CSS нет ошибок, только счастливые little accidents (как бы сказал Боб Росс). Счастливого кодирования!

Credits: Image by storyset