fbpx
Перейти к содержимому

Градиент в CSS

Градиент в CSS

С появлением CSS3 стилевые возможности сайта очень расширились — начиная с малых стилей, заканчивая анимацией. В этой статье речь пойдет про Градиент в CSS.

Градиент (от лат. 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). По умолчанию форма градиента эллиптическая.

    Больше статей:   Всплывающее окно на CSS


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

    Пример

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

    2 комментария для “Градиент в CSS”

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

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

    Добавить комментарий для Natalie - Web First Step Отменить ответ

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