Градиенты в CSS

Градиенты CSS позволяют отображать плавные переходы между двумя или более указанными цветами.
CSS определяет два типа градиентов:

  • Линейные градиенты (идет вниз / вверх / влево / вправо / по диагонали)
  • Радиальные градиенты (определяемые их центром)

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

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

Синтаксис

background: linear-gradient(direction, color-stop1, color-stop2, ...);
Линейный градиент - сверху вниз (по умолчанию)
В следующем примере показан линейный градиент, который начинается сверху. Он начинает красный, переход на желтый:
#grad { background: linear-gradient(red, yellow);
}
Линейный градиент - слева направо
В следующем примере показан линейный градиент, начинающийся слева. Он начинает красный, переход на желтый:
#grad { background: linear-gradient(to right, red , yellow);
}
Линейный градиент - диагональ
Вы можете сделать градиент по диагонали, указав горизонтальные и вертикальные стартовые позиции.
В следующем примере показан линейный градиент, который начинается в левом верхнем углу (и идет вправо). Он начинается с красного и переходит на желтый:
#grad { background: linear-gradient(to bottom right, red, yellow);
}

Использование углов

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

Синтаксис

background: linear-gradient(angle, color-stop1, color-stop2);
Угол определяется как угол между горизонтальной линией и градиентной линией.
В следующем примере показано, как использовать углы на линейных градиентах:

#grad { background: linear-gradient(-90deg, red, yellow);
}

Использование нескольких цветов

В следующем примере показан линейный градиент (сверху вниз) с несколькими цветами:
#grad { background: linear-gradient(red, yellow, green);
}
В следующем примере показано, как создать линейный градиент (слева направо) с цветом радуги и некоторым текстом:
#grad { background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

Использование прозрачности

Градиенты CSS также поддерживают прозрачность, которые можно использовать для создания эффектов замирания.
Чтобы добавить прозрачность, мы используем функцию rgba () для определения прекращения цвета. Последний параметр в функции rgba () может быть от 0 до 1, и он определяет прозрачность цвета: 0 указывает на полную прозрачность, 1 обозначает полный цвет (без прозрачности).
В следующем примере показан линейный градиент, начинающийся слева. Он начинает полностью прозрачным, переходя к полноцветному красному:
#grad { background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

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

Функция повторения-линейного градиента () используется для повторения линейных градиентов:
#grad { background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

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

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

Синтаксис

background: radial-gradient(shape size at position, start-color, ..., last-color);
По умолчанию форма - эллипс, размер - самый дальний угол, а позиция - в центре.
Радиальный градиент - Одиночные интервалы цвета (это значение по умолчанию)
В следующем примере показан радиальный градиент с равномерно разнесенными цветами:
#grad { background: radial-gradient(red, yellow, green);
}
Радиальный градиент - разнесенные цветные оправы
В следующем примере показан радиальный градиент с разнесенными интервалами цвета:
#grad { background: radial-gradient(red 5%, yellow 15%, green 60%);
}

Установить форму

Параметр формы определяет форму. Он может принимать значение круга или эллипса. Значение по умолчанию - эллипс.
В следующем примере показан радиальный градиент с формой круга:
#grad { background: radial-gradient(circle, red, yellow, green);
}

Использование ключевых слов разного размера

Параметр size определяет размер градиента. Он может принимать четыре значения:
  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner
#grad1 { background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 { background: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

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

Функция повторного радиального градиента () используется для повторения радиальных градиентов:
#grad { background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Материал добавил

7FV

Связь со мной
Телеграм: aslan7f
Скайп: не указан
Добавил статей 35
Группа
Web Дизайнер
Немного обо мне
Всем привет ребят!
Предлагаю услуги по верстке сайтов, доработке уже существующих шаблонов, написание шаблонов с нуля.

Конечно же у вас возникает сразу вопрос, кто я, где мое портфолио и т.д.
Отвечу на этот вопрос:
Кто же я такой? - Я обычный растаман, который накурившись верстает сайты уже лет так 9, рисует иконки, визитки, банеры, логотипы, ретуширует фотографии.

Зарабатываю я на этом? - Скорей нет чем да. Это мое хобби, мне просто нравится все что связано с веб дизайном. Я не говорю что бесплатно все делаю,хотя порой если мне нравится проект и сам клиент как человек, тогда я могу бесплатно поддерживать, помогать с его проектом.
Исправить недочеты в статье

Для того что бы исправить текст новости, просто выделите нужное место и нажмите ctrl + enter

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

Имя:*
E-Mail:
Введите два слова, показанных на изображении: *