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

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

codepen.io

The best headline of the day!

shauna@goldengateblond.bsky.social · 2w ago

is there a pulitzer for photo captions because if so @theguardian.com just won it

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

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

codepen.io

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

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

codepen.io

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

CSS by T. Afif@css-only.dev · last mo.

📝 New CSS Article! I did a quick exploration of the new "Gap Decorations" thing, and I ended up doing a lot of fancy stuff except for decorating the gaps 😅 master.dev/blog/lets-pl... Read my latest article to learn a lot of nice tricks around this feature.

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!

10 Cool CodePen demos

10 Cool CodePen demos from May 2026

alvaromontoro.com

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.

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

developer.apple.com

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!

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

⚽ 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

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.

Álvaro Montoro@alvaromontoro.com · 3mo ago

10 Cool CodePen Demos – April 2026 alvaromontoro.com/10-cool-code... CSS Art (lots of CSS Art!), accordions, scroll-driven animations, components, JS games... and more! #css #html #javascript #webdev

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

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

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

codepen.io

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 (March 2026)

YouTube video by Alvaro Montoro

youtube.com

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

10 Cool CodePen demos

10 Cool CodePen demos from March 2026

alvaromontoro.com

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

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

CSS Demystified - a course by Kevin Powell

Start writing CSS with confidence.

thecascade.dev

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

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

codepen.io