TGViewer
mefody.dev mefody.dev @mefody_dev · 5.38K subscribers
Post #364 4.27K
CSS-фигуры при помощи функции shape()

Темани Афиф написал аж три статьи с множеством демок, в которых он объясняет возможности функции shape() в CSS. Это такая функция, при помощи которой можно рисовать полноценные векторные формы, но не в сложночитаемом для новичков синтаксисе SVG-путей, а чуть ли не человеческим языком. Отличное решение для всяких динамических фигур, которые зависят от CSS-переменных на странице.

- Часть 1. Про линии и дуги
- Часть 2. Ещё про дуги
- Часть 3. Про кривые

Обсуждали с Полиной Гуртовой во вчерашнем 478 эпизоде подкаста «Веб-стандарты» третью статью. После записи подкаста прочитал её внимательнее — стал чуть-чуть лучше понимать кривые Безье.
CSS-Tricks Better CSS Shapes Using shape() — Part 3: Curves | CSS-Tricks This is the third article in a series about the CSS shape() function. We've covered drawing lines and arcs in previous articles and, this time, we look specifically at the curve command and how to use it for drawing complex shapes.
  • 🔥 24
  • ❤ 8
  • ⚡ 2
More from @mefody_dev
  1. Sep 23, 2026Цена ошибок гидрации В React есть много ухищрений, чтобы серверный кусок страницы обновилс…
  2. Sep 16, 2026Какие анимации более производительные: CSS или JS? Лучше пару раз увидеть, чем много откуд…
  3. Sep 14, 2026Единица измерения lh Если коротко, то 1lh = 1 line height. И это не размер шрифта, который…
  4. Sep 11, 2026<mermaid-element> Ещё одна полезная библиотека. Брамус собрал кастомный элемент, которому…
  5. Sep 10, 2026MicroLighter Дейв Руперт собрал маленькую библиотечку, которая делает подсветку кода. «Ещё…
  6. Sep 9, 2026Вам больше не нужен initial-scale Стопудово где-то у вас в вёрстке есть <meta name="viewpo…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →