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.

I remember how excited I was when border-radius became a thing... If only I'd know what would eventually be possible with it about 15 years later 😅 corner-shape takes border-radius to an all new level... @cbolson.bsky.social has made a handy generator for it: www.corner-shape.com

One of my favorite recent pens - Custom Curved Scrollbars that follow the border radius of their container. See the full demo on @codepen.io codepen.io/cbolson/pen/... #codepen,#scrollbar

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. I have added a toggle to let you see the invisible scrolling elements. See the demo on #codepen codepen.io/cbolson/full...

{⚔️} Day 166 of #CSSBattleDaily I had a bit of fun with todays daily target 😂 cssbattle.dev/play/S777cDY... #CSSBattleChallenge via @cssbattle.dev

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. No JS. See the code on #codepen codepen.io/cbolson/pen/...

Using the CSS attr() function to define grid areas via data attributes. See the code on #codepen codepen.io/cbolson/pen/...

A digital countdown using styled range sliders. Not very useful but fun to create. See the full demo on #codepen codepen.io/cbolson/pen/...

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 codepen.io/cbolson/pen/...

A modern Scrollspy using scroll-target-group and :target-current See the demo on @codepen.io ! codepen.io/cbolson/pen/... #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 codepen.io/cbolson/pen/...

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 codepen.io/cbolson/pen/...

Another demo using sibling-index() to delay the animation. See the code on #codepen codepen.io/cbolson/pen/...

An interactive demo of how corner-shape: superellipse() can be used to fine-tune the corners. (Chrome only at the moment) Full code on @codepen.io codepen.io/cbolson/pen/...

Experimenting with corner-shape, using the "bevel" value create hexagon avatars. See the full code on #codepen codepen.io/cbolson/pen/...

I can't wait for sibling-count() and sibling-index() to go baseline. They have so much potential! In this demo I use them to dynamically calculate the position of the elements depending on the total number of elements and their index. See the code on #codepen codepen.io/cbolson/full...

Had some fun with this weeks #codepenchallenge codepen.io/cbolson/pen/... Random animated letters coming together to form a phrase

Finally managed to get in the top 10 on a #CSSBattleDaily with my best ever score of 720.37 😅 cssbattle.dev/play/e5B6sph...

I will admit that it always makes my day when I get one of my pens featured in the @codepen.io Spark newsletter. 😀 codepen.io/spark/437

I watched the first few minutes of this and paused it to be able to have a go at it myself without being influenced by their code or by the original code on Toni Lijic's website. See the code on @CodePen here: codepen.io/cbolson/pen/... Pure CSS, no JavaScript required

🔴 LIVE — @chriscoyier.net and I are reverse engineering a cool feature from Toni Lijic's site. come learn some complex CSS with me! www.youtube.com/live/An3QMWg...

A CSS countdown to 2025 (with a dash of JS at the end). Happy New Year everyone 🎉 See the code on @CodePen codepen.io/cbolson/full...

Using animation-timeline to reveal the text. One of my entries in #codepenchallenge last week. See the code on @codepen.io codepen.io/cbolson/pen/...

To celebrate reaching 500 followers on @codepen.io, I created a Pen dedicated to each one of my 500 followers. Thanks for the follow 👍 codepen.io/cbolson/pen/...

One of my favourites from a few months ago. I have just updated the code a bit to simplify the CSS, making better use of custom properties. I have also added a container query to make it easier to test responsiveness. See the full code on @codepen.io codepen.io/cbolson/pen/...

I created this account a few days ago, I should really start using it and wean myself off the "other" one (won't be hard as I rarely use it anyway)