Радиальные градиенты, часть 1
Это первая часть курса про радиальные градиенты. В ней мы научимся создавать градиенты, управлять цветами и расположением градиентов, а также узнаем, от чего зависит их форма.
Радиальные градиенты создаются с помощью CSS-функции radial-gradient(). Она создаёт изображение, в котором цвета плавно переходят от одного к другому в форме круга или эллипса.
Чтобы создать простейший радиальный градиент, достаточно указать в radial-gradient() всего два цвета. Давайте создадим градиент от цвета #ff6f61 к цвету #1ea4d9.
Разберёмся, как управлять цветами градиента.
Сначала добавим в наш градиент ещё один цвет — #d4ff40, разместив его между первым и вторым цветами.
Получим плавный переход от #ff6f61 к #d4ff40, а затем к #1ea4d9.
Пропорциями цветов в градиенте можно управлять. Для этого рядом с каждым цветом нужно указать его позицию, которую можно задать в абсолютных или относительных единицах измерения.
Зададим позиции цветов в процентах:
для #ff6f61 — 0%,
для #d4ff40 — 30%,
для #1ea4d9 — 100%.
Список цветов называется списком колорстопов. Каждый колорстоп может включать только цвет или цвет вместе с его позицией.
Попробуем настроить резкие переходы между цветами. Для начала укажем список цветов: #ff6f61 и #d4ff40.
Чтобы получить резкие переходы между смежными цветами, нужно указать для них одинаковые позиции:
#ff6f61 30%,
#d4ff40 30%
При желании можно явно указывать краевые цвета: например, «Первый цвет идёт от 0% до 30%, а второй цвет — от 30% до 100%». Оба варианта — с краевыми цветами и без — работают одинаково.
#ff6f61 0%,
#ff6f61 30%,
#d4ff40 30%,
#d4ff40 100%
Чтобы добавить три цвета с резкими переходами, нужно задать одинаковые позиции для двух пар смежных цветов. Этот же принцип действует для любого количества цветов.
Список колорстопов можно упростить.
- Если убрать краевые колорстопы, ничего не изменится.
- Если цвет в колорстопе повторяется, можно оставить только позицию.
Чтобы переходы между цветами были резкими, для позиции нужно указать значение, равное или меньшее предыдущего. Поэтому иногда можно встретить запись, где в качестве позиции указано значение 0.
Позиции колорстопов можно задавать и в абсолютных единицах измерения, например, в пикселях, и эти значения могут быть отрицательными.
Зададим первому колорстопу отрицательную позицию, чтобы получить интересный цветовой эффект.
Градиенты не имеют собственных размеров. Их размеры и форма зависят от так называемого «градиентного бокса».
А размеры и форма градиентного бокса, в свою очередь, зависят от размеров и формы контейнера.
Проверим, как форма контейнера влияет на радиальный градиент. Не изменяя параметры самого градиента, будем менять размеры контейнера.
Изменим ширину контейнера, чтобы его форма изменилась с квадратной на прямоугольную, вытянутую по вертикали.
Теперь превратим его в прямоугольник, вытянутый по горизонтали.
Поменяем форму контейнера на круг.
Превратим прямоугольники в овалы.
Вывод: по умолчанию радиальный градиент учитывает форму контейнера и растягивается по вертикали и горизонтали до его границ, потому что градиентный бокс по умолчанию зависит от контейнера.
Размерами градиентного бокса можно управлять с помощью CSS-свойства background-size. В этом случае размеры и форма градиента будут зависеть не от размеров контейнера, а от значения этого свойства.
Радиальный градиент — это эллипс (или круг) и у него есть центр!
По умолчанию центр градиента располагается в центре контейнера, но этим можно управлять.
Управлять центром градиента можно с помощью параметра <position>, который указывается перед списком колорстопов. Этот параметр начинается с ключевого слова at и принимает два значения: горизонтальную и вертикальную координаты.
В качестве координат можно использовать ключевые слова left, right, center, top, bottom, а также другие значения.
Сместим центр градиента в левый верхний угол, для этого добавим at left top перед списком колорстопов.
Чтобы разместить центр радиального градиента в правом нижнем углу, нужно добавить at right bottom.
Вместо ключевых слов top, bottom, center, left и right можно использовать значения в пикселях, процентах и других единицах измерения.
Установим центр в точке с координатами 120px, 50px.
Обратите внимание, что градиент вытянулся по вертикали, хотя контейнер квадратный. Это происходит потому, что центр несимметрично сместился к краям контейнера, что повлияло на форму градиента. Попробуйте задать симметричное смещение, например, at 100px 100px, и убедитесь, что форма градиента снова станет круглой.
А теперь посмотрим, как работают проценты. Установим центр в точке с координатами 80%, 60%.
Первая часть курса про радиальные градиенты завершена! Закрепите полученные знания в интерактивных испытаниях!
Вы познакомились с функцией radial-gradient(), научились создавать простые градиенты, управлять списком колорстопов и расположением центра градиента. Также вы узнали, что влияет на форму радиального градиента.
Продолжим в следующей части.
