» » » Решение проблемы зазубренных линий в градиентах

 

Решение проблемы зазубренных линий в градиентах

Автор: admin от 14-11-2019, 23:30, посмотрело: 79

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



Решение проблемы зазубренных линий в градиентах
Угловой градиент внутри прямоугольника



Я столкнулась с этим во время работы над одним из наших проектов и вместо реализации такого эффекта с помощью изображения или SVG, мы решили использовать линейный градиент, преимуществом которого было то, что впоследствии достаточно легко менять угол наклона, градиентные цвета и т.п. непосредственно в CSS.



Решение проблемы зазубренных линий в градиентах
Рисунок 2: зазубренные границы углового градиента



Результат выглядел так, как отображено на рисунке 2. Как вы можете видеть, что появились довольно заметные выступающие зазубрины на границе перехода цветов градиента.



К счастью, существует очень простой способ решить эту проблему! Обычно, когда вы хотите создать линию резкой смены цветов в линейном градиенте, записываете код примерно так:



background:
    linear-gradient(176deg, white, white 75%, black 75%, black 100%);


Это означает, что в диапазоне от 0 до 75% размера блока цвет заливки будет белым, а начиная с 75% – чёрным. Это создаёт достаточно сильно зазубренную линию. К сожалению, при определенном угле градиента и размере блока, может получиться достаточно уродливый зигзаг.



Исправление этого требует весьма небольших изменений – добавить десятичную часть второму проценту, который создаст небольшое размытие у линии перехода цветов. В зависимости от вашей конкретной ситуации может потребоваться подбор необходимого значения, чтобы размытие было не очень заметно – но визуально сглаживало её.



background:
    linear-gradient(176deg, white, white 75%, black 75.3%, black 100%);


Решение проблемы зазубренных линий в градиентах
Сравнение зазубренной и сглаженной линии градиента



Пример на CodePen:





Надеюсь, в будущем это поможет вам в решении возникших проблем

Источник: Хабр / Интересные публикации

Категория: Веб-разработка, Game Development

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении: *