See it in action here

Falling cards with perspective using just CSS. The cards drop down as you scroll down using animation-timeline. #codepen #cssonly (see the Codepen link in first comment)

CSS Weekly #629 🏔️ Range Syntax for Style Queries 🎯 New layouts with CSS Subgrid 🧠 Intro to CSS if Statements Featuring @Una, @JoshWComeau, @MPorterBridges, @the_jonin_, @stefanjudis, @tylersticka, @amit_sheen, @enzoinnocenzi, @cbolson. 🙏 https://t.co/c0esJyKhpM

Basic CSS only math using the new function() & if() functions (and a dash of custom select thrown in): https://t.co/js8RVWDHgW via @CodePen #codepenchallenge

Whilst it may not like it, this is a normal HTML select list. It takes advantage of the CSS appearance: base-select property value (not yet widely available) to create customizable select elements. No JS required.

Using the new css corner-shape property to create a fun gallery for this weeks #codepenchallenge A simple radio button allows you to toggle between the corner-shape keyword values. https://t.co/mjZTZcxlmX

custom curved scrollbars - so cool by @cbolson

Testing out the experimental CSS ::scroll-* pseudo elements to create interactive carousels with no JavaScript. This demo pushes the idea by not even appearing to scroll. Use the toggle to see the invisible scrolling elements. See the demo on #codepen https://t.co/SOCqo51b8z

{⚔️} Day 166 of #CSSBattleDaily I had a bit of fun with this one today 😅 https://t.co/dvx7y79JUL via @css_battle

I forgot to mention, no JavaScript required.

Using modern CSS functions to do math. This uses attr() to get the values, if() to define the operation and function() to actually do the math. See the code on #codepen https://t.co/wHPNmZXzdj

Using the CSS attr() function to define grid areas via data attributes. See the code on #codepen https://t.co/NnFB1MDsUy

A digital countdown using styled range sliders. Not very useful but fun to create. See the full demo on #codepen https://t.co/rNHPglhHha

This hamburger icon menu expands from the corner and uses sibling-count() and sibling-index() to calculate the position of each button. See the full code on #codepen https://t.co/20bfszR3NP

A modern Scrollspy using scroll-target-group and :target-current See the demo on @CodePen ! https://t.co/OcSxC5cwr3 #CodePen #CSS

Another demo using the CSS attr() function. This one uses data attributes to define the percentages in a pie-chart. See the full code on #codepen https://t.co/SQRZuwnZIl

Using the new attr() CSS function to define the target number and duration of a counter. No JS required. See the full code on #codepen https://t.co/Y3IfdySMdY

Another demo using sibling-index() to delay the animation. See the code on #codepen https://t.co/vpVX6bsKDU

@CodePen I have created a dedicated website for this tool. I will probably add more options to choose the notch,scoop, bevel etc. presets. https://t.co/ZMdfaNlKyc

@CodePen I have added sliders for the second border-radius property to create even more interesting shapes