27 Patterns
Before & After

Interactive demos showing the small details that separate functional interfaces from polished ones. Click any pattern to see it full-screen.

Engineering Tips

text-wrap: balance

One CSS property that distributes text evenly across lines, eliminating that awkward short last line on headings.

→

text-wrap: pretty

Prevents orphaned single words on the last line of paragraphs. The browser adjusts line breaks to ensure at least two words on the final line.

→

font-variant-numeric: tabular-nums

Gives every digit the same width. Essential for prices, timers, and counters — prevents the layout shifts that make UI feel janky.

→

Never use transition: all

transition: all catches every property change — background, shadow, border — not just the transform you intended. Specify exact properties.

→

:has() — the missing selector

Style any ancestor based on its children's state. Form labels highlight on input focus — no JavaScript, no state management, pure CSS.

→

The right cubic-bezier

Most defaults feel mushy. cubic-bezier(0.2, 0, 0, 1) starts fast and settles gently — it feels responsive and intentional.

→

Spring physics

CSS easing curves can't overshoot. Real springs have stiffness and damping — they settle naturally with bounce that feels physical.

→

color-mix()

Generate hover states, disabled tints, and background variants from a single base colour. No more manually picking 15 hex shade variants.

→

clamp() for fluid everything

One line replaces three media queries. Works for font-size, padding, gaps — anything that needs to scale smoothly between breakpoints.

→

Layered shadows

One box-shadow creates a flat halo. Three at different offsets and blur radii simulate real light and give depth that feels physical.

→

SVG line-draw animation

Set stroke-dasharray and dashoffset to the path length, then animate to zero. The path draws itself — works for icons, checkmarks, illustrations.

→

accent-color

One CSS property themes checkboxes, radios, range sliders, and progress bars to match your brand. No custom components needed for basic forms.

→

Before / After

Button press feedback

No visual response on click feels broken. A subtle scale and brightness shift on :active makes buttons feel physically responsive.

→

List: stagger animation

All items appearing at once feels flat. Staggered entries with 60ms delay per item create rhythm and guide the eye down the list.

→

Modal: pop vs spring

Modals that appear instantly feel jarring. A spring scale animation with a backdrop fade transition feels natural and grounded.

→

Tab switch: animated indicator

An indicator that jumps between tabs feels disconnected. Animating it creates a physical link between trigger and content.

→

Number change: animated

Numbers that jump from one value to another feel disconnected. Animated counting creates continuity and draws attention to the change.

→

Toggle: snap vs spring

A toggle that teleports feels mechanical. Spring overshoot on the thumb with a colour crossfade feels physical and alive.

→

Tooltip: choreographed

Tooltips that pop in feel abrupt. Enter with scale, opacity, and a subtle translateY — the exit should be softer and faster than the enter.

→

Card hover: layered response

Cards with no hover state feel static and dead. Combine translateY, shadow elevation, and a border lighten for a physical lift effect.

→

Accordion: animated

Content appearing and disappearing instantly feels like a jump cut. Animated height with a content fade creates smooth continuity.

→

Image: pop-in vs blur-up

Images appearing suddenly at full resolution feel jarring. A blurred placeholder that crossfades to the real image feels intentional.

→

Toast: slides and stacks

Notifications that just appear feel disconnected from any action. Slide in from the edge, stack subsequent toasts, auto-dismiss smoothly.

→

Checkbox: native vs crafted

Browser defaults work but lack personality. A custom checkbox with scale, colour transition, and SVG checkmark draw-on feels considered.

→

Dropdown: animated

Menus that appear at full size feel disconnected from their trigger. Scale from 0.95 with opacity and translateY from the origin point.

→

Skeleton vs blank loading

Blank space while data loads gives no indication of what's coming. Skeleton shapes that match the content layout set expectations instantly.

→

Cursor: contextual

Everything using the default cursor gives no affordance hints. Use grab for draggable, zoom-in for expandable, col-resize for resizable.

→

Seeing it is one thing. Knowing when to reach for it is another.

These patterns show you the difference good details make. The d×e course teaches you how to spot the opportunities, understand the principles, and develop the instinct to apply them in your own work — without a reference sheet.

Explore the course →View pricing

27 PatternsBefore & After