A collection of techniques that need no JavaScript at all — just CSS. They load instantly, add nothing to your bundle, and stay accessible by default. Each one links to a full tutorial with the complete code and a live demo.
Navigation
Click instead of hover: a CSS-only “clicky” menu
A dropdown menu that opens on click rather than hover — better on touch devices and friendlier for accessibility — with zero JavaScript. The whole trick is reusing :focus and :active to reveal the submenu: nav ul li:focus > ul { display: inherit; }. Read the full menu →
Double off-canvas menus with CSS only
Two slide-in panels — one from each edge — driven entirely by the checkbox hack and CSS transforms, no scripting. Useful when you want a left navigation drawer and a right cart/filter panel on the same page. Read the full tutorial →
Galleries & layout
Fast, accessible CSS-only logo carousel
An infinitely-scrolling client/logo strip that keeps Google’s CLS score in check and loads instantly, because it’s pure CSS animation. Two opposite-direction tracks (@keyframes scroll-l / scroll-r) over a duplicated set of logos, with linear-gradient masks on the edges for a clean fade. Works with JPEG, PNG, SVG, WebP and GIF. Read the full carousel →
Grid gallery with modern CSS
A responsive image gallery built with Flexbox (and CSS Grid) — no masonry library, no layout JavaScript. The full tutorial walks through the layout properties and the responsive breakpoints. Read the full tutorial →
Pricing table matrix in HTML & CSS
A clean, responsive pricing/comparison matrix using only HTML and CSS — the kind of thing plugins and page builders bloat heavily. Read the full tutorial →
Cross-browser CSS object-fit
Crop and fit images to a fixed box with object-fit — including a cross-browser fallback — without a single line of JavaScript. Read the full tutorial →
Deep dive into CSS Grid
A thorough, CSS-only walkthrough of CSS Grid layout — tracks, areas and responsive patterns — for building page layouts without a framework. Read the full tutorial →
Visual effects
Rounded-corner gradient border
A gradient border that actually respects border-radius — the case that trips most people up, since a plain border-image ignores rounded corners. The tutorial shows the technique on images and boxes. Read the full tutorial →
Typography
Moving to a system font stack
Drop web-font downloads entirely and render in the visitor’s native UI font — faster, and it looks right on every platform. The stack is a single CSS variable starting --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", … with discretionary ligatures enabled. Read the full write-up →
“Times New Roman” enhanced CSS font stack
A serif counterpart — an enhanced Times New Roman stack with historical ligatures, for when you want a classic editorial feel without loading a web font. Read the full write-up →