mefody.dev

Одержимость аккуратными краями круга из radial-gradient()

Простая задача: нарисовать круг свойством background. Берём radial-gradient(var(--radius), var(--my-color) 100%, #0000), можно сразу несколько — профит. Ведь правда?

Беда в том, что для кругов, сделанных при помощи border-radius, срабатывает сглаживание, они выглядят аккуратно, а вот градиенты внутри background рисуются по другим алгоритмам. Края рваные, пиксельные, грубые.

Ана Тюдор со свойственной ей глубиной детализации пробует найти «идеальное» решение, которое и жёсткость уберёт, и слишком размазанными края не сделает, и для любого размера круга подойдёт, и к зуму подстроится.

https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges/

Frontend Masters

Obsessing Over Smooth radial-gradient() Disc Edges

(… and how that lead me to a very underused CSS feature, resolution media queries.)

1❤22👍9🤯3👏1

www.tgoop.com/mefody_dev/398

3.9K viewsAug 26 at 15:16

Одержимость аккуратными краями круга из radial-gradient()

Простая задача: нарисовать круг свойством background. Берём radial-gradient(var(--radius), var(--my-color) 100%, #0000), можно сразу несколько — профит. Ведь правда?

Беда в том, что для кругов, сделанных при помощи border-radius, срабатывает сглаживание, они выглядят аккуратно, а вот градиенты внутри background рисуются по другим алгоритмам. Края рваные, пиксельные, грубые.

Ана Тюдор со свойственной ей глубиной детализации пробует найти «идеальное» решение, которое и жёсткость уберёт, и слишком размазанными края не сделает, и для любого размера круга подойдёт, и к зуму подстроится.

https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges/

BY mefody.dev