Новое — это хорошо забытое старое.
Многие любят это повторять, но не всегда — демонстрировать. И уж тем более — на ярких примерах.
Вот как вы сейчас делаете скруглённые углы на элементах?
Наверное, просто прописываете 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