iiinova — where your digital self keeps evolving

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