TGViewer
CSS Боль CSS Боль @cssbol · 579 subscribers
Post #36 2.33K
Вывести значение CSS-переменной прямо на страницу — без JavaScript. Звучит как фантастика, но CSS это умеет: две строчки, работает во всех браузерах.
➿➿➿➿➿➿➿➿➿➿➿➿
Связка counter-reset + counter() + content превращает CSS-переменную в текст на экране. Для целых чисел — элементарно. Для дробных — обход через calc(), чтобы подсказать счётчику тип данных. А если в переменной хранятся градусы или пиксели? Тут помогает tan(atan2()) — трюк, который убирает единицу измерения из значения.

В новом выпуске «CSS Боли» — путь от простого счётчика до анимированного кругового прогресс-бара. Попробуйте в демке самостоятельно и смотрите разбор целиком.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
  • 🔥 8
  • 💯 4
  • ❤‍🔥 3
  • 😱 1
More from @cssbol
  1. Oct 4, 2026Какую же красоту можно делать с Anchor Positioning Это просто промежуточный этап работы
  2. Oct 2, 2026anchor() – царица якорей Функция anchor() живёт внутри большинства сложных демок и крутых…
  3. Sep 25, 2026Скругления в неожиданных местах Скругления хороши в углах блоков, а в других местах они пр…
  4. Sep 18, 2026CSS shape() — фича больших надежд CSS начал вырастать из коротких штанишек квадратного веб…
  5. Sep 11, 2026CSS Anchor Positioning Бывают такие фичи, до которых долго доходят руки. Но чуть познакоми…
  6. Sep 4, 2026Случайные испытания для демонстрации мастерства Запустили сложный игровой режим Восхождени…
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 →