| Kosten | Пятница, 29 Декабря 2017, 03:03 | Сообщение 1 |
| Все больше и больше сайтов используют градиенты так или иначе. Некоторые веб сайты используют их для компонентов навигации в то время как другие используют их в элементах таких как кнопки, или с изображениями для создания приятных эффектов.
У всех браузеров уже давно существует поддержка линейных и радиальных градиентов CSS. В CSS Градиенты синтаксис Crash Course статья на SitePoint дает краткий обзор синтаксиса необходимого для создания линейных и радиальных градиентов, а также как использовать повторяющиеся градиенты чтобы создать некоторые основные закономерности это здорово если вы заботитесь о веб - производительности и старайтесь избегать использования изображений когда это возможно.
В этой статье вы узнаете о синтаксисе использовании и поддержке браузера для простых градиентов коники и повторения градиентов.
Что такое конические градиенты?
Конические и радиальные градиенты схожи в том смысле, что оба они начинаются с указанной или заданной точки в качестве центра круга используемого для их рисования. Разница между ними заключается в том, что в случае радиальных градиентов цветные стопы располагаются вдоль радиальной линии, тогда как в случае градиентов коники цветовые остановки располагаются вдоль окружности круга.
Положение цветовых остановок для конического градиента может быть указано либо в процентах, либо в градусах. Значение 0% или 0 deg относится к вершине градиента коники. При перемещении по часовой стрелке значения постепенно увеличиваются. Значение 360 deg эквивалентно 0 deg. Любой цвет значение прекращения цвета которого превышает 100% или 360 градусов не будет нарисовано на градиенте коники, но оно все равно повлияет на его распределение по цвету.
На следующем рисунке показан конический градиент который начинается с желтого цвета и заканчивается оранжевым.
Трудно не заметить резкий переход, который отделяет оранжевый от 360 deg от желтого при 0d eg. Помните, что конические градиенты всегда производят этот переход, когда начальный и конечный цвета конического градиента очень разные. Один из способов избежать этого установить начальный и конечный цвет на одно и то же значение.
Вместо использования степеней вы также можете использовать проценты. Как я упоминал ранее значение 100% равно 360 deg. Таким образом значение 50% будет равно 180deg. Если вы точно знаете, какую часть круга вы хотите покрыть определенным цветом использование процентов может быть проще. Аналогично, центральное положение градиента также может быть указано в процентах. Любое из вышеуказанных значений градиента будет иметь следующий результат.
Демонстрация
Использование конических градиентов
Вы можете использовать градиенты коники для создания различных цветовых колес . Например, следующее демо использует цвета радуги в градиенте коники для создания радужного колеса.
Код .wheel {
background: conic-gradient(from 90deg, violet, indigo, blue, green, yellow, orange, red, violet);
border-radius: 50%;
}
Обратите внимание, как я установил как начальный, так и конечный цвет градиента коники на фиолетовый, чтобы избежать внезапных переходов.
Демонстрация
Использование градиентов CSS для графических диаграмм
Другим преимуществом конических градиентов является способность создавать круговые диаграммы с легкостью. Процесс создания круговых диаграмм на самом деле очень прост. Все, что вам нужно сделать, это предоставить некоторые жесткие значения остановки цвета для разных цветов. Каждому цвету градиента может быть задан угол начала и конца. Когда значение начального угла для следующего цвета меньше или равно значению конечного угла для текущего цвета, они будут отображаться с очень резким мгновенным изменением цвета, что приведет к формированию отдельных секторов.
Существует два способа указания этих значений цветоостановки. Первый заключается в том, чтобы всегда задавать начальный угол для каждого цвета равным нулю.
Второй способ установить начальный угол следующего цвета, равный углу конца предыдущего цвета.
То что вы наконец решили сделать это вопрос предпочтения.
Следующий фрагмент кода показывает значение коэффициента градиента для обоих методов рядом для сравнения:
Код .pie {
background: conic-gradient(#FF5722 0% 35%, #FFEB3B 0% 60%, #2196F3 0% 100%);
border-radius: 50%;
}
.pie {
background: conic-gradient(#FF5722 0% 35%, #FFEB3B 35% 60%, #2196F3 60% 100%);
border-radius: 50%;
}
Вы можете опустить начальный угол для вашего первого цвета и конечного угла для вашего последнего цвета, потому что по умолчанию они будут установлены на 0% и 100%:
Демонстрация
Создание диаграммы пончиков - это всего лишь вопрос применения дополнительного радиального градиента на вашем элементе с жесткими остановками цвета. Внутренний цвет радиального градиента может быть установлен на белый, а внешняя часть может быть прозрачной.
Код .donut {
background: radial-gradient(white 40%, transparent 41%), conic-gradient(#FF5722 0% 35%, #FFEB3B 35% 60%, #2196F3 60% 100%);
border-radius: 50%;
}
Демонстрация
Повторяющиеся конические градиенты
Повторяющийся градиент принимает все те же значения, что и правильный конический градиент. Единственное различие заключается в том, что на этот раз он будет продолжать повторяться до тех пор, пока все 360 градусов не будут покрыты. Вы можете использовать это повторение для создания некоторых общих шаблонов изображений которые ранее требовали использования изображений.
Вы можете легко изменить круговые диаграммы, чтобы создать фон, напоминающий звездообразования. Все, что вам нужно сделать, это использовать repeating-conic-gradientsи уменьшать ширину каждого цветового сегмента на подходящую сумму.
Код .starburst {
background: repeating-conic-gradient(#fbe462 0% 5%, #fd9c2a 5% 10%);
}
Аналогично, вы можете легко создать шаблон шахматной доски установив ширину каждого сектора на 25% и установив background-size.
На следующем рисунке показано, как расширение градиента с четырьмя секторами на 90 градусов по прямоугольной или квадратной области может создавать шахматные доски:
Вот CSS чтобы создать шаблон шахматной доски:
Код .checker {
background: repeating-conic-gradient(#fbe462 0% 25%, #fd9c2a 25% 50%);
background-size: 100px 100px;
}
Демонстрация:
Вы можете создать еще много шаблонов, варьируя размер разных секторов, а также изменяя гол для градиентов.
Поддержка браузера и полифония
Во время написания этой статьи градиенты поддерживаются в Chrome 59+ и Opera 46+ за флагом «Экспериментальные веб-платформы». Ни один другой браузер не поддерживает этот новый стандарт, по умолчанию или позади некоторого флага. Это означает, что вам придется немного подождать, пока не будет достаточной поддержки браузеров.
Тем не менее, вы можете начать использовать CSS-конические градиенты сегодня с помощью отличного с конической градиентом CSS созданного Lea Verou. Существует также плагин PostCSS Conic Gradient, который автоматически добавляет возврат конического градиента к вашим файлам CSS
| | Страна: (RU) |
| |
