#заметка дня
Итак, что же меня восхищает в волшебном значении border-radius равному 9999px?
Всё очень просто и забавно одновременно: border-radius: 9999px построит вам прямоугольник со скруглёнными углами. В случае квадрата это будет, очевидно, круг.
Вот issue из обсуждений спецификации CSS WG: https://www.w3.org/Style/CSS/Tracker/issues/29
Сам автор issue говорит, что безпол-литра картинок там не разобраться. Cut the crap, они пошли по третьему варианту: https://www.w3.org/TR/css-backgrounds-3/#corner-overlap
Там в целом геометрия эллипсов, потому описание формулы такое странное и учитываются все углы, но давайте просто посчитаем, что же получится для значения в 10000px (проще считать) и прямоугольника размером 320x240px, углы начинаем с верхнего левого (Top Left):
TL: 320/20000 vs 240/20000
TR: 320/20000 vs 240/20000
BR: 320/20000 vs 240/20000
BL: 320/20000 vs 240/20000
0.016 vs 0.012 в каждом случае
Итого, 0.012 — минимальное значение коэффициента приведения радиуса.
10000 * 0.012 = 120.
Половина высоты, выходит. Проверяем себя: https://codepen.io/alinaki/pen/jOxRwJJ
Вариант, когда значения радиуса индивидуальны, рассмотрен там же в спецификации.
Во Flutter используется геометрия кривых и понять это пусть всё ещё проще, чем структуру исходного кода Chromium, но всё равно сложно. Тем не менее, имеются упоминания, что радиусы приводятся к минимальному значению размерности.
И да, 9999px это совсем не то же, что 50%, опять же — смотрите спецификацию, там эллипсы. Но в случае квадрата — и там и там будет круг.
#geometry #borderradius #css #flutter
Итак, что же меня восхищает в волшебном значении border-radius равному 9999px?
Всё очень просто и забавно одновременно: border-radius: 9999px построит вам прямоугольник со скруглёнными углами. В случае квадрата это будет, очевидно, круг.
Вот issue из обсуждений спецификации CSS WG: https://www.w3.org/Style/CSS/Tracker/issues/29
Сам автор issue говорит, что без
Там в целом геометрия эллипсов, потому описание формулы такое странное и учитываются все углы, но давайте просто посчитаем, что же получится для значения в 10000px (проще считать) и прямоугольника размером 320x240px, углы начинаем с верхнего левого (Top Left):
TL: 320/20000 vs 240/20000
TR: 320/20000 vs 240/20000
BR: 320/20000 vs 240/20000
BL: 320/20000 vs 240/20000
0.016 vs 0.012 в каждом случае
Итого, 0.012 — минимальное значение коэффициента приведения радиуса.
10000 * 0.012 = 120.
Половина высоты, выходит. Проверяем себя: https://codepen.io/alinaki/pen/jOxRwJJ
Вариант, когда значения радиуса индивидуальны, рассмотрен там же в спецификации.
Во Flutter используется геометрия кривых и понять это пусть всё ещё проще, чем структуру исходного кода Chromium, но всё равно сложно. Тем не менее, имеются упоминания, что радиусы приводятся к минимальному значению размерности.
И да, 9999px это совсем не то же, что 50%, опять же — смотрите спецификацию, там эллипсы. Но в случае квадрата — и там и там будет круг.
#geometry #borderradius #css #flutter
👍5🤯3
#заметка дня
Что-то вчерашняя заметка про border-radius: 9999px внесла сумятицу в молодые умы. Я решил, что нужна ещё одна.
На сей раз с иллюстрацией
Итак. 9999px — это просто моё любимое число.
Взамен 9999px можно использовать 100vmax, infinity, calc(1px / 0). Все же помнят соглашение, что деление на ноль даёт бесконечность?
Результат будет один: мы получим скруглённый прямоугольник.
Если же вы выставите 50% — получится эллипс с радиусами в 50% ширины и 50% высоты, на иллюстрации справа.
Разница очевидна, и нам редко нужны эллипсы в жизни. А так хотелось квадруг… (squircle). Ну да ладно.
Обновил кодпен: https://codepen.io/alinaki/pen/jOxRwJJ
Ну и конечно, вынесу сюда ссылку на обсуждение (спасибо Илье Стрельцыну) внедрения в CSS значения border-radius равного round, чтобы убрать этот кажущийся «хак»: https://github.com/w3c/csswg-drafts/issues/6467
Вот только подвижек никаких, всем сразу захотелось больше вариантов.
#geometry #css
Что-то вчерашняя заметка про border-radius: 9999px внесла сумятицу в молодые умы. Я решил, что нужна ещё одна.
На сей раз с иллюстрацией
Итак. 9999px — это просто моё любимое число.
Взамен 9999px можно использовать 100vmax, infinity, calc(1px / 0). Все же помнят соглашение, что деление на ноль даёт бесконечность?
Результат будет один: мы получим скруглённый прямоугольник.
Если же вы выставите 50% — получится эллипс с радиусами в 50% ширины и 50% высоты, на иллюстрации справа.
Разница очевидна, и нам редко нужны эллипсы в жизни. А так хотелось квадруг… (squircle). Ну да ладно.
Обновил кодпен: https://codepen.io/alinaki/pen/jOxRwJJ
Ну и конечно, вынесу сюда ссылку на обсуждение (спасибо Илье Стрельцыну) внедрения в CSS значения border-radius равного round, чтобы убрать этот кажущийся «хак»: https://github.com/w3c/csswg-drafts/issues/6467
Вот только подвижек никаких, всем сразу захотелось больше вариантов.
#geometry #css
👍22
#такое дня
Что-то меня задело сегодня высказывание, что я тут мало по вёрстке выкладываю.
По-моему, я тут только про вёрстку и выкладываю. И лично мне хотелось бы больше хардкора и историй за жизнь.
Но ок, завтра будет хардкор по вёрстке. Всё и сразу. Надо немного подготовиться только. Держитесь там.
Ну и как всегда — делитесь, что хотели бы увидеть.
#css #js #geometry
Что-то меня задело сегодня высказывание, что я тут мало по вёрстке выкладываю.
По-моему, я тут только про вёрстку и выкладываю. И лично мне хотелось бы больше хардкора и историй за жизнь.
Но ок, завтра будет хардкор по вёрстке. Всё и сразу. Надо немного подготовиться только. Держитесь там.
Ну и как всегда — делитесь, что хотели бы увидеть.
#css #js #geometry
❤13👍8❤🔥2😱2
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня и #codepen
Лет шесть назад поступил мне заказ от агентства, работающего на некий автозавод. Они хотели «разрезать» машину под углом, представив её в двух ипостасях: для отдыха и для работы.
К сожалению, набор браузеров не позволял просто взять clip-path. Поэтому я даже немного завидую людям, который вошли в мир промо-сайтов в последние пару-тройку лет.
Что же пришлось делать? Немного геометрии! И забавных визуальных хаков.
Повернуть контейнер, сдвинуть его, чтобы совместить части. А вот внутреннюю часть контейнера — повернуть в обратном направлении и обратно же сдвигать на те же значения.
Где-то у меня даже завалялась бумажка с расчётами… если интересно будет кому — можно восстановить.
Ну и, конечно, с использованием CSS-переменных код стал в два раза меньше только за счёт того, что не пришлось клеить строки стилей.
Десктоп: https://codepen.io/alinaki/pen/MWGMLey?editors=0010
P. S. если вам нужны подобные совмещённые изображения — ищите по запросу macos dynamic wallpaper.
#css #geometry
Лет шесть назад поступил мне заказ от агентства, работающего на некий автозавод. Они хотели «разрезать» машину под углом, представив её в двух ипостасях: для отдыха и для работы.
К сожалению, набор браузеров не позволял просто взять clip-path. Поэтому я даже немного завидую людям, который вошли в мир промо-сайтов в последние пару-тройку лет.
Что же пришлось делать? Немного геометрии! И забавных визуальных хаков.
Повернуть контейнер, сдвинуть его, чтобы совместить части. А вот внутреннюю часть контейнера — повернуть в обратном направлении и обратно же сдвигать на те же значения.
Где-то у меня даже завалялась бумажка с расчётами… если интересно будет кому — можно восстановить.
Ну и, конечно, с использованием CSS-переменных код стал в два раза меньше только за счёт того, что не пришлось клеить строки стилей.
Десктоп: https://codepen.io/alinaki/pen/MWGMLey?editors=0010
P. S. если вам нужны подобные совмещённые изображения — ищите по запросу macos dynamic wallpaper.
#css #geometry
👍20🔥9
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня и #codepen
Лет шесть назад поступил мне заказ от агентства, работающего на некий автозавод. Они хотели «разрезать» машину под углом, представив её в двух ипостасях: для отдыха и для работы.
К сожалению, набор браузеров не позволял просто взять clip-path. Поэтому я даже немного завидую людям, который вошли в мир промо-сайтов в последние пару-тройку лет.
Что же пришлось делать? Немного геометрии! И забавных визуальных хаков.
Повернуть контейнер, сдвинуть его, чтобы совместить части. А вот внутреннюю часть контейнера — повернуть в обратном направлении и обратно же сдвигать на те же значения.
Где-то у меня даже завалялась бумажка с расчётами… если интересно будет кому — можно восстановить.
Ну и, конечно, с использованием CSS-переменных код стал в два раза меньше только за счёт того, что не пришлось клеить строки стилей.
Десктоп: https://codepen.io/alinaki/pen/MWGMLey?editors=0010
P. S. если вам нужны подобные изображения — ищите по запросу macos dynamic wallpaper.
#css #geometry #бородач
Лет шесть назад поступил мне заказ от агентства, работающего на некий автозавод. Они хотели «разрезать» машину под углом, представив её в двух ипостасях: для отдыха и для работы.
К сожалению, набор браузеров не позволял просто взять clip-path. Поэтому я даже немного завидую людям, который вошли в мир промо-сайтов в последние пару-тройку лет.
Что же пришлось делать? Немного геометрии! И забавных визуальных хаков.
Повернуть контейнер, сдвинуть его, чтобы совместить части. А вот внутреннюю часть контейнера — повернуть в обратном направлении и обратно же сдвигать на те же значения.
Где-то у меня даже завалялась бумажка с расчётами… если интересно будет кому — можно восстановить.
Ну и, конечно, с использованием CSS-переменных код стал в два раза меньше только за счёт того, что не пришлось клеить строки стилей.
Десктоп: https://codepen.io/alinaki/pen/MWGMLey?editors=0010
P. S. если вам нужны подобные изображения — ищите по запросу macos dynamic wallpaper.
#css #geometry #бородач
🔥15👍5❤1
#перевод дня
Я тут не так давно постил шикарную статью о том, как рисовать веревку (канат) на основе любого SVG-контура:
https://yangx.top/htmlshit/1819
Оказывается, на Хабре есть её перевод, который я почему-то пропустил!
Вот он: https://habr.com/ru/company/nmg/blog/719822/
Что статья, что перевод отличные и достойны пристального внимания. Даже если ты никогда в жизни веревку не применишь (ну не каждый же человек делает сайты браслетам с якорями, правда?), сам подход к расстановке приоритетов и отрисовке геометрии — очень полезен.
Я сам очень часто сначала рисую анимацию или схему, а потом уже верстаю.
#svg #geometry
Я тут не так давно постил шикарную статью о том, как рисовать веревку (канат) на основе любого SVG-контура:
https://yangx.top/htmlshit/1819
Оказывается, на Хабре есть её перевод, который я почему-то пропустил!
Вот он: https://habr.com/ru/company/nmg/blog/719822/
Что статья, что перевод отличные и достойны пристального внимания. Даже если ты никогда в жизни веревку не применишь (ну не каждый же человек делает сайты браслетам с якорями, правда?), сам подход к расстановке приоритетов и отрисовке геометрии — очень полезен.
Я сам очень часто сначала рисую анимацию или схему, а потом уже верстаю.
#svg #geometry
👍9🔥1
#статья дня
Самая имбовая статья рунета на тему оптического выравнивания иконок: https://habr.com/ru/companies/badoo/articles/333992/
Математика не стареет! Вечнозелёная статья, люблю такие.
Что не так с выравниванием вообще?
Если расположить некоторые объекты по их геометрическому центру (например, по пересечению диагоналей описанного прямоугольника), то визуально будет казаться, что всё очень и очень плохо. Например, одно из оснований треугольника будет явно перевешивать (первый же пример в статье).
Что же делать? Ну, например, описывать не прямоугольник, а круг.
А вот в случае сложных составных фигур нужно бить её на детали, искать их центры и вычислять т. н. барицентр по ним. И в статье есть и формулы для вычисления и пример алгоритма.
Я себе на случай смерти хабра статью даже сохранил. Надо, кстати, проверить, а что там в Figma.
А вот сервис для проверки соответствия визуального центра геометрическому: https://javier.xyz/visual-center
#optics #geometry
Самая имбовая статья рунета на тему оптического выравнивания иконок: https://habr.com/ru/companies/badoo/articles/333992/
Математика не стареет! Вечнозелёная статья, люблю такие.
Что не так с выравниванием вообще?
Если расположить некоторые объекты по их геометрическому центру (например, по пересечению диагоналей описанного прямоугольника), то визуально будет казаться, что всё очень и очень плохо. Например, одно из оснований треугольника будет явно перевешивать (первый же пример в статье).
Что же делать? Ну, например, описывать не прямоугольник, а круг.
А вот в случае сложных составных фигур нужно бить её на детали, искать их центры и вычислять т. н. барицентр по ним. И в статье есть и формулы для вычисления и пример алгоритма.
Я себе на случай смерти хабра статью даже сохранил. Надо, кстати, проверить, а что там в Figma.
А вот сервис для проверки соответствия визуального центра геометрическому: https://javier.xyz/visual-center
#optics #geometry
🔥10👍6