CSS Patterns — Zero JavaScript Needed

@starting-style + a CSS transition on transform. Click "Open menu" — the whole animation is CSS, not addEventListener.

Three radio inputs, one :checked ~ selector per slide. No JavaScript, no framework, no slider library.

One checkbox, one :checked ~ selector flipping CSS custom properties. The 8 lines of JS below it are only there to remember your choice after reload.

:hover and :focus-within revealing a submenu — keyboard-accessible, no addEventListener anywhere.

Background layer moves slower than the foreground on scroll — pure CSS transform trick, no scroll-event JS.

Hover flips the card on its Y-axis via transform: rotateY() and backface-visibility — no JS class-toggling.

scroll-snap-type locks each swipe to the next slide — no carousel library, no JS.

The :target selector opens a modal from a URL fragment — a link, an anchor, no addEventListener.

The View Transitions API animates a shared element across two real page loads — click through, watch the headline morph between pages.

CSS Anchor Positioning pins a popover tooltip directly to its trigger button — zero JS position math.

A checkbox-driven accordion using grid-template-rows: 0fr → 1fr — animates to the real content height, never a guessed fixed value.

Native <details name="..."> — same name on multiple panels makes the browser close the others automatically, no JS, no checkbox hack at all.

A native <select> with fully custom-styled options and icons in Chrome/Edge/Opera — falls back to the plain native picker in Firefox/Safari, still fully functional, no JS fallback needed.

field-sizing: content makes inputs and textareas grow with what you type — no JS measuring scrollHeight.

:user-invalid/:user-valid only react after a real, trusted interaction — no red border flashing on page load like plain :invalid does.

The native <dialog> element transitions in and out of display:none via transition-behavior: allow-discrete + @starting-style.

The exact same card component reflows based on its own container's width, not the viewport — one component, no duplicate markup for narrow vs. wide placements.

A single black SVG icon, embedded three times, recolored purely via CSS filter — no three separate icon files.

A typed @property lets the browser interpolate a rotating gradient angle smoothly on hover — an untyped custom property would just jump.

A single if(media(...): ...; else: ...) line replaces two full @media blocks for the same one property.

A custom @function computes lighter/darker button colors at runtime in the browser — no SASS build-step dependency for something this simple.

animation-timeline: view() fades/slides elements in as they scroll into view — no Intersection Observer JS.

A bar at the top fills with page scroll progress via animation-timeline: scroll() — no scroll-event JS.

Edge shadows on a horizontally-scrolling row appear only while there's actually more content to scroll to — pure CSS background-attachment trick.

@container scroll-state(stuck: top) reports when a sticky header is actually pinned to the edge — used to need an IntersectionObserver hack in JS, now pure CSS.

Layered SVG wave shapes moving at slightly different speeds create a parallax header effect — no JS, no background images.

An icon rail that reveals its label on hover (mouse) or tap (touch) — one hover-target CSS pattern covers both input types.

sibling-index() computes each item's animation delay automatically — no nth-child(1..n) copy-paste, no JS setting a counter variable.

A toast fades and slides in via @starting-style — no "add class on mount" JS pattern.

A single transform declaration sweeps a fill color across the button on hover — no background-position tricks, no JS.