Tech Tests
A new CSS feature comes out? An idea stuck in my head? A new challenge accepted? I got to try it out!
Animated 3D reflective cards
HTML/CSS/JS cards rotating when hovered in 3D space with animated reflections (with surface imperfections).
HTML/CSS3D Cube
A 3D cube animation made with CSS and HTML using the `transform` property and `perspective` and `perspective-origin` properties in order to create a 3D effect.
HTML/CSSAnimated SVG Gradient Path
An animated path progressively fading out, made by animating circles of various opacities along an SVG path.
SVGAnimated Text Mask
Experimenting with masked text and animations
HTML/CSSBackground Blur Mask Cursor
An HTML/CSS/JS custom cursor unmasking a blurred background using the CSS mask-image property.
HTML/CSSCSS Halftone Pattern
An image halftone pattern done only with CSS
HTML/CSSCSS-only Carousel
A CSS-only carousel using scroll snap, scroll buttons, scroll markers, and other new CSS features. Make sure to test it in the latest Google Chrome version.
HTML/CSSHTML/CSS-only Popover
An HTML-only popover using anchor-positioning, @position-try and allow-discrete animation.
HTML/CSSSroll-driven carousel
An animated carousel that is both animated while scrolling and on its own.
HTML/CSSAnimated SVG Blob
An animated SVG blob made by altering the `d` attribute of a path element.
SVG:user-(in)valid From
An HTML/CSS-only form showing valid and invalid fields using the CSS :user-valid and :user-invalid pseudo-class.
HTML/CSSView Transition Cards
A cards carousel using the view transition API to animate when altering the DOM.
HTML/CSS