← All ConceptsVol.1
CSS Pushed

Volume 2

What happens when
you push it?

Volume 1 showed the basics. This one pushes every feature to its creative limits and adds the capabilities we skipped: color-mix, view transitions, anchor positioning, cascade layers, CSS nesting, and discrete animations.

Scroll to begin
01

oklch() Pushed

Animated hue. Generative everything.

What if your whole UI slowly shifts hue over time? Or you derive shadows, borders, glows, and gradients — all from one number?

0°

Gradient Card

Hue offset: +0°

Complement Card

Hue offset: +180°

Triadic Card

Hue offset: +120°

Hit "Animate hue" and watch three cards cycle through the entire color spectrum in harmony. Backgrounds, borders, shadows, progress bars, icons — all derived from one rotating number. Imagine a SaaS product that shifts personality per brand. Or a dashboard whose accent slowly breathes.
02

color-mix()

Blend any two colors. In CSS. Natively.

Blend two colors at any ratio without Sass, without JavaScript, without design tokens. Create hover states, disabled states, overlays — all derived live.

+
=

color-mix(in oklch, pink 50%, teal 50%)

Practical: derive states from one color

Default
Hover (mix with white 20%)
Active (mix with black 20%)
Disabled (mix with gray 60%)
Drag the slider to crossfade between pink and teal in perceptual color space. On the right: hover, active, and disabled states all derived from one base color using color-mix. No Sass functions. No JavaScript. No design tokens. The browser computes it live.
03

@starting-style Extremes

Eight transition types. Pure CSS.

Volume 1 showed a simple fade-up. But @starting-style supports any transition — spring, elastic, flip, morph, blur. Each card below uses a different entry animation, all CSS-only.

Click "Show All" and watch eight different entry animations fire simultaneously — fade, pop, rotate, slide, elastic bounce, blur, flip, and shape morph. Then hide and show individual ones. Every single one is a CSS transition with @starting-style. No animation library touched this.
04

Scroll-Driven Pushed

3D rotation, morphing, orchestration.

Beyond simple reveals — what if scroll drives 3D perspective shifts, shape morphing, staggered orchestration, and clip-path reveals?

3D Perspective Rotation (scroll-linked)

Analytics

Rotates from -25° to 0° as you scroll into view

Workforce

Rotates from -25° to 0° as you scroll into view

Knowledge

Rotates from -25° to 0° as you scroll into view

Shape + Color Morph (scroll-linked)

Clip-path horizontal reveal (scroll-linked)

This sentence reveals left-to-right as you scroll.

Using clip-path: inset() animated by scroll position. No JavaScript.

Skew entrance (staggered)

Plan interventions

Track skill progress

Measure real outcomes

Close capability gaps

Scroll slowly through this section. Cards rotate in 3D perspective. A rectangle morphs from sharp pink to round teal to square blue. A sentence reveals via clip-path. List items skew in with staggered delays. All scroll-driven. All CSS. All running on the GPU compositor thread.
05

:has() State Machine

Combinatorial styling. No JavaScript.

What if the parent reacts not just to one child state, but to combinations of states? Pure CSS checkboxes drive a visual state machine — each combination produces a unique appearance.

State: Idle
Toggle different combinations. A alone gives teal glow. A+B shifts to pink with a purple background. All three creates a golden gradient with rounded corners and an ambient glow. Seven visual states from three checkboxes. The CSS uses chained :has() selectors — no JS computes the visual output.
06

Discrete Animations

Animate display:none. The impossible.

CSS could never animate display: none to display: block. Now it can. Combined with @starting-style, you get CSS-only modals with real entry/exit animations — no React portal hacks, no animation libraries.

/* The magic line */ transition: opacity 0.3s, display 0.3s allow-discrete, overlay 0.3s allow-discrete; /* Entry state */ @starting-style { .backdrop { opacity: 0; } .modal { transform: translateY(30px) scale(0.9); } }
Click the button. The backdrop blurs and fades in. The modal scales up with a spring. Click outside to dismiss — it fades out smoothly. The element actually goes to display:none when closed. transition-behavior: allow-discrete makes the impossible possible.

CSS-Only Modal

No React portals needed

This modal has a blurred backdrop, spring-in animation, and smooth exit — all handled by CSS transitions with allow-discrete and @starting-style. Click outside to close.

07-09

Three More Powers

Nesting, layers, anchor positioning.

CSS Nesting

Native Sass-like nesting. No preprocessor. No build step.

.card { background: black; & .title { font-size: 18px; } &:hover { scale: 1.02; & .title { color: teal; } } }

Cascade Layers

Explicit specificity control. Eliminates !important wars forever.

/* Declare layer order */ @layer reset, base, components, utilities; /* Tailwind goes here */ @layer utilities { .text-red { color: red; } } /* Your code always wins */ @layer components { .btn { color: teal; } }

Anchor Positioning

Tooltips and popovers that follow elements. Replaces Floating UI / Popper.

.trigger { anchor-name: --btn; } .tooltip { position-anchor: --btn; top: anchor(bottom); left: anchor(center); }
CSS Nesting eliminates preprocessors. Cascade Layers end specificity wars (put Tailwind in a layer, your code always wins). Anchor Positioning replaces Popper/Floating UI for tooltips — the browser handles positioning. All shipping in browsers today.

End of Volume 2

The gap between
possible and shipped
has never been wider.

Everything on this page runs in the browser today. No polyfills. No libraries. No build complexity. The tools are waiting. The question is not what CSS can do — it is what you will do with it.

← Volume 1All Concepts