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

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

Chris Bolson @cbolson.bsky.social · 10/06/2026

I have made some adjustments to the code, mostly regarding hovering or focusing on the options within each <optgroup>. Whilst possibly the simplest, I think that this is actually one of my favorite custom select demos so far.

000

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

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

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

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

Chris Bolson @cbolson.bsky.social · 17/02/2026

This is on iPhone 12 running iOS 18.5

010

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

Chris Bolson @cbolson.bsky.social · 11/02/2026

Barrier-grid (picket fence) animation using animation-timeline: scroll to drive a striped gradient over the image. Your scroll speed controls the motion — the faster you scroll, the faster it moves. See the demo on @codepen.io codepen.io/cbolson/pen/...

120

Chris Bolson @cbolson.bsky.social · 09/02/2026

What if your <select> options styled themselves? Exploring custom select UIs with appearance: base-select, attr(), and modern CSS — dynamically styling options to match their underlying values. See the demo on @codepen.io codepen.io/cbolson/pen/...

150

Chris Bolson @cbolson.bsky.social · 07/02/2026

Using appearance: base-select and attr() to create an interactive diameter selector from a normal select list. See the demo on @codepen.io codepen.io/cbolson/pen/...

021

Chris Bolson @cbolson.bsky.social · 05/02/2026

None here either Version 18.6 (20621.3.11.11.3) On Mac

010

Chris Bolson @cbolson.bsky.social · 04/02/2026

An Inverted radius tabs demo which uses anchor-positioning + corner-shape + :target #cssonly See the full demo on @codepen.io codepen.io/cbolson/pen/...

061

Chris Bolson @cbolson.bsky.social · 29/01/2026

Linked lists using anchor-positioning. Adapted from my JS version which used SVG paths to this version which positions pseudo elements using position-anchor to link them to the checked checkbox items and current selected radio button. See the full demo on @codepen.io codepen.io/cbolson/pen/...

2819

Chris Bolson @cbolson.bsky.social · 27/01/2026

A bouncing ball using CSS anchor-positioning and a simple rotate and resize animation on the anchor. See the demo on #codepen codepen.io/cbolson/pen/...

0101

Chris Bolson @cbolson.bsky.social · 17/01/2026

Another animation-timeline descrambling pen. See the demo on #codepen (link in first comment)

100

Chris Bolson @cbolson.bsky.social · 09/01/2026

Descrambling text using rotation and animation-timeline. Pure CSS with no JS. Link to demo in first comment. #codepen #cssonly

151

Chris Bolson @cbolson.bsky.social · 02/01/2026

An experiment using CSS position-anchor to create a hover before&after image slider. Link to the #codepen in the first comment.

120

Chris Bolson @cbolson.bsky.social · 26/12/2025

A roundup of my pens created in 2025 which have received the most love throughout the year. #codepen, #2025rewind

100

Chris Bolson @cbolson.bsky.social · 11/12/2025

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)

110

Chris Bolson @cbolson.bsky.social · 18/11/2025

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

060

Chris Bolson @cbolson.bsky.social · 15/11/2025

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.

080

Chris Bolson @cbolson.bsky.social · 04/11/2025

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.

100

Chris Bolson @cbolson.bsky.social · 28/10/2025

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

020

Chris Bolson @cbolson.bsky.social · 04/10/2025

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

010

Chris Bolson @cbolson.bsky.social · 12/09/2025

{⚔️} Day 166 of #CSSBattleDaily I had a bit of fun with todays daily target 😂 cssbattle.dev/play/S777cDY... #CSSBattleChallenge via @cssbattle.dev

031

Chris Bolson @cbolson.bsky.social · 02/09/2025

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

110

Chris Bolson @cbolson.bsky.social · 25/08/2025

Using the CSS attr() function to define grid areas via data attributes. See the code on #codepen codepen.io/cbolson/pen/...

010

Chris Bolson @cbolson.bsky.social · 23/08/2025

A digital countdown using styled range sliders. Not very useful but fun to create. See the full demo on #codepen codepen.io/cbolson/pen/...

010

Chris Bolson @cbolson.bsky.social · 21/08/2025

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

070

Chris Bolson @cbolson.bsky.social · 20/08/2025

A modern Scrollspy using scroll-target-group and :target-current See the demo on @codepen.io ! codepen.io/cbolson/pen/... #CodePen #CSS

020

Chris Bolson @cbolson.bsky.social · 15/08/2025

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

020