Главная » Языки программирования

Сделать градиентные цвета css

Содержание
  1. Линейные градиенты
  2. linear-gradient
  3. Угол или направление градиента
  4. Управление положением цветов
  5. repeating-linear-gradient
  6. Ограничения
  7. Сайдбар
  8. Статьи
  9. Страницы
  10. Проекты
  11. linear — gradient ( )
  12. Кратко
  13. Пример
  14. Как понять
  15. Как пишется
  16. Повторяющийся градиент
  17. Множественные градиенты
  18. Подсказки
  19. На практике
  20. Денис Ежков советует
  21. Алёна Батицкая советует

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

CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter, также для IE9 можно использовать SVG.

Градиенты могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image .

linear-gradient

Линейные градиенты достаточно просты в использовании. Для самого элементарного градиента достаточно задать начальный и конечный цвета:

background: linear-gradient(orangered, gold);

Цветов может быть любое количество больше двух. Также можно управлять направлением градиента и границами (точками остановки) цветов.

Угол или направление градиента

Направление можно задавать градусами или ключевыми словами.

В градусах: от 0 до 360, например 270deg .

to bottom = 180deg — значение по умолчанию;

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

Ниже можно увидеть как работают разные направления в растяжке от сиреневого до желтого:

Вот код самого первого квадрата, для примера:

.top-left  background: linear-gradient(to top left, purple, crimson, orangered, gold); >

Следует помнить, что to top right не то же самое, что 45deg . Цвета градиента располагаются перпендикулярно линии направления градиента. При to top right линия идет из нижнего левого в верхний правый угол, при 45deg — располагается строго под этим углом независимо от размеров фигуры.

Разница хорошо видна на прямоугольных фигурах:

Управление положением цветов

Значения точек остановки для цветов градиента задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.

Примеры задания значений в % , в em и значения, выходящие за границы элемента:

Чем ближе находятся точки остановки соседних цветов, тем четче будет граница между ними. Таким образом можно легко делать полосатые фоны:

Так можно сделать, например, фон под боковую колонку, растянутый на всю высоту родительского элемента:

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

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

При отсутствии ограничений код может быть гораздо короче:

.light  background: peachpuff linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50% ) center center / 2em; > .dark  background: steelblue linear-gradient( rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50% ) center center / 100% 1em; >

В первой строчке задаем фоновый цвет элемента, тип и направление (цвет и направление можно опустить), во второй — определяем цвета градиента и границу между ними, в третьей — задаем положение и размер получившегося изображения. Самая важная часть — размер. По умолчанию фон повторяется, поэтому получившийся паттерн заполнит собой фон элемента. Очень легко и понятно : )

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

Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:

Gradient dirt

Действующий пример (смотреть в Firefox): jsbin.com/OvOwEma/2/edit.

Чтобы этого избежать, используйте полностью прозрачные цвета нужного оттенка, например, белый: rgba(255, 255, 255, 0) или черный rgba(0, 0, 0, 0) . Про разные способы задавать цвета можно почитать здесь.

Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться leaverou.github.io/css-colors, инструментом от Lea Verou.

repeating-linear-gradient

Помимо обычного linear-gradient можно сделать repeating-linear-gradient — повторяющийся градиент

background: repeating-linear-gradient( green, green .5em, transparent .5em, transparent 1em );

К сожалению, повторяющиеся градиенты ведут себя как попало и подойдут только для узоров, которым не важна точность. Если нужна аккуратность, используйте linear-gradient в сочетании с background-size и background-repeat .

Upd. от 3.07.20: в данный момент повторяющиеся градиенты корректно отрисоваются в большинстве браузеров, и ими можно свободно пользоваться.

Ограничения

Градиенты имеют такое же ограничение, что и box-shadow : им нельзя задавать отдельно цвета или направление. Это приводит к дублированию кода и острой потребности воспользоваться препроцессорами в случае создания сложных градиентов.

Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти.

Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/. Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.

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

Сайдбар

Статьи

  • Математические функции в CSS
  • Адаптивное видео с помощью встроенных математических функций CSS
  • Недоступность в картинках
  • Единицы размеров в CSS
  • Генератор цветовых тем
  • Jekyll → Gatsby
  • Вариативные шрифты
  • Размеры в SVG
  • Адаптивный Pixel Perfect
  • Логотип не отвечает или временно недоступен
  • SVG-паттерны
  • Мыльные пузыри на SVG
  • SVG-градиенты
  • Весёлая консолька
  • SVG-маски
  • Умная прокрутка со Scroll Snap Points
  • CSS-анимации для ротации изображений
  • Анимированные SVG-маски
  • Странности обводки в SVG
  • SVG-прелоадеры
  • Анимируем градиенты ещё раз
  • Background-blend-mode
  • Возможности оформления SVG
  • CSS и SVG маски
  • Nth-child и nth-of-type
  • SVG-иконки
  • SVG: заливка и обводка
  • SVG-path
  • SVG: группировка и переиспользование элементов
  • SVG-фигуры и трансформации
  • SVG
  • СSS-градиенты и 3D
  • Рисовалка анимированных теней
  • Свежие CSS-паттерны
  • CSS-паттерны
  • Радиальные градиенты
  • Линейные градиенты
  • Крестики-нолики на CSS
  • Border-image
  • Электронные часы на CSS и JS.
  • Сколько весят селекторы?
  • Символы юникода
  • Свойство content
  • Анимируем CSS-градиенты
  • Текстовые эффекты
  • Древовидный список на CSS
  • Css-селекторы, часть 2
  • Css-селекторы
  • Контекст наложения
  • Два способа «прошить» элемент по краю
  • Box-sizing
  • Цвета в CSS
  • Фон под строчками: добавляем поля
  • Box-shadow
  • Css-фигуры: лепесток
  • Transform
  • Css Animation
  • 3D-куб
  • Border-radius
  • First letter
  • Эти глаза напротив
  • CSS-фигуры
  • Стрелки с помощью свойства border
  • Flexbox

Страницы

Проекты

Источник

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)); >

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

    Источник

    Читайте также:  Open in new window with javascript
Оцените статью
© 2024 Программирование