Градиент в CSS

С появлением CSS3 стилевые возможности сайта очень расширились — начиная с малых, вроде закругленных углов блоков, заканчивая анимацией. Также стало возможные использовать градиенты.

Градиент (от лат. gradiens, род. падеж gradientis — шагающий, растущий). С математической точки зрения — это вектор, в направлении которого переменная меняется из одной точки в другую.

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

В графике существуют следующие виды градиента:

  • линейный;
  • радиальный;
  • угловой (конусный);
  • отраженный (зеркальный);
  • ромбовидный (алмазный);
  • Линейный градиент

    Линейный градиент — цвет меняется по прямой: справа-налево, сверху-вниз и т.д.

    Для того,чтобы задать линейный градиент нужно задать следующие параметры:

    — начальная точка (та с которой начнется изменение исходного цвета), которая определяет направление. Может задаваться с помощью слов (top, right, bottom, left) или градусов (0deg — 360deg);

    — цвета перехода (минимум два цвета, но можно гораздо больше);

    Синтаксис

    В самом простом написании будет минимум три величины:

    linear-gradient (top, white, blue);

    Пример

    HTML редактор онлайн

    Синтаксис написания линейного градиента может быть значительно расширен путем добавления координат перехода цветов. Координаты задаются в процентах, где 0% — начало градиента, а 100% конец;


    linear-gradient (top, white 10%, red 70%, blue 90%);

    Пример

    HTML редактор онлайн

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

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

    Также можно указать форму которая может быть сферической (circle) или эллиптическая (ellipse). По умолчанию форма градиента эллиптическая.


    radial-gradient (center, circle, red 30%, blue 60%);

    Пример

    HTML редактор онлайн


    Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

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

    2 комментария

    1. Напишите, пожалуйста, еще уроков про стили, у вас очень хорошо и доступно получается излагать материал.

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *