Chris Bolson
LightNews LightNews
cbolson.bsky.social
Chris Bolson
@cbolson.bsky.social
24 followers 30 following 31 posts
The best dependency is no dependency
Posts Replies Media Videos
cbolson.bsky.social
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.
November 4, 2025 at 8:11 PM
cbolson.bsky.social
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
October 28, 2025 at 8:07 PM
cbolson.bsky.social
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...
October 4, 2025 at 1:04 PM
cbolson.bsky.social
{⚔️} Day 166 of #CSSBattleDaily
I had a bit of fun with todays daily target 😂
cssbattle.dev/play/S777cDY... #CSSBattleChallenge via @cssbattle.dev
September 12, 2025 at 6:25 PM
cbolson.bsky.social
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/...
September 2, 2025 at 4:41 PM
cbolson.bsky.social
Using the CSS attr() function to define grid areas via data attributes.
See the code on #codepen
codepen.io/cbolson/pen/...
August 25, 2025 at 8:47 PM
cbolson.bsky.social
A digital countdown using styled range sliders.
Not very useful but fun to create.

See the full demo on #codepen
codepen.io/cbolson/pen/...
August 23, 2025 at 8:32 PM
cbolson.bsky.social
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/...
August 21, 2025 at 8:44 PM
cbolson.bsky.social
A modern Scrollspy using scroll-target-group and :target-current

See the demo on @codepen.io !

codepen.io/cbolson/pen/... #CodePen #CSS
August 20, 2025 at 7:58 PM
cbolson.bsky.social
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/...
August 15, 2025 at 5:40 PM
cbolson.bsky.social
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/...
August 14, 2025 at 7:32 PM
cbolson.bsky.social
Another demo using sibling-index() to delay the animation.

See the code on #codepen

codepen.io/cbolson/pen/...
August 13, 2025 at 8:03 PM
cbolson.bsky.social
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/...
August 8, 2025 at 8:13 PM
cbolson.bsky.social
Experimenting with corner-shape, using the "bevel" value create hexagon avatars.
See the full code on #codepen
codepen.io/cbolson/pen/...
August 7, 2025 at 5:11 PM
cbolson.bsky.social
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...
August 6, 2025 at 6:20 PM
cbolson.bsky.social
I'm not sure happened to the preview image on that one so here is a short video capture
May 22, 2025 at 1:50 PM
cbolson.bsky.social
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
March 26, 2025 at 7:43 PM
cbolson.bsky.social
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...
December 31, 2024 at 4:21 PM
cbolson.bsky.social
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/...
December 2, 2024 at 8:26 PM
cbolson.bsky.social
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/...
November 27, 2024 at 4:44 PM
cbolson.bsky.social
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/...
November 20, 2024 at 9:14 PM