2.15. CSS3 градиент

gradient-cssCSS3 градиент представляет собой переходы от одного цвета к другому.

Градиенты создаются с помощью функций linear-gradient() и radial-gradient().

Градиентный фон можно устанавливать в свойствах background, background-image, border-image и list-style-image.

Градиентный фон

Поддержка браузерами

IE: 10.0
Firefox: 16, 3.6 -moz-
Chrome: 26.0, 10.0 -webkit-
Safari: 6.1, 5.1 -webkit-
Opera: 12.1, 11.1 -o-
iOS Safari: 7.1
Opera Mini:
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Линейный градиент linear-gradient()

linear-gradient-axis

Рис. 1. Линия градиента, начальная и конечная точки и угол градиента

Линейный градиент создается с помощью двух и более цветов, для которых задано направление, или линия градиента.

Если направление не указано, используется значение по умолчанию — сверху-вниз.

Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.

Направление градиента может быть задано двумя способами:
с помощью угла наклона в градусах deg, значение которого определяет угол наклона линии внутри элемента.

с помощью ключевых слов to top, to right, to bottom, to left, которые соответствуют углу градиента, равному 0deg, 90deg, 180deg и 270deg соответственно.

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

Для неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops. Точки остановки задаются в %, где 0% — начальная точка, 100% — конечная точка, например:

Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:

2. Радиальный градиент radial-gradient()

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

Форма градиента определяется ключевыми словами circle или ellipse. Если форма не задана, по умолчанию радиальный градиент принимает форму эллипса.

Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position, с добавлением приставки at. Если позиция центра не задана, используется значение по умолчанию at center.

С помощью пары значений, указанных в единицах длины %, em или px, можно управлять размером эллипсообразного градиента. Первое значение задает ширину эллипса, второе — высоту.

Размер градиента задаётся с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).

Значение Описание
closest-side Размер градиента рассчитывается из расстояния до любой ближней стороны блока для circle или до ближних сторон по X и по У для ellipse.
farthest-side Размер рассчитывается из расстояния до дальних сторон.
closest-corner Размер рассчитывается из расстояния до ближних углов.
farthest-corner Размер рассчитывается из расстояния до дальних углов.

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

Мяч

Кнопка

Почтовая марка

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

3. Повтор градиента

В добавление к линейному и радиальному градиентам существует повтор градиента, который задается с помощью функций repeating-linear-gradient() и repeating-radial-gradient() соответственно. Фон из повторяющихся градиентов выглядит неаккуратно, поэтому рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры.

4. Кроссбраузерный градиент

Для корректного отображения градиентов во всех браузерах необходимо добавить кроссбраузерную запись.

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

Повтор линейного градиента

Радиальный градиент

Повтор радиального градиента

5. Комбинация градиента и фонового изображения

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

  • Красота. Срочно учиться.

  • Создание Сайтов

    Ие и его братан сафари не читают радиальные градиенты.

    • IE с десятой версии, для Safari добавьте
      background: -webkit-radial-gradient(circle, blue, green, yellow); /*если обычный градиент*/
      background: -webkit-radial-gradient(60% 55%, blue, green, yellow); /* для градиента со смещенным центром */
      background: -webkit-radial-gradient(30% 10%, closest-corner, white, black); /* для градиента со смещенным центром */

      • Создание Сайтов

        Да не у меня стоит на ноуте для теста старый сафари, он не работает, и ие 7, 8, 9. Они не видят.

        • Все правильно, потому что эти версии в принципе не поддерживают эти свойства.

          • Создание Сайтов

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

          • Во-первых, посмотрите статистику по браузерам http://alexvaleev.ru/browserstat/2016/1/
            Старый ИЕ использует малая часть пользователей и поскольку они не продвинутые, то и не обратят внимание на внешний вид элементов. Как вариант, сначала указывать background-color: цвет, а за ним background-image: градиент.
            Вообще, сообщество разработчиков давно забило на старые версии, таких пользователей мало, а кода для кроссбраузерности будет много (там используется filter, но я бы не стала с этим заморачиваться).

  • Сергей Клевцов

    Интересно, а гуру сами проверяли свои примеры или лень было?

    • А что именно не работает?

      • Сергей Клевцов

        вот это попробуйте например:

        div {

        background: linear-gradient(#ff0000 66px, #ffffff 67px, #ffffff 133px, #38bac7 134px);

        }

        Никакой ошибки не замечаете, нет?

        • Это не ошибка. Если направление градиента не указано, используется значение по умолчанию «сверху вниз», подробнее здесь http://www.w3schools.com/css/css3_gradients.asp

          • Сергей Клевцов

            Вы в браузере проверьте просто и сравните. Тут не в направлении дело вообще-то.

          • Вероятно вы имеете в виду, что если просто взять этот код и задать его пустому блоку, то ничего не произойдет. Дело в том, что все эти примеры были сделаны для блока шириной и высотой 200px. Признаю, статья нуждается в обновлении, вы правы, что не очень понятны примеры. Как раз занимаюсь её улучшением.