Новое — это хорошо забытое старое.

#фишка дня

_Новое — это хорошо забытое старое. _

Многие любят это повторять, но не всегда — демонстрировать. И уж тем более — на ярких примерах.

Вот как вы сейчас делаете скруглённые углы на элементах?

Наверное, просто прописываете border-radius и всё, да? Даже не задумываясь, что годах так в 2006-2012 это правило не то чтобы не работало кроссбраузерно, а его и не было вообще.

Как же делали углы? А очень просто, CSS-спрайтом. Нарезали картинку скруглённого прямоугольника на 4-9 частей в зависимости от задачи и распихивали в нужные места. Пруф: https://bavotasan.com/2009/simple-rounded-corners-with-a-css-sprite/

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

Правда, сейчас всё чаще для этой цели используются SVG- и контурные маски вообще.

Ладно, к чему это я такое большое введение выдал?

Тут по соцсетям в очередной раз прокатилась ода скруглённым углам на технике Apple. Как они все сочетаются и так далее. И что у них даже название своё есть: squircle.

Гусары, молчать

Вот, мы обсуждали тут: https://t.me/htmlshit/1258

И да, простое скругление на фоне сглаженного смотрится... грубовато.

Итак, вашему вниманию столь хорошо забытое старое: плагин сглаженных углов для Tailwind!

Вот: https://github.com/gtokman/corner-smoothing

Если зайти в код плагина, который на самом деле ни что иное, как просто описание CSS-класса, а значит, может быть использован кем угодно, мы найдём там тот самый спрайт, маску, если угодно, на SVG: https://github.com/gtokman/corner-smoothing/blob/main/masks/squircle.svg

Как-то так:

.continuous-corners { mask-border: url("./mask@1x.svg") 49% fill / 75px; }

А чтобы не гадать, каков результат работы плагина, можно посмотреть оригинальный пример: https://github.com/robb/Continuous-Corners-CSS

Или описание спецификации на mask-border на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border

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

#css #squircle