Градиент

linear — gradient ( )

Функция для создания фона в виде градиента или повторяющегося паттерна.

Время чтения: меньше 5 мин

1. Кратко
2. Пример
3. Как понять
4. Как пишется
   1. Количество цветов
   2. Точки остановки цвета
   3. Направление градиента
   4. Повторяющийся градиент
   5. Множественные градиенты
   1. Денис Ежков советует
   2. Алёна Батицкая советует

   Обновлено 20 декабря 2021

   Кратко

   Скопировать ссылку «Кратко» Скопировано

   Функция linear — gradient используется для задания фона в виде линейного градиента.

   Пример

   Скопировать ссылку «Пример» Скопировано

    .element  background-image: linear-gradient(#6e4aff, #49A16C);> .element  background-image: linear-gradient(#6e4aff, #49A16C); >    Скопировать Скопировано Не удалось скопировать   

   Как понять

   Скопировать ссылку «Как понять» Скопировано

   Градиент — это плавный переход между цветами. Линейный градиент описывает изменение цвета вдоль прямой линии. В отличие от фоновых изображений градиент не может иметь конкретных размеров и его фактический размер совпадает с размером элемента.

   Как пишется

   Скопировать ссылку «Как пишется» Скопировано

   Самый простой вид градиента — переход между двумя цветами:

    .element  background-image: linear-gradient(#2E9AFF, #F498AD);> .element  background-image: linear-gradient(#2E9AFF, #F498AD); >    Скопировать Скопировано Не удалось скопировать   

   

   Мы можем задавать направление градиента, используя ключевые слова с приставкой to : to left , to top , to right , to bottom (по умолчанию). Значения имеют следующие эквиваленты в углах:

   Ключевые слова можно сочетать, чтобы направить градиент в нужный угол элемента: to top left будет рисовать градиент из правого нижнего в левый верхний угол.

   Повторяющийся градиент

   Скопировать ссылку «Повторяющийся градиент» Скопировано

   Если градиент должен многократно повторяться, можно использовать функцию repeating — linear — gradient ( ) .

   Множественные градиенты

   Скопировать ссылку «Множественные градиенты» Скопировано

   Множественный фон элемента может применяться и к градиентам.

   Подсказки

   Скопировать ссылку «Подсказки» Скопировано

   💡 Градиент можно анимировать! 🥳

   На практике

   Скопировать ссылку «На практике» Скопировано

   Денис Ежков советует

   Скопировать ссылку «Денис Ежков советует» Скопировано

   🛠 Используя возможность резких переходов между цветами, можно генерировать различные паттерны при помощи линейного градиента. Яркий пример — разлинованный под школьную тетрадь фон:

   Алёна Батицкая советует

   Скопировать ссылку «Алёна Батицкая советует» Скопировано

   🛠 Если нужно создать линейный градиент, уходящий в прозрачность, то вы неминуемо столкнётесь с проблемой в Safari и iOS. Во всех браузерах ключевое слово transparent отрабатывает ожидаемо, плавно уводя градиент в прозрачность. А в Safari и iOS из-за особенностей реализации именно этого ключевого слова градиент будет уходить в грязный чёрный.

    .element  background: linear-gradient(#F498AD 10%, transparent);> .element  background: linear-gradient(#F498AD 10%, transparent); >    Скопировать Скопировано Не удалось скопировать   

   Линейный градиент в Chrome, красиво растворяется

   

   Ровно тот же самый градиент, но в Safari. Это вообще легально? 😐

   

   Решить этот баг можно довольно просто, хоть немного и больно. Нужно вместо ключевого слова transparent указать предыдущий цвет градиента, но с нулевой прозрачностью. Визуально итог будет тот же, и даже в Safari всё заработает.

    .element  background: linear-gradient(#F498AD 10%, rgb(244 152 173 / 0));> .element  background: linear-gradient(#F498AD 10%, rgb(244 152 173 / 0)); >    Скопировать Скопировано Не удалось скопировать   

   🛠 Статьи и сборники классных паттернов, созданных при помощи градиентов:

   Источник

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

   Градиентом называют плавный переход от одного цвета к другому, причём самих цветов и переходов между ними может быть несколько. С помощью градиентов создаются самые причудливые эффекты веб-дизайна, например, псевдотрёхмерность, блики, фон и др. Также с градиентом элементы смотрятся более симпатично, чем однотонные.

   Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство background-image или универсальное свойство background , как показано в примере 1.

   HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

   Результат данного примера показан на рис. 1.

   

   Рис. 1. Линейный градиент для абзаца

   В самом простом случае с двумя цветами продемонстрированном в примере 1 вначале пишется позиция, от которой будет начинаться градиент, затем начальный и конечный цвет.

   

   Для записи позиции вначале пишется to , а затем добавляются ключевые слова top , bottom и left , right , а также их сочетания. Порядок слов не важен, можно написать to left top или to top left . В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #000 и #fff, по другому от чёрного к белому.

   Табл. 1. Типы градиента

   Позиция	Угол	Описание	Вид
   to top	0deg	Снизу вверх.
   to left	270deg	Справа налево.
   to bottom	180deg	Сверху вниз.
   to right	90deg	Слева направо.
   to top left	От правого нижнего угла к левому верхнему.
   to top right	От левого нижнего угла к правому верхнему.
   to bottom left	От правого верхнего угла к левому нижнему.
   to bottom right	От левого верхнего угла к правому нижнему.

   Вместо ключевого слова допускается задавать угол наклона градиентной линии, который показывает направление градиента. Вначале пишется положительное или отрицательное значение угла, затем к нему слитно добавляется deg.

   

   Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке. Отсчёт угла наклона градиентной линии показан ниже.

   

   Для значения top left и ему подобных угол наклона градиентной линии вычисляется, исходя из размеров элемента так, чтобы соединять две диагонально противоположные угловые точки.

   Для создания сложных градиентов двух цветов уже будет недостаточно, синтаксис позволяет добавлять их неограниченное количество, перечисляя цвета через запятую. При этом можно использовать прозрачный цвет (ключевое слово transparent ), а также полупрозрачный с помощью формата RGBA, как показано в примере 2.

   Пример 2. Полупрозрачные цвета

   HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

        body < background: url(images/celtic1.png); >div 
   Генезис свободного стиха, несмотря на внешние воздействия, отталкивает словесный метаязык.
     

   Результат данного примера показан на рис. 2.

   

   Рис. 2. Градиент с полупрозрачными цветами

   Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию. В примере 3 показано создание градиентной кнопки, в которой положение второго цвета из трёх задано как 36%.

   Пример 3. Градиентная кнопка

   HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

          Нажми меня нежно  

   Результат данного примера показан на рис. 3.

   

   За счёт задания положения цвета можно получить резкие переходы между цветами, что в итоге даёт набор однотонных полосок. Так, для двух цветов надо указать четыре цвета, первые два цвета одинаковы и начинаются от 0% до 50%, оставшиеся цвета также одинаковы меж собой и продолжаются от 50% до 100%. В примере 4 полоски добавляются в качестве фона веб-страницы. Из-за того, что крайние значения подставляются автоматически их можно не указывать, так что достаточно написать всего-лишь два цвета.

   Пример 4. Однотонные полоски

   HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

          
   Типичная европейская буржуазность и добропорядочность изящно иллюстрирует официальный язык.
     

   Результат данного примера показан на рис. 4. Обратите внимание, что один из цветов градиента задан прозрачным, поэтому он меняется косвенно через цвет фона веб-страницы.

   

   Рис. 4. Фон из горизонтальных полосок

   Градиенты достаточно популярны среди веб-дизайнеров, но их добавление усложняется разными свойствами под каждый браузер и указанием множества цветов. Чтобы вам было проще создавать градиенты и вставлять их в код, рекомендую сайт www.colorzilla.com/gradient-editor с помощью которого легко настроить градиенты и сразу получить нужный код. Имеются готовые шаблоны (Presets), просмотр результата (Preview), настройка цветов (Adjustments), конечный код (CSS), который поддерживает IE через фильтры. Для тех, кто работал в Фотошопе или другом графическом редакторе, создание градиентов покажется плёвым делом, остальным не составит труда быстро разобраться. В общем, всячески рекомендую.

   Статьи по теме

   Источник