Линейный градиент в CSS
Development | Комментировать запись
Теперь CSS поддерживает градиент – и для этого больше не нужно создавать специальные изображения в других программах! Вы можете легко определить радиальный и линейный градиенты. Градиент по-прежнему является изображением, но теперь это изображение генерируется внутри браузера.
Определить градиент можно в свойстве background или в элементах, что дает нам большую гибкость в отношении направления и цветных точек.
Вот несколько примеров синтаксиса для определения линейных градиентов.
/* Простейший случай */
.box {
background: linear-gradient(black, white);
}
/* Определение направления и добавление третьей цветной точки */
.box {
background: linear-gradient(to top, #211533, #211533,
#3e275f);
}
/* Определение направления в градусах */
.box {
background: linear-gradient(135deg, #211533, #211533,
#3e275f);
}
/* Контроль положения цветных точек */
.box {
background: linear-gradient(135deg, #211533 20%,
#211533 40%, #3e275f);
}
Читайте также: Радиальный градиент в CSS
Направление градиента
Направление линейного градиента можно определить в градусах или с помощью одного из следующих ключевых слов: top bottom, to top, to right, to left, to top left, to top right, to bottom left, to bottom right. Чтобы понять, как они работают, попробуйте использовать их на практике.
Стандартный цвет
Хотя на сегодня большинство браузеров поддерживают градиенты, остались некоторые (старые) браузеры без их поддержки. Поэтому для таких браузеров рекомендуется определить базовый цвет, который будет отображаться вместо градиента. Это делается так:
.box {
background: #211533;
background: linear-gradient(to top, #211533, #211533, #3e275f);
}
Данные о поддержке функции css-gradient вы найдете по этой ссылке.
Читайте также: Градиент и изображения-границы на чистом CSS
