Главная страница Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Линейный градиент linear-gradient()
|
|
Градиентный фон
Содержание:
1. Линейный градиент: linear-gradient()
2. Радиальный градиент: radial-gradient()
3. Повтор градиента: repeating-linear-gradient() и repeating-radial-gradient()
4. Кроссбраузерный градиент
5. Фильтры
Линейный градиент linear-gradient()
Линейный градиент создается с помощью двух и более цветов, для которых задано направление, или линия градиента.
Если направление не указано, используется значение по умолчанию — сверху-вниз.
Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.
Синтаксис
| {background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.); } |
Направление градиента может быть задано двумя способами:
с помощью угла наклона в градусах deg, значение которого определяет угол наклона линии внутри элемента.
| div { height: 200px; background: linear-gradient(45deg, #EECFBA, #C5DDE8); } |
с помощью ключевых слов to top, to right, to bottom, to left, которые соответствуют углу градиента, равному 0deg, 90deg, 180deg и270deg соответственно.
| div { height: 200px; background: linear-gradient(to right, #F6EFD2, #CEAD78); } |
Если направление задано парой ключевых слов, например, to top left, то начальная точка градиента будет расположена в противоположном направлении, в данном случае справа внизу.
| div { height: 200px; background: linear-gradient(to top left, powderblue, pink); } |
Для неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops. Точки остановки задаются в %, где 0% — начальная точка, 100% — конечная точка, например:
| div { height: 200px; background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%); } |
Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:
| div { height: 200px; background: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%); } |