Chris Bolson

Another #CSSonly `::scroll-*` demo! This one keeps things a little simpler, using scroll markers as tabs and scroll-triggered animations to bring the selected tab’s content to life. ⚠️ Currently only works in Chromium-based browsers. See the full demo on @codepen.io codepen.io/editor/cbols...

I don't normaly share this sort of thing but this one hits close to home. Billy is my nephew. 7 years ago mine and my families life got flipped upside down and changed forever On the morning of 14th July 2019 my sons 5th birthday of all days I suffe... fundraise.cancerresearchuk.org/team/billys-...

🎃 A little Halloween FizzBuzz fun! 100 floating numbers, some CSS random(), a bit of sibling-index(), and some spooky surprises hiding behind the numbers. 👻 Hover over one to see what happens… See the full demo on @codepen.io codepen.io/editor/cbols... #codepenchallenge #FizzBuzz #Halloween

It is always a great privilege to have one of my demos included in Álvaros monthly round up. Thanks!

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...

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

📝 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...

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

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...

The best headline of the day!

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...

Well worth the read! My mind is already taking these gap decorations where they were not built to go 😆

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!

I'm working on something interesting right now which uses some really new experimental CSS.

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/...

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...

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 😅

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.

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!

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...

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...

Working on a new custom select demo ...

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.

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...

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

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...

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

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-...

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/...

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/...

There goes my bracket! Some big upsets in todays round of #madCSS

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/...

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...

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

CSS Daily 2026-03-07 Score: 73% | Time: 10:02 Such fun! Hopefully with practice I can improve on that percentage! cssdaily.dev