Радиальные градиенты, часть 2
Это вторая часть курса про радиальные градиенты. В ней мы продолжим изучать CSS-функцию radial-gradient(). Научимся управлять формой и размерами градиента.
Исходное состояние — градиент, который состоит из трёх цветов #ff6f61, #d4ff40, #1ea4d9. Центр градиента расположен в точке с координатами 80% 60%.
Видеоверсия этого курса доступна во ВКонтакте и на Ютюбе
В первой части мы выяснили, что форма градиента зависит от формы контейнера и от положения центра градиента.
Сейчас градиент вытянулся по горизонтали, потому что его центр несимметрично смещён к краям контейнера.
Форму радиального градиента можно принудительно задать с помощью параметра <radial-shape>, который указывается в самом начале функции radial-gradient(), перед координатами центра.
Параметр может принимать одно из двух значений: circle или ellipse. Значение по умолчанию — ellipse.
Давайте принудительно зададим круглую форму для второго градиента, добавив значение circle.
Сравните два градиента: теперь второй градиент сохраняет круглую форму в любых обстоятельствах.
Давайте поменяем форму контейнеров на прямоугольную и переместим градиенты в центр. Первый градиент подстраивается под форму контейнера, второй остаётся круглым.
Ещё раз изменим форму контейнеров. Второй градиент всё ещё круглый.
Даже если сделать контейнер очень узким, второй градиент останется круглым, хотя значительная его часть будет обрезана.
Рассмотрим обратную задачу: как получить градиент в форме эллипса (а не круга) внутри квадратного контейнера?
Можно указать значение ellipse, но этого может быть недостаточно — градиент останется круглым. Чтобы достичь желаемого эффекта, необходимо изменить размеры самого градиента.
Размер градиента можно задать с помощью параметра <radial-size>, который в функции radial-gradient() располагается между параметрами, определяющими форму и расположение центра.
Этот параметр может принимать одно или два значения: для круглых градиентов — радиус, а для эллиптических — горизонтальный и вертикальный радиусы.
Давайте зададим размеры 200px и 100px нашему эллиптическому градиенту. Здесь 200px — это размер горизонтального радиуса, а 100px — размер вертикального радиуса. В результате градиент будет вытянут по горизонтали.
Теперь поменяем местами значения радиусов, сделаем вертикальный радиус больше горизонтального.
Кстати, все параметры — форма, размеры, координаты центра — являются опциональными. Их можно опускать, если помнить их порядок.
Размеры радиусов можно указывать в процентах.
Изменим значения на 100% и 70% для горизонтального и вертикального радиусов соответственно.
Если в квадратном контейнере задать градиенту одинаковые процентные значения горизонтального и вертикального радиусов — получим круг.
Для градиента принудительно круглой формы (circle) в качестве размера достаточно указать одно значение радиуса, например, 150px.
Размеры градиента могут быть заданы с помощью ключевых слов closest-side, farthest-side, closest-corner, farthest-corner.
Чтобы разобраться с этими значениями, добавим два прямоугольных контейнера с градиентами в центре. Градиентам зададим разную форму и размеры в пикселях, которые затем будем менять.
Резкий цветовой переход на 100% поможет сразу увидеть размер градиента. Пока что ничего особенного — два круга радиусом 100 пикселей.
Давайте удалим размеры у обоих градиентов. Оба контейнера полностью залились цветом #ff6f61!
Позже выясним, почему так произошло.
Теперь зададим размер с помощью ключевого слова closest-side.
При использовании этого значения браузер находит кратчайшее расстояние от центра градиента до ближайшей стороны контейнера и использует это расстояние в качестве радиуса.
Лучше всего это поведение демонстрируется для круглого градиента.
Для эллиптического градиента по аналогии определяются два радиуса: горизонтальный — для горизонтальных сторон, а вертикальный — для вертикальных.
Изменим размер на farthest-side. Теперь поиск радиусов осуществляется от центра до самой дальней стороны.
Круглый градиент изменился, так как его радиус увеличился: расстояние от центра до левой или правой стороны больше, чем до верхней или нижней.
Эллиптический градиент не изменился, так как его центр совпадает с центром контейнера.
Чтобы увидеть разницу между closest-side и farthest-side для эллипса, сместим его центр левее, на 25% от ширины контейнера.
Теперь видно, что горизонтальный радиус эллипса взят до дальней стороны, то есть составляет 75% ширины контейнера, и левая часть градиента обрезана.
Изменим размер эллипса на closest-side. Горизонтальный радиус вычислился до ближайшей стороны, то есть стал равен 25% от ширины контейнера.
Вы можете самостоятельно поэкспериментировать с вертикальным радиусом. Попробуйте сместить центр эллипса вверх или вниз и поиграть с ключевым словом.
Вернёмся к тому месту, где остановились ранее: второй градиент находится в центре, и его размер определяется, как farthest-side.
Зададим размер с помощью closest-corner. Оба контейнеры полностью залились цветом. Что же произошло?
При использовании значения closest-corner в качестве радиуса берётся расстояние от центра до ближайшего угла. А круг или эллипс с такими радиусами заполняют весь контейнер.
Поэтому для демонстрации closest-corner сместим градиент из центра к одной из сторон.
Поместим центр градиентов на середину левой стороны. Тогда ближайшими углами будут верхний левый / нижний левый, и расстояния до них одинаковы.
Для круглого градиента всё сработало отлично, а вот эллипс не отрисовался.
Это произошло потому, что горизонтальный радиус оказался равен нулю.
Но если сместить центр эллипса правее, то всё сработает.
Наконец, используем последнее ключевое слово — farthest-corner. Это значение используется по умолчанию, если размер градиента не задан.
При использовании farthest-corner радиусы вычисляются до самого дальнего угла. Поэтому мы получили эффект полной заливки контейнера, так как радиусы очень велики.
Чтобы увидеть размер градиентов, уменьшим позицию колорстопа с 100% до 90%.
Вы разобрались с основными возможностями радиальных градиентов. Пришло время разобрать сложный пример, где используется всё, что мы изучили.
Задача — получить объёмный элемент за счёт радиального градиента. Эффект объёма достигается за счёт плавных переходов между цветами, от светлых к тёмным.
Для начала создадим элемент круглой формы.
Добавим для элемента радиальный градиент, который плавно переходит от цвета #ffffff к цвету #555555.
Настроим цветовые переходы так, чтобы был лучше виден блик (самый светлый участок).
Изменим форму блика на эллипс. Поскольку элемент круглый, нужно дополнительно задать радиусы для эллипса.
Сместим блик влево и вверх, так, как будто свет падает на элемент слева и сверху.
Переместим блик в другую точку. Как будто элемент освещается с противоположной стороны.
Вы можете продолжить экспериментировать, например, изменить форму и размер светлой части, переместить центр радиального градиента. А можно пойти дальше и изменить цвета.
На этом вторая часть курса про радиальные градиенты закончена! Закрепите полученные знания в интерактивных испытаниях!
Вы научились принудительно задавать форму и управлять размерами градиентов. А также разобрались с тем, как работают ключевые слова closest-side, farthest-side, closest-corner, farthest-corner.
Продолжим в следующей части.
