Sign in

Chris Bolson

@cbolson.bsky.social
92 followers 64 following 142 posts

The best dependency is no dependency 🔗 codepen.io/cbolson

PostsRepliesMedia
Chris Bolson @cbolson.bsky.social · 15/09/2026
A CSS-only circular nav using experimental `::scroll-*`, `animation-timeline: scroll()` and anchor positioning. Scroll drives the items around the circle, with anchors handling the current label and prev/next controls. ⚠️ Chromium only. See the demo on @codepen.io: codepen.io/editor/cbols...
0333
Reposted by Chris Bolson
Álvaro Montoro @alvaromontoro.com · 06/09/2026
To practice and learn, I checked the accessibility of La Liga teams' homepages ⚽ I documented the results, the issues I found, the methodology I followed (combining automated+manual tests)... and shared it on my blog: alvaromontoro.com/blog/68112/l... #LaLiga #Accessibility #A11y #WebDev #Soccer
alvaromontoro.com
La Liga's Web Accessibility Table: How Do Clubs Actually Score?
Web accessibility ensures that every supporter (including those with visual, auditory, motor, or cognitive disabilities) can use a website. So how well do these teams' homepages hold up? I analyzed di...
294
Reposted by Chris Bolson
Jake Archibald @jakearchibald.com · 26/08/2026
📝 When and how CSS custom properties are calculated might not be what you expect, and it has a big impact on your styles. Here's how it works: jakearchibald.com/2026/css-cus...
jakearchibald.com
Controlling when CSS custom properties are computed
The default might not be what you expect, and it has a big impact on your styles.
98715
Reposted by Chris Bolson
Kevin Powell @kevinpowell.co · 07/08/2026
I'm sure you already heard about the big update to @codepen.io. If you're still trying to work your way around it @chriscoyier.net sat down with me to walk me through all of the changes. youtu.be/q_0RweY2VJc
youtu.be
CodePen just got a HUGE upgrade
YouTube video by Kevin Powell
3287
Chris Bolson @cbolson.bsky.social · 20/07/2026
From 13 teams in 1930 to 48 teams in 2026 ⚽ This World Cup timeline demo covers every tournament, revealing stats, results and highlights using CSS animation-trigger with a scroll-driven animation fallback. See the demo on @codepen.io : codepen.io/editor/cbols...
codepen.io
World Cup Timeline using animation-trigger
My final CodePen demo to celebrate the 2026 FIFA World Cup. This timeline showcases every FIFA World Cup tournament, from the inaugural competition in
030
Chris Bolson @cbolson.bsky.social · 20/07/2026
The best headline of the day!
000
Chris Bolson @cbolson.bsky.social · 09/07/2026
A new #cssonly demo: scroll-triggered counters. In supporting browsers (Chrome only currently), counters count up when scrolled into view. Built with `timeline-trigger`, `animation-trigger`, `attr()`, `@property` and `sibling-index()`. See the demo on @codepen.io: codepen.io/editor/cbols...
codepen.io
CSS only counters using timeline-trigger, animation-trigger & attr()
This demo uses the experimental timeline-trigger and animation-trigger properties to start CSS animations when the counters enter the viewport. The co
032
Chris Bolson @cbolson.bsky.social · 28/06/2026
As the 2026 World Cup enters the knockout stage, I challenged myself to build a CSS-only tournament bracket ⚽️ Using attr(), style queries and plenty of :has(), the bracket updates as you pick each winner—all without JavaScript. Check out the demo on @codepen.io : codepen.io/editor/cbols...
codepen.io
2026 World Cup Knock-Out Stages #cssonly
This bracket is 100% CSS, the logic being defined by multiple :has() selectors. Not overly practical but a fun CSS only challenge. Select the team tha
162
Chris Bolson @cbolson.bsky.social · 25/06/2026
Well worth the read! My mind is already taking these gap decorations where they were not built to go 😆
021
Reposted by Chris Bolson
Álvaro Montoro @alvaromontoro.com · 24/06/2026
A bit late (in my defense, I've been all over the place in June), but here's the 10 cool CodePen demos from May... alvaromontoro.com/10-cool-code... generative art, CSS art, clocks, shape tools, components, animations, parallax... and more!
alvaromontoro.com
10 Cool CodePen demos
10 Cool CodePen demos from May 2026
141
Chris Bolson @cbolson.bsky.social · 22/06/2026
I'm working on something interesting right now which uses some really new experimental CSS.
031
Chris Bolson @cbolson.bsky.social · 14/06/2026
A "hot corner" picker which displays the options in their corresponding corners using custom select. It also uses advanced attr() functions to get the option value and the if() function to define in which corner to place the option. See the full demo on @codepen.io codepen.io/cbolson/pen/...
011
Chris Bolson @cbolson.bsky.social · 12/06/2026
One more Custom Select demo to round off the week. This displays the options as a tags list - nice and simple! See the full demo on @codepen.io : codepen.io/editor/cbols...
110
Chris Bolson @cbolson.bsky.social · 11/06/2026
It looks like I may have pushed my luck with the Custom Selects. I tried to combine it with the experimental carousel using ::scroll-marker etc. It does work in that it displays the markers and they are highlighting on hover. However clicking on them seems to be just too much for the browser 😅
120
Reposted by Chris Bolson
Saron Yitbarek @saron.bsky.social · 11/06/2026
The <select> element has been tough to style for decades. appearance: base-select changes that. We'll walk you through full CSS control, rich HTML options, and keeping it accessible — all while leveraging the power of the native element.
developer.apple.com
Rediscover the HTML select element - WWDC26 - Videos - Apple Developer
Learn how to unlock full control of styling select menus on the web. The HTML select element is getting a major upgrade with a new CSS...
25012
Chris Bolson @cbolson.bsky.social · 11/06/2026
This has to be one of my favorite @codepen.io collections right now: codepen.io/collection/G... It contains my demos where I've been testing out the new customizable <select> element. With Safari 27 adding support, fully customizable select lists are starting to feel like a real possibility!
codepen.io
Custom Select - a Collection by Chris Bolson on CodePen
My Custom Select demos that explore and push the boundaries of the experimental custom select styling.
010
Chris Bolson @cbolson.bsky.social · 09/06/2026
Yet another custom select demo based on the 2026 World Cup 😅 This one takes advantage of the optgroup element to display each group as a css grid cell block, along with normal grid responsiveness. See the demo on @codepen: codepen.io/editor/cbols...
120
Chris Bolson @cbolson.bsky.social · 08/06/2026
⚽ Football Team Selector Pick a team and the formation reconfigures as players transition into their new positions. Team shirt colors update too. Built with custom select styling, anchor positioning, advanced attr() functions, and container style queries. See the full demo on @codepen.io
251
Chris Bolson @cbolson.bsky.social · 03/06/2026
This World Cup-themed selector presents teams as a rotating list of options rather than a traditional dropdown. Built using the latest experimental select customization features, with the native options list serving as a fallback where unsupported. Demo on @codepen.io codepen.io/editor/cbols...
1142
Chris Bolson @cbolson.bsky.social · 28/05/2026
A new #cssonly carousel demo built around the :scroll-* pseudo-elements. Using: – CSS anchor positioning for centered placement – container style queries to toggle between transition modes A fun experiment with some modern CSS features. See the demo on @codepen.io codepen.io/editor/cbols...
083
Chris Bolson @cbolson.bsky.social · 26/05/2026
Working on a new custom select demo ...
010
Chris Bolson @cbolson.bsky.social · 08/05/2026
It makes my month when Alvaro picks one of my CodePen demos, thanks @alvaromontoro.com ! The one that Alvaro features in his April top 10 was slightly different than my usual demos as I had a go at some CSS art to help celebrate the Artemis 2 Moon Flyby.
120
Chris Bolson @cbolson.bsky.social · 16/04/2026
Just another clock… but really an excuse to play with CSS anchor positioning to place time labels along expanding clock-hand rings. JS updates a few CSS custom properties, whilst CSS uses and display the values. The cheese color swapper was just an extra bit of fun. See the demo on @codepen.io
171
Chris Bolson @cbolson.bsky.social · 12/04/2026
This circular color theme switcher uses hidden radio buttons and clip-path on the labels. See the full demo on @codepen.io codepen.io/cbolson/full...
010
Chris Bolson @cbolson.bsky.social · 06/04/2026
A simple css scroll based animation to help celebrate the Artemis 2 crew reaching the furthest point mankind has travelled from earth 🚀 See the full demo on @codepen.io codepen.io/cbolson/full... #artemis
codepen.io
Artemis 2 Integrity - scroll to reach the moon
An animation-timeline:scroll based animation to simulate the Artemis Integrity crewship approaching the moon. Note - this is NOT meant to be a realist...
043
Reposted by Chris Bolson
Álvaro Montoro @alvaromontoro.com · 05/04/2026
For the past 3+ years, I have been posting a monthly "newsletter" with some cool CodePen demos published during that month. alvaromontoro.com/10-cool-code... For a change, I recorded a video talking about them and showing why I think they are cool: www.youtube.com/watch?v=KW91...
youtube.com
10 Cool CodePen Demos (March 2026)
YouTube video by Alvaro Montoro
042
Reposted by Chris Bolson
Álvaro Montoro @alvaromontoro.com · 04/04/2026
10 Cool CodePen Demos from March alvaromontoro.com/10-cool-code... Really impressive CSS Art, even more impressive custom selectors, new feature showcases, electronic "dash battles", scroll-driven animations... and more! #css #html #javascript #webdev #codepen
alvaromontoro.com
10 Cool CodePen demos
10 Cool CodePen demos from March 2026
272
Chris Bolson @cbolson.bsky.social · 02/04/2026
To celebrate the launch of Artemis II 🚀, I put together a #cssonly scroll-driven animation. Powered by animation-timeline: scroll — no JavaScript, just modern CSS. Still WIP, but already a fun experiment. Full demo on @codepen.io ✨ codepen.io/cbolson/full... #artemis
1115
Reposted by Chris Bolson
Kevin Powell @kevinpowell.co · 31/03/2026
I've just relaunched CSS Demystified! Rebuilt from the ground up, on my own custom platform, and here to help you start writing CSS with confidence 😊 thecascade.dev/courses/css-...
thecascade.dev
CSS Demystified - a course by Kevin Powell
Start writing CSS with confidence.
410721
Chris Bolson @cbolson.bsky.social · 27/03/2026
More CSS anchor positioning fun! In this demo: – an indicator slides behind hovered avatars – team data snaps perfectly into a central octagon All tied together with a bit of corner-shape() magic. Pure CSS. Full demo on @codepen.io codepen.io/cbolson/pen/...
091
Chris Bolson @cbolson.bsky.social · 20/03/2026
Arrowed nav links using just corner-shape(). Hover or focus to expand — pure CSS, zero JS. Full demo on @codepen.io codepen.io/cbolson/pen/...
2320
Chris Bolson @cbolson.bsky.social · 20/03/2026
There goes my bracket! Some big upsets in todays round of #madCSS
030
Chris Bolson @cbolson.bsky.social · 19/03/2026
This demo uses animation-timeline: scroll to smoothly zoom each card into the center as you scroll - powered by modern CSS. See the full demo on @codepen.io codepen.io/cbolson/pen/...
070
Reposted by Chris Bolson
Nils Binder @ichimnetz.com · 16/03/2026
After finally understanding @css-only.dev's demo for calculating the shortest paths between points, I was able to create this little spotlight effect. Pretty happy with the result! codepen.io/enbee81/deta...
codepen.io
anchor ray 3 spotlights - final
This would not have been possible without seeing Temani Afif’s mind-blowing CSS-only graph theory. https://codepen.io/t_afif/pen/YPWMmOP...
45613
Reposted by Chris Bolson
Chris Coyier @chriscoyier.net · 09/03/2026
One day you're like "we should send a weekly newsletter about the cool stuff on @codepen.io and around". Then 500 weeks go by. 🎉 codepen.io/spark/500
3586
Chris Bolson @cbolson.bsky.social · 09/03/2026
Race to the 2025 F1 Drivers’ Championship 🏎️ This demo leans heavily on modern CSS: • advanced attr() functions • animation-timeline: scroll The race positions and data update as you scroll through the season - all driven by CSS. Full demo on @codepen.io codepen.io/cbolson/pen/...
141
Chris Bolson @cbolson.bsky.social · 07/03/2026
CSS Daily 2026-03-07 Score: 73% | Time: 10:02 Such fun! Hopefully with practice I can improve on that percentage! cssdaily.dev
cssdaily.dev
CSS Daily - A Daily CSS Challenge
A daily CSS challenge - like Wordle, but for CSS!
000
Reposted by Chris Bolson
Ryan McGovern @tekgadgt.dev · 07/03/2026
Watched March MadCSS and thought "what if we could do this every day?" So I built it. In a day. cssdaily.dev — a daily CSS challenge. Write CSS to match a target, get pixel-diffed in real-time. New challenge every morning. Scoring adapted from @wesbos.com and @tolin.ski's open-source SynHax.
cssdaily.dev
CSS Daily - A Daily CSS Challenge
A daily CSS challenge - like Wordle, but for CSS!
96511
Reposted by Chris Bolson
Josh W. Comeau @joshwcomeau.com · 07/03/2026
Congrats, @kevinpowell.co! Huge achievement 💯
1643
Reposted by Chris Bolson
Shaw @shaw.city · 06/03/2026
codepen.io/beta
48723
Reposted by Chris Bolson
Álvaro Montoro @alvaromontoro.com · 06/03/2026
Of all the demos I've seen with custom dropdowns in CSS, this one by @cbolson.bsky.social is the most impressive so far. You can't even tell that it is a <select> element, and the experience is so smooth! ⭐⭐⭐⭐⭐ Check it out (looks better on Chrome) 👉 codepen.io/editor/cbols... #html #css #webDev
codepen.io
2026 F1 Drivers Custom Select using appearance: base-select
A demo using the experimental appearance: base-select to style a select list of Formula 1 drivers. This demo also uses the attr() function to retriev
161
Chris Bolson @cbolson.bsky.social · 06/03/2026
I have 3 out of 4 so far in my #madCSS bracket - well done guys! It was great fun. CJs commentary was great!
010
Chris Bolson @cbolson.bsky.social · 05/03/2026
The 2026 F1 season is here 🏁 So I built another experimental custom <select> — this time featuring F1 drivers. See the demo on @codepen.io codepen.io/editor/cbols...
2488
Chris Bolson @cbolson.bsky.social · 04/03/2026
Building a #hash thumbnail navigation using the experimental :target-before, :target-current & :target-after With anchor-positioning and animation-timeline thrown in for good measure. Pure CSS. No JavaScript. Full demo on @codepen.io codepen.io/cbolson/pen/...
041
Reposted by Chris Bolson
CSS by T. Afif @css-only.dev · 03/03/2026
And it's live! A new CSS generator for fancy frames (Squiggly, Ragged, Wavy, Torn, etc.). Powered by shape() and ready for border-shape as well! css-generators.com/fancy-frame/ It's responsive and works with any elements, including images. Play with the settings and show me your best frame 👇
1324
Reposted by Chris Bolson
CSS by T. Afif @css-only.dev · 02/03/2026
It seems we can now customize the select element, right? right?! Demo: codepen.io/t_afif/pen/P... via @codepen.io
1238685
Reposted by Chris Bolson
Álvaro Montoro @alvaromontoro.com · 01/03/2026
10 Cool Codepen Demos: February 2026 alvaromontoro.com/10-cool-code... 3D animations, particles with Three.js, shaders, color pickers, games, impressive graphs with CSS... and more! #webdev #javascript #html #css #codepen
alvaromontoro.com
10 Cool CodePen demos
10 Cool CodePen demos from February 2026
082
Chris Bolson @cbolson.bsky.social · 28/02/2026
Another custom select list using using appearance: base-select. On browsers that don't yet support this, a normal select list will be displayed. See the full demo on @codepen.io codepen.io/cbolson/pen/...
3415
Reposted by Chris Bolson
CodePen @codepen.io · 17/02/2026
"Picket fence animation using scroll animations" by Chris Bolson codepen.io/cbolson/pen/...
071
Chris Bolson @cbolson.bsky.social · 14/02/2026
A circular gallery using offset to position the thumbnails and anchor-positioning for the main, central image. See the demo on @codepen.io codepen.io/cbolson/pen/...
031