#фишка дня
Новое — это хорошо забытое старое.
Многие любят это повторять, но не всегда — демонстрировать. И уж тем более — на ярких примерах.
Вот как вы сейчас делаете скруглённые углы на элементах?
Наверное, просто прописываете border-radius и всё, да? Даже не задумываясь, что годах так в 2006-2012 это правило не то чтобы не работало кроссбраузерно, а его и не было вообще.
Как же делали углы? А очень просто, CSS-спрайтом. Нарезали картинку скруглённого прямоугольника на 4-9 частей в зависимости от задачи и распихивали в нужные места. Пруф: https://bavotasan.com/2009/simple-rounded-corners-with-a-css-sprite/
При всей своей... забавности, метод позволял не обходиться простым радиусом. Он давал возможность делать и скошенные углы, и внутренние радиусы, и перфорацию, и градиентные границы... В общем, надо ли говорить, что до конца идея не умерла?
И я сейчас даже не про вёрстку писем
Правда, сейчас всё чаще для этой цели используются SVG- и контурные маски вообще.
Ладно, к чему это я такое большое введение выдал?
Тут по соцсетям в очередной раз прокатилась ода скруглённым углам на технике Apple. Как они все сочетаются и так далее. И что у них даже название своё есть: squircle.
Гусары, молчать
Вот, мы обсуждали тут: https://yangx.top/htmlshit/1258
И да, простое скругление на фоне сглаженного смотрится... грубовато.
Итак, вашему вниманию столь хорошо забытое старое: плагин сглаженных углов для Tailwind!
Вот: https://github.com/gtokman/corner-smoothing
Если зайти в код плагина, который на самом деле ни что иное, как просто описание CSS-класса, а значит, может быть использован кем угодно, мы найдём там тот самый спрайт, маску, если угодно, на SVG: https://github.com/gtokman/corner-smoothing/blob/main/masks/squircle.svg
Как-то так:
А чтобы не гадать, каков результат работы плагина, можно посмотреть оригинальный пример: https://github.com/robb/Continuous-Corners-CSS
Или описание спецификации на mask-border на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border
В общем, забавно выходит. Столько боролись за нативную поддержку скруглений, а хочется больше и больше...
#css #squircle
Новое — это хорошо забытое старое.
Многие любят это повторять, но не всегда — демонстрировать. И уж тем более — на ярких примерах.
Вот как вы сейчас делаете скруглённые углы на элементах?
Наверное, просто прописываете border-radius и всё, да? Даже не задумываясь, что годах так в 2006-2012 это правило не то чтобы не работало кроссбраузерно, а его и не было вообще.
Как же делали углы? А очень просто, CSS-спрайтом. Нарезали картинку скруглённого прямоугольника на 4-9 частей в зависимости от задачи и распихивали в нужные места. Пруф: https://bavotasan.com/2009/simple-rounded-corners-with-a-css-sprite/
При всей своей... забавности, метод позволял не обходиться простым радиусом. Он давал возможность делать и скошенные углы, и внутренние радиусы, и перфорацию, и градиентные границы... В общем, надо ли говорить, что до конца идея не умерла?
И я сейчас даже не про вёрстку писем
Правда, сейчас всё чаще для этой цели используются SVG- и контурные маски вообще.
Ладно, к чему это я такое большое введение выдал?
Тут по соцсетям в очередной раз прокатилась ода скруглённым углам на технике Apple. Как они все сочетаются и так далее. И что у них даже название своё есть: squircle.
Гусары, молчать
Вот, мы обсуждали тут: https://yangx.top/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("./[email protected]") 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
🫡5👍4🤩2❤1
#фишка дня
Electron так сильно пытается мимикрировать под нативные приложения, что доходит до абсурда.
Вы думали, что вендорные префиксы почти вымерли, да? Все эти -webkit-, -moz-, -ms-, -o-... А как бы не так!
Вот вам
Что это правило делает?
А оно указывает, насколько сильно применять эффект squircle (квадруг, дефолтное закругление на iOS и macOS) к вашим скруглениями границ. Короче, переопределяет поведение border-radius.
И, более того, по-умолчанию настроено на system-ui! На яблоках вы получите squircle, а на остальных системах — классическое скругление. Вы можете даже не осознавать этого.
Чудны дела. А вот и ссылка на доку: https://www.electronjs.org/docs/latest/api/corner-smoothing-css
#css #squircle #macos #electron
Electron так сильно пытается мимикрировать под нативные приложения, что доходит до абсурда.
Вы думали, что вендорные префиксы почти вымерли, да? Все эти -webkit-, -moz-, -ms-, -o-... А как бы не так!
Вот вам
-electron-corner-smoothing!Что это правило делает?
А оно указывает, насколько сильно применять эффект squircle (квадруг, дефолтное закругление на iOS и macOS) к вашим скруглениями границ. Короче, переопределяет поведение border-radius.
И, более того, по-умолчанию настроено на system-ui! На яблоках вы получите squircle, а на остальных системах — классическое скругление. Вы можете даже не осознавать этого.
.box {
width: 128px;
height: 128px;
background-color: cornflowerblue;
border-radius: 24px;
-electron-corner-smoothing: system-ui; /* Match the system UI design. */
}
Чудны дела. А вот и ссылка на доку: https://www.electronjs.org/docs/latest/api/corner-smoothing-css
#css #squircle #macos #electron
🫡9❤4👍1