CSS -градиенты
Градиенты CSS позволяют отображать плавные переходы между двумя или более указанными цветами.
CSS определяет три типа градиентов:
- Линейные градиенты (движение вниз/вверх/влево/вправо/по диагонали)
- Радиальные градиенты (определяются их центром)
- Конические градиенты (повернутые вокруг центральной точки)
Линейные градиенты CSS
Чтобы создать линейный градиент, вы должны определить как минимум две точки цвета. Остановки цвета — это цвета, между которыми вы хотите сделать плавные переходы. Вы также можете установить начальную точку и направление (или угол) вместе с эффектом градиента.
Синтаксис
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Направление — сверху вниз (по умолчанию)
В следующем примере показан линейный градиент, который начинается сверху. Он начинается красным, переходя в желтый:
Пример
#grad {
background-image: linear-gradient(red, yellow);
}
Направление - слева направо
В следующем примере показан линейный градиент, который начинается слева. Он начинается красным, переходя в желтый:
Пример
#grad {
background-image: linear-gradient(to right, red , yellow);
}
Направление - Диагональ
Вы можете сделать градиент по диагонали, указав как горизонтальное, так и вертикальное начальное положение.
В следующем примере показан линейный градиент, который начинается слева вверху (и идет вниз справа). Он начинается красным, переходя в желтый:
Пример
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
Использование углов
Если вы хотите больше контролировать направление градиента, вы можете определить угол вместо предопределенных направлений (вниз, вверх, вправо, влево, вправо вниз и т. д.). Значение 0deg эквивалентно «наверх». Значение 90 градусов эквивалентно «вправо». Значение 180 градусов эквивалентно «вниз».
Синтаксис
background-image: linear-gradient(angle, color-stop1, color-stop2);
В следующем примере показано, как использовать углы для линейных градиентов:
Пример
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
Использование нескольких цветовых точек
В следующем примере показан линейный градиент (сверху вниз) с несколькими точками цвета:
Пример
#grad {
background-image: linear-gradient(red, yellow, green);
}
В следующем примере показано, как создать линейный градиент (слева направо) с цветом радуги и некоторым текстом:
Пример
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Использование прозрачности
Градиенты CSS также поддерживают прозрачность, которую можно использовать для создания эффектов затухания.
Чтобы добавить прозрачности, мы используем функцию rgba() для определения точек цвета. Последний параметр в функции rgba() может принимать значения от 0 до 1 и определяет прозрачность цвета: 0 указывает на полную прозрачность, 1 указывает на полный цвет (без прозрачности).
В следующем примере показан линейный градиент, который начинается слева. Он начинается полностью прозрачным, переходя в полноцветный красный цвет:
Пример
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
Повторение линейного градиента
Функция Repeating-linear-gradient() используется для повторения линейных градиентов:
Пример
Повторяющийся линейный градиент:
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}