Войти
Регистрация

Цветной и градиентный фон в CSS

Цветной и градиентный фон в CSS

Приветствую Вас, друзья!

В этой теме расскажу, как сделать цветной фон и градиентный.

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

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

Создадим страницу с блоком:

<body>
   <div></div>
</body>

За задний фон блока отвечает свойство background.

1. Цветной фон в CSS

В качестве свойства для цветного фона укажем просто любой цвет, например orange (оранжевый) или в HEX - #FFA500 (оранжевый):

div {
   background: #FFA500;
   height: 100px;
}

Фон стал оранжевым, все просто.

2. Градиентный фон в CSS

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

Чтобы сделать градиент в CSS необходимо свойству background указать значение linear-gradient:

div {
   background: linear-gradient(#FFA500, #333333);
   height: 100px;
}

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

Можно задавать направление градиента. Я укажу 2 одинаковых примера, только разным написанием:

div {
   background: linear-gradient(90deg, #FFA500, #333333);
   height: 100px;
/* или */
   background: linear-gradient(to right, #FFA500, #333333);
   height: 100px;
}

В первом примере мы задали 90 градусов, этим самым мы указали правую сторону блока, к которой он пойдет. Если представить круг, то 90 градусов это точка справа, вот к ней и направляется наш градиент, т.е. слева на право от оранжевого к черному. Градусы могут иметь и отрицательное значение (-90deg).

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

Можно задать направление градиента в сторону правого верхнего угла, естественно он начнет путь с нижнего левого угла тогда:

div {
   background: linear-gradient(to right top, #FFA500, #333333);
   height: 100px;
}

Здесь мы указываем 2 ключевых слова, right top, можно наоборот top right, порядок слов не важен. И важно перед ними всегда писать to. Вместо этих ключевых слов можно написать градус, аналогичным будет 45deg

Также можно указать более, чем 2 цвета.

div {
   background: linear-gradient(to right top, #FFA500, #333333, red);
   height: 100px;
}

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

div {
   background: linear-gradient(to right top, #FFA500 0%, #333333 20%, red 100%);
   height: 100px;
}

Что мы тут видим? Представьте, что градиент идет по некоторой оси. У нас эта ось проложена с левого нижнего угла к верхнему правому. Так вот #FFA500 0%, где 0% означает, что этот цвет идет от начала, далее #333333 20%, значит, что на 20% длины оси начинается этот цвет и тут же заканчивается, red 100% означает, что этот цвет идет до конца, начиная с точки остановки предыдущего, т.е. 20%.

Но т.к. черный цвет начался и остановился на 20% мы его все равно видим, т.к. это градиент и он имеет плавный переход. Можно написать так:

div {
   background: linear-gradient(to right top, #FFA500 0%, #333333 20%, #333333 40%, red 100%);
   height: 100px;
}

Здесь все также, только черный цвет мы начали с 20% от оси и закончили на 40% от оси, после чего пошел красный цвет. Кстати, в начале 0% и в конце 100% можно не писать, это и так понятно и идет по умолчанию.

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

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

div {
   background: radial-gradient(#FFA500, #333333);
   height: 100px;
}

Чтобы сместить центральную точку мы также используем ключевые слова top, left, center, right и в начале пишем at:

div {
   background: radial-gradient(at left, #FFA500, #333333);
   height: 100px;
}

Передвинули точку к левой границе блока, также можно сочетать стороны, например at left top, передвинув точку в левому верхнему углу.

Теперь еще интересный момент, это изменение размера радиального градиента:

div {
   background: radial-gradient(10% 40%, #FFA500, #333333);
   height: 100px;
}

Размер градиента рассчитывается по ключевым словам:

  • closest-side - размер рассчитывается из расстояния до ближней стороны блока.
  • farthest-side - размер рассчитывается от расстояния до дальних сторон.
  • closest-corner - из расстояния до ближних углов.
  • farthest-corner - из расстояния до дальних углов.
div {
   background: radial-gradient (closest-corner at 10% 40%, #FFA500, #333333);
   height: 100px;
}

Здесь рассчиталось расстояние до ближнего угла и исходя из этого расстояния рассчитался размер градиента.

На этом с цветным и градиентным фоном завершим обучение. Этих способов Вам будет достаточно для того, чтобы Вы могли просто создать свой сайт с достаточно приемлемым дизайном. Поиграйтесь с цветами, процентными значениями, чтобы выбрать оптимальный вариант градиента.

Увидимся в следующей статье, где я расскажу, как сделать фон картинкой.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?