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

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


Угловой градиент внутри прямоугольника

Я столкнулась с этим во время работы над одним из наших проектов и вместо реализации такого эффекта с помощью изображения или 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:


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

Спасибо amakhrov за идею с «calc»
По-моему, с calc() будет более надежно: не зависеть от размеров и угла наклона
linear-gradient(176deg, #A663CC, #A663CC 75%, #6F2DBD calc(75% + 1px))

Похожие публикации

Средняя зарплата в IT

110 000 ₽/мес.
Средняя зарплата по всем IT-специализациям на основании 8 813 анкет, за 2-ое пол. 2020 года Узнать свою зарплату
Реклама
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее

Комментарии 11

    +3
    Эм… дальше что? Статья про transition: color .3s на ховер?
    Это любой верстальщик своей головой додумывает тут же как увидит эти зубы.
      +5

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

        +2
        В 5 классе нам задачу задали, указать любое число между 2 и 1. Я её запомнил на всю жизнь, ибо на неё тогда не ответил и это был столь огромный удар, что я запомнил до сих пор, а меж тем уже 34 годика.
        Думаю у вас также такого рода задача была.
        Делайте выводы.
      +5

      Трудней всего было догадаться, где же на картинке градиент :-)


      А как только он там появился (пусть и шириной в 1 пиксель) – всё стало хорошо :-D
      Кстати, добавляемое значение можно не подбирать, а вычислить, исходя из 1 пиксела ширины полоски градиента.

        0

        У нормальных градиентов нет проблемы с алиасингом

          0
          Это костыль, при изменении размера элемента с градиентом можно получить как обратное «зазубривание», так и размытие на несколько пикселей
            0
            Вы сейчас о CSS говорите, тут везде костыли и для любого верстальщика это стандартные вещи. Так то медиа выражения есть.
            0

            По-моему, с calc() будет более надежно: не зависеть от размеров и угла наклона


            linear-gradient(176deg, #A663CC, #A663CC 75%, #6F2DBD calc(75% + 1px))
              0
              В IE 11 не пашет, а так да, вариант.
              0
              У меня в Firefox 70.0.1 (Win 7) это выглядит вот так:

              image

              Но в Safari на маке таки да, лестница:
              image


                0
                70.0.1 (64-битный) (Windows 10)

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

              Самое читаемое