Chris Bolson
LightNews LightNews
cbolson.bsky.social
Chris Bolson
@cbolson.bsky.social
30 followers 37 following 44 posts
The best dependency is no dependency
Posts Replies Media Videos
cbolson.bsky.social
Another animation-timeline descrambling pen.
See the demo on #codepen (link in first comment)
January 17, 2026 at 7:52 PM
cbolson.bsky.social
Descrambling text using rotation and animation-timeline.
Pure CSS with no JS.

Link to demo in first comment.

#codepen #cssonly
January 9, 2026 at 6:56 PM
Reposted by Chris Bolson
codepen.io
"Flip Text on Hover (Syntax challenge)" by Chris Bolson

codepen.io/cbolson/pen/...
January 2, 2026 at 4:32 PM
cbolson.bsky.social
An experiment using CSS position-anchor to create a hover before&after image slider.
Link to the #codepen in the first comment.
January 2, 2026 at 9:13 AM
cbolson.bsky.social
A roundup of my pens created in 2025 which have received the most love throughout the year.
#codepen, #2025rewind
December 26, 2025 at 12:30 PM
cbolson.bsky.social
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)
December 11, 2025 at 8:56 PM
Reposted by Chris Bolson
cssweekly.com
CSS Weekly #629
🏔️ Range Syntax for Style Queries
🎯 New layouts with CSS Subgrid
🧠 Intro to CSS if Statements

Featuring @una.im, @joshwcomeau.com, @sunkanmifafowora.bsky.social, @stefanjudis.com, @tylersticka.com, @amitsheen.bsky.social, @innocenzi.dev, @cbolson.bsky.social. 🙏

cssw.io/issue-629
CSS Weekly Issue #629
Learn the new range syntax for CSS style queries and the if() function, the exciting new things you can do with subgrid, and more.
cssw.io
December 3, 2025 at 5:06 PM
cbolson.bsky.social
Basic CSS only math using the new function() & if() functions (and a dash of custom select thrown in): codepen.io/cbolson/pen/... via @CodePen
#codepenchallenge
November 18, 2025 at 8:58 PM
cbolson.bsky.social
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.
November 15, 2025 at 6:49 PM
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
Reposted by Chris Bolson
kevinpowell.co
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
A div that has a scooped out top left and bottom right corners, a notched top right corner, and a round bottom left corner. A dive the looks a bit like a L that has been rotated 180deg A div with a top left round corner, and a scoopped bottom right corner A very strange looking shape. Almost like a circus tent, but with an extra rectangle added to the bottom right corner.
October 31, 2025 at 6:38 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