Итак, во фронтенд-сообществе давно наметилась тенденция к завышенным ожиданиям разработчиков от потребителей их продукции.
Сидите вы такие в уютном месте, пьёте кофе, работаете на макбуках, с экранами высокой плотности... в итоге забывая, что клиенты-то ваши — на ThinkPad с разрешением 1366*768.
И все ваши тоненькие шрифты, иконки, полупиксельные границы начинают смотреться так себе. А уж косые градиенты... эти ступеньки мало кому понравятся.
Итак, сегодня вашему вниманию пара вариантов сглаживания градиентов.
1. Используйте нецелые значения процентов для стоп-меток. Если честно, я в механизме не до конца разобрался, но это заставляет браузер размывать линию стыка: https://codepen.io/alinaki/pen/oNrKXpM
background: linear-gradient(
176deg,
red,
red 50%,
black 50.3%
);
2. Похожее решение — прибавить пиксель к стоп-метке: https://codepen.io/alinaki/pen/xxovGyz
background: linear-gradient(
176deg,
red,
red 50%,
black calc(50% + 1px)
);
Второе решение даёт больший контроль над качеством размытия, потому что под разные плотности экранов можно давать разные значения. Например, если плотность экрана x2.5, делим наш несчастный пиксель на 2.5 и получаем ещё более красивую картинку на экранах высокой плотности (хотя мне не очень уже ясно, зачем).
P. S. естественно, Telegram зашакалил картинку на 10 шакалов из 10. Так что ползите смотреть кодпены, дамы и господа.
#css #trick #gradient #smooth