Code Playground

A collection of code examples I built to experiment with new techniques, features, and APIs. Click the ➕ to expand and see more details.

Example: Animated Button

➕ ✖ïļ
An animated button

Overview

This is an animated button built using only HTML and CSS, leveraging keyframe animations to cycle through a colour range.

Example: Custom Selects

➕ ✖ïļ

Overview

This is a custom select dropdown built using only HTML and CSS, leveraging the new ::picker pseudo-element to style the native select dropdown.

Example: Typewriter Text

➕ ✖ïļ

This is an example of typewriter text animation using CSS.

Overview

This is an example of typewriter text animation using only HTML and CSS.

Example: Popover API

➕ ✖ïļ

Overview

This demonstrates the Popover API, which lets developers create popovers natively in the browser without relying on JavaScript libraries.

Example: Scroll-based animation

Coming Soon
➕ ✖ïļ
An animated button

Overview

This is a custom select dropdown built using only HTML and CSS, leveraging the new ::picker pseudo-element to style the native select dropdown.

Example: Scroll snap/markers

Coming Soon
➕ ✖ïļ
An animated button

Overview

This is an animated button built using only HTML and CSS, leveraging keyframe animations to cycle through a colour range.

Where you can find me

I don't spend a lot of time online, but these are the four platforms I use most. LinkedIn is your best bet.