С появлением CSS3 стилевые возможности сайта очень расширились — начиная с малых стилей, заканчивая анимацией. В этой статье речь пойдет про Градиент в CSS.
Градиент (от лат. gradiens, род. падеж gradientis — шагающий, растущий). С математической точки зрения — это вектор, в направлении которого переменная меняется из одной точки в другую.
В компьютерной графике — это вид фона (заливки) где один цвет плавно переходит в другой. То есть, как и в математике, есть и направление (вектор) и переменная которая меняется (цвет).
В графике существуют следующие виды градиента:
Линейный градиент
Линейный градиент — цвет меняется по прямой: справа-налево, сверху-вниз и т.д.
Для того,чтобы задать линейный градиент нужно задать следующие параметры:
— начальная точка (та с которой начнется изменение исходного цвета), которая определяет направление. Может задаваться с помощью слов (top, right, bottom, left) или градусов (0deg — 360deg);
— цвета перехода (минимум два цвета, но можно гораздо больше);
Синтаксис
В самом простом написании будет минимум три величины:
Пример
Синтаксис написания линейного градиента может быть значительно расширен путем добавления координат перехода цветов. Координаты задаются в процентах, где 0% — начало градиента, а 100% конец;
linear-gradient (top, white 10%, red 70%, blue 90%);
Пример
Радиальный градиент
Синтаксис радиального градиента очень похож, только вместо направления нужно задать позицию градиента.
Также можно указать форму которая может быть сферической (circle) или эллиптическая (ellipse). По умолчанию форма градиента эллиптическая.
radial-gradient (center, circle, red 30%, blue 60%);
Пример
Напишите, пожалуйста, еще уроков про стили, у вас очень хорошо и доступно получается излагать материал.
Екатерина, спасибо большое за такой отзыв. Буду признательна, если Вы напишите что именно Вас интересует, так как я обычно пишу от души. Чем в данный момент занимаюсь о том и пишу.