·4 min read
How to add an accessible skip link and ARIA-correct navigation
How to build a keyboard-friendly skip link with the visually-hidden-until-focus pattern, and mark up navigation correctly with aria-label and aria-current.
❯grep -rl "#css" ./posts
#css
12 posts
·4 min read
How to force dark mode with zero flash of the wrong theme
Why JavaScript-based theming causes a flash of the wrong theme on static sites, and how baking class="dark" into index.html fixes it before any JS runs.
·4 min read
How to configure Tailwind v4 inline with @theme (no config file)
Tailwind v4 moves configuration into CSS. Here's how to set up @import, a dark variant, and map OKLCH color and radius tokens with @theme inline — with no tailwind.config file at all.
·5 min read
How to respect prefers-reduced-motion without breaking your layout
Animations can make some users sick. Here's how to switch them off with prefers-reduced-motion — and the keyframe trick that keeps content visible instead of stuck at width zero.
·6 min read
How to build a CRT / terminal aesthetic with pure CSS
Recreate the old-monitor / hacker-terminal look with plain CSS: scanline overlays, a clip-path glitch effect, a blinking terminal cursor, and typewriter text — no JavaScript.
·4 min read
How to build a custom cursor with mix-blend-mode in React
Replace the mouse pointer with a glowing dot-and-ring cursor in React by mutating the DOM directly on mousemove, and invert it over any background with mix-blend-mode: difference.
·5 min read
How to build a full-page horizontal-scroll slideshow in React
Build a full-viewport horizontal slideshow in React where each section is a panel and navigation moves the whole track sideways with a single translateX on a ref.
·4 min read
How to style an Astro blog with Tailwind v4 and no config file
Tailwind v4 moves configuration out of JavaScript and into your CSS. Here's how this Astro blog wires up the Vite plugin and defines its whole design system with @theme — no tailwind.config file at all.
·4 min read
How to theme Shiki syntax highlighting in Astro
Astro highlights code with Shiki out of the box. Here's how to pick a theme like github-dark, enable line wrapping, and understand how it plays with custom code-block markup.
·3 min read
How to do a blur-in image reveal with CSS
A tiny CSS keyframe that reveals an image by animating from blurred and over-bright to sharp, with a subtle scale settle — perfect for a load-in or on-screen reveal.
·4 min read
How to build animated skill bars with pure CSS keyframes
Animate skill/progress bars from 0 to their target width using a CSS keyframe, a CSS variable for the target, cubic-bezier easing, and forwards fill-mode — driven straight from your data.
·4 min read
How to theme Mermaid when your palette uses OKLCH
Mermaid's internal color math can't parse oklch(), so passing OKLCH tokens straight in gives you washed-out defaults. Here's how I map my OKLCH design tokens to hex and feed them to mermaid.initialize.