Sticky Top
Announcement
Banner CSS
Scroll the surrounding page to see the banners remain pinned. Dismiss each one to watch the stack collapse gracefully.
"I believe the best design is invisible — it removes friction until the experience feels inevitable."
"Complex systems are just simple ones stacked with care. Every abstraction is a promise we make to the future."
"Products don't fail because of bad code. They fail because nobody bothered to understand the person on the other end."
"Typography is the voice of writing. If you can hear a typeface before you read it, the designer did their job."
Everything you need to get off the ground fast, without compromise.
For growing teams that need power, speed, and room to breathe.
Tailored scale, SLA guarantees, and white-glove onboarding for your organization.
There is a moment before speech when the world holds its breath. Architecture inhabits this pause — not the buildings themselves, but the spaces they carve from air.
The corridor narrows, draws the eye forward. Light slants from an unseen source. To walk through is to be composed by the building.
1 ITo design is to make a claim about the world as it should be — not as it is. The blueprint precedes the building, and in that gap lives everything called imagination.
2The forest does not plan its canopy. Each tree reaches for light by the same simple rule: grow toward the sun. The emergent whole is unplanned and irreducible.
3Color arrives before language. Red is felt in the chest before named by the tongue. The ancient painters knew this — their ochre hands pressed flat on cave walls were not decoration. They were declaration.
4Every designed thing must eventually end — the page turn, the last note, the exit from the building. The best designs make their endings feel inevitable, not arbitrary.
Issue VI · Printed on FSC-certified stock · Typography set in Playfair Display and EB Garamond · All rights reserved ©
6A rare Zambian amethyst, set in cold-forged 18k white gold. Each stone selected for its violet depth and natural clarity.
Limited Edition · No. 12 of 30Ceylon blue sapphire, untreated and certified. Suspended in a hand-finished platinum bezel, worn by the extraordinarily few.
Limited Edition · No. 7 of 20Burmese pigeon-blood ruby of extraordinary rarity. Each stone handpicked, individually documented, and signed by the master craftsman.
Singular Edition · No. 1 of 8A library of hand-crafted CSS components, generators and tools for developers who care about craft.
Yes — MIT licensed for personal and commercial projects, no attribution required.
No frameworks, no dependencies. Vanilla HTML, CSS and a tiny bit of JS where needed.
Add the library to your project with one command — no build step required.
Pull in only the components you need. Tree-shakable and zero runtime overhead.
Override CSS custom properties to match your brand colors and spacing scale.
Drop the snippet into any HTML page — works with any framework or none at all.
Modern evergreen browsers. Native <details> has shipped everywhere since 2020.
Override --acc-pm-accent on the parent to recolor the entire group instantly.
Under five minutes. Copy the markup, paste the styles, you're done.
Yes — MIT licensed. Use it in client work, products, anywhere.
Not yet. Designs live in code as the source of truth.
No gradients. No shadows blurred soft. Just hard rectangles, two colors, and intent.
Function leads form. Form documents function. Decoration earns its keep or it leaves.
Heavy structure ages well. Trends fade. A clear typographic system stays useful.
A frosted surface with a subtle border that catches light when the row expands.
backdrop-filter is GPU-accelerated. Use it on small islands rather than wide swaths.
The semi-transparent background still reads gracefully without the blur effect.
One sans family, three weights, two sizes. That's the whole system.
Built on an 8-point base with optional 4-point quarter-step for fine control.
Three brand tokens, four neutral steps. Override via CSS custom properties.
Wake to clear sightlines and warm light. The view is the room.
A private terrace facing south, framed by old growth and stone.
Open plan with full-height windows and a quiet corner for work.
The curtain rises slowly. Light spills across the boards.
Tension builds. The rhythm tightens. We lean forward.
Resolution arrives. The audience exhales. Lights dim.
Static-first, edge-cached, no SSR runtime. Fast on every connection.
Content lives in flat files. Authoring is git-tracked and reviewable.
Build once, push to CDN. No servers to manage, no scaling concerns.
Begin where you stand. The first move matters more than the plan.
Ship the rough version. Real feedback beats imagined feedback.
Refine. Cut what didn't earn its place. Keep the load light.
Repeat the loop. Compounding shows up after the tenth turn, not the first.
Map the problem space. Talk to users. Sketch hypotheses before committing to a build.
Pick one bet. Frame it crisply. Write down what success actually looks like.
Ship a thin slice end-to-end. Measure real usage. Decide what comes next from data.
Iterate on real signal, not imagined feedback. Compound the wins, drop what didn't earn its place.
Stop the marquee. The title settles. The body opens. Calm restored.
The opened panel doesn't animate its title. Use marquee for "more here than fits."
Marquee speed pairs nicely with hover-to-pause for accessibility on long titles.
Installs the package and resolves all peer dependencies. Adds an entry to package.json.
ES module import. Tree-shakable so unused exports won't bloat the bundle.
Side-effects after paint. Cleanup runs on unmount or before the next effect fires.
The art of folding paper into expressive form. Single sheet, no cuts, no glue.
Type pressed into thick cotton stock leaves a tactile bite that catches light.
Two staples through the fold of a folio. Quick, cheap, beautiful for short runs.
Low-end response. Felt more than heard. Anchors the mix.
The conversation register. Where vocals and lead instruments live.
Air and detail. Cymbals, breath, the sparkle of acoustic plucks.
The first card sits flush. Behind it the others fan back in scale.
Slightly smaller and pulled up. Click to bring it to the front of the stack.
The deepest in the deck. Smaller still, but always reachable.
Cool ribbon of violet to cyan, sweeping at 20 degrees. Catches light at any angle.
Warm metallic with a soft inner glow. Reads premium without going gold.
Cooler than gold, less corporate than silver. Quiet and confident.
Charged particles meet the upper atmosphere. The sky turns to ribbon.
A constant stream from the sun. Some nights it sings louder than others.
When the wind hits hard, the auroral oval expands south. Rare gift for lower latitudes.
Authentication service is temporarily unavailable.
Our engineers have identified the issue and are working to restore access. Estimated resolution in 12–18 minutes. Existing sessions remain active.
Scheduled maintenance window this Friday.
The platform will undergo routine updates between 02:00–04:00 UTC. Some features may be temporarily inaccessible. No data loss is expected.
Your identity has been successfully verified.
Two-factor authentication is now active on your account. You can manage your security preferences from the account dashboard.
New privacy policy takes effect July 1st.
We've updated our terms of service to reflect recent regulatory changes. Please review the updated document before the effective date to remain compliant.
Scroll the surrounding page to see the banners remain pinned. Dismiss each one to watch the stack collapse gracefully.
— Status Indicators —
The consent banner appears from the bottom of the demo on load. Use Accept All or Decline Non-Essential to dismiss.
align-items: flex-start keeps the icon sharp at the top of wrapping text. Each card has action buttons + a dismiss × that exits with a smooth slide-and-collapse animation. Nunito + Fira Code. Best for product apps, customer dashboards, friendly admin panels, toast precursor cards.
**HTML:**
```html
scaleX as the auto-dismiss timer runs. Includes 6 trigger types: Success, Error, Warning, Info, Default, and a Promise (async) variant that morphs mid-flight into a success state after resolution. Plus Jakarta Sans + JetBrains Mono. Best for SaaS dashboards, web-app feedback, async operations confirmation, modern notification systems.
**HTML:**
```html
--c drives every colour state. Two densities ship side-by-side: a full-message card (Success / Error / Warning / Info / Note variants with type label, decorative rule, body text, and an arrowed link) and a compact one-liner card (ok / fail / warn / info / note / new with mini type badge + divider + short inline message). Fraunces + Geist Mono. Best for documentation sites, technical wikis, developer changelogs, API status pages.
**HTML:**
```html
pg-primary.cluster.internal:5432. Check that your DB is accepting connections and firewall rules permit access from this host.client.legacyAuth() which will be removed in v4.0. Migrate to client.auth.verify() before the next major release.ai-suggest beta. Behaviour may change without notice between releases.Accept: text/event-stream.transform: skewX(-12deg) badge with red 40% OFF promo, a clip-path: polygon() angled purple fill on a New Feature card, a repeating-linear-gradient hazard-stripe system warning in amber, and a crisp linear-gradient(108deg) dark/yellow split with a live countdown timer (hours / minutes / seconds). Anton display + Rajdhani body. Best for promo banners, sale announcements, dev-tool warnings, attention-grabbing CTAs.
**HTML:**
```html
clamp() for fluid typography throughout so no media queries are needed for type scaling. Each hero stacks gracefully to mobile. Unbounded + Outfit. Best for marketing landing pages, product launches, agency homepages, brand hero sections.
**HTML:**
```html
The platform that scales from prototype to production without the complexity. One workflow, infinite possibilities.
Thoughtfully designed pieces crafted from sustainable materials. Limited run — once they're gone, they're gone.
A zero-dependency CSS utility library with a 4 KB footprint. No build step. No configuration. Just drop it in and go.
@property --angle conic-gradient spinning border with blurred glow bloom (Premium plan upgrade), a background-position shifting linear gradient for maximum browser support (AI-Powered suggestions card), and an SVG stroke-dashoffset animation driven by ResizeObserver (v6.0 New Release card). Each card has a badge + title + body + dual-action footer. Space Grotesk + Space Mono. Best for web3 sites, AI / ML products, premium upgrade prompts, web3 dashboards.
**HTML:**
```html
color-mix(), pill-shaped buttons with transparent ::after ripple overlay, coloured top strip for semantic indication, and a full semantic set (Error / Success / Warning / Info / Primary). Plus a dark Snackbar variant with an Undo action. DM Sans + Roboto Mono. Best for Material You apps, Android-inspired web UIs, Material 3 design systems, mobile-first web apps.
**HTML:**
```html
white-space: nowrap) vs fixed (overflow-wrap: break-word applied) vs scrollable alternatives. The actual CSS rules are displayed in a syntax-highlighted code block inside the demo itself — copy-paste ready. Tests against real-world strings: long URLs, stack-trace paths, env values, JWT tokens. JetBrains Mono + Sora. Best for developer documentation, status pages, error log UIs, terminal-style displays.
**HTML:**
```html
Design is not just what it looks like and feels like. Design is how it works.
SHIP IT. THE DOCS CAN COME LATER.
The best UI is the one you don't notice.
Optimize for joy. The metrics will follow.
"Every line of code you don't write is a line of code that can't break."
Codefronts cut my prototype time in half. Just snippets that work.
Constraints don't kill creativity — they sharpen it.
"The component library I wished existed for years. Just works."
Most teams optimize for shipping faster when they should be optimizing for
shipping smaller.
Make the change easy first, then make the easy change.
"You can have the best engine in the world, but without a chassis it's just noise."
"Beauty in software is honesty rendered visible."
I would rather read codefronts than write CSS from scratch in 2026, and that's a hill I'm willing to die on.
Software is a love letter to the future, written in the dialect of the present. Each abstraction we choose narrows what tomorrow can say.
// Don't write code that's so clever
// that you can't debug it at 3am
> The best abstractions are the ones you don't notice.
> The worst are the ones you can't avoid.
NOTES.md"It saves me hours every week."
"Finally, snippets that don't fight my stack."
"My team's dashboard ships twice as fast."
"Premature optimization is the root of all evil."
| Status | Event | Node | Impact | Time |
|---|---|---|---|---|
| CRIT | Mem overload | node-03 | HIGH | 09:31 |
| WARN | Queue spike | zone-b | MED | 09:38 |
| WARN | I/O throttle | disk-07 | MED | 09:52 |
| OK | Auto-scale | cluster-a | LOW | 10:01 |
| OK | Cert renewal | *.api | — | 09:14 |
Drop-in auth for indie hackers. Works in 4 lines of code.
No Stripe webhooks. No AWS config hell. No SLA anxiety.
Just ship the damn thing.
|
👁 Visitors:
0
0
4
2
1
6
7
since Jan 1999
|
★ ABOUT ME ★
Hey!! My name is Kira and welcome 2 my totally awesome webpage!!
I am 16 from Portland Oregon and i luv The Smashing Pumpkins,
anime, HTML coding and my cat Mittens 🐱
This page was made with Notepad!! NO FRONTPAGE here lol. If u steal my code ur a JERK!! 🤬 Sign my Guestbook or i'll be sooo sad 😢 💬 POLL: whats ur fav winamp skin?
🎵 My Top Songs RIGHT NOW:
|
When every platform optimises for engagement above all else, the resulting content becomes a mirror — reflecting not what we think, but what we feel compelled to click. And we are running out of things to say.
There is a particular kind of essay that dominates the internet right now. It begins with a hook — a surprising statistic, a confessional sentence, a rhetorical question — and then proceeds to build, paragraph by paragraph, toward a conclusion that the reader suspected before they began. The form is optimised not for insight but for the sensation of insight. The click is the product. The reading is incidental.1
This is not an accident. The platforms that host most of our public writing have spent fifteen years tuning their recommendation algorithms toward a single metric: time-on-site. Attention, captured and held, is the commodity being traded. What we call "content" is, in economic terms, a vehicle for delivering human attention to advertisers — and content that fails to capture attention is content that does not exist.
"The algorithm does not reward being right. It rewards being interesting — and these two things are increasingly, catastrophically at odds."
— Marcus Osei, Issue 47
The problem is not simply that bad ideas spread. The problem is structural: when engagement is the metric, every writer faces a quiet, persistent pressure to make their work more engaging. Over time, this shapes not just tone but thought. You begin to notice which sentences make readers stop scrolling, and which do not. You begin to write more sentences that make readers stop scrolling. Before long, stopping the scroll becomes the thing the sentences are for.
The newsletter was supposed to fix this. Send your writing directly to readers who asked for it; no algorithm to appease, no feed to optimise for. And for a while, it did. But as newsletters multiplied, readers developed what one writer called "inbox fatigue" — the same exhaustion, the same half-reading, the same reach for the delete key. The medium changes; the attention problem does not.2
The writers who have found something durable are, almost without exception, those who have made peace with being slow. They publish infrequently. They write long. They refuse to have opinions about things that happened in the last forty-eight hours. They treat their readers as people with enough time to think — which is, paradoxically, what makes their readers make time to think.
An award-winning interactive site. Background, type, and badge each ride their own depth plane.
STAKED BALANCE
48.20 Ξ
Self-custody vault with live yield. The neon edge ignites and follows your cursor around the glass.
Hand-thrown stoneware
Matte terracotta with a subtle asymmetric lip. Each piece is wheel-thrown and one of a kind.
View ProductInstall the SDK, authenticate, and ship your first request. The card lifts gently off the page as you focus it.
Read the guide →Slow-roasted single origin beans with notes of burnt caramel and stone fruit.
A serverless mesh that traces a live circuit around every active deployment region.
Limited run pressing. Three layers of risograph artwork fan out across the gatefold sleeve.
A foil-stamped collector card that catches light across the full spectrum.
An evening of chamber music and candlelight. Doors open at eight.
Peel the corner to uncover this week's hidden subscriber discount on farm-fresh produce.
cocktail bar
Hover to light the sign. Hand-bent tubes, mezcal flights, and a back room you have to ask about.
Cold-storage terminal for archival data. Phosphor-green display, zero network exposure.
A guided dawn trek through layered ridgelines. Move your cursor to feel the depth.
A design system built on restraint. The light follows you because attention should follow intent.
— READ THE ESSAYFloat-foam midsole and an iridescent upper that shifts as it turns in the light.
$189Walled-city rooftops, fruit carts at dusk, and where to find the best ceviche after dark.
READ STORY →Same card, two faces. A full 180° rotation reveals account details on the reverse.
··· 309A cyberpunk audio-visual set. Corrupted frames, datamoshed visuals, bass you feel in your teeth.
FRI · WAREHOUSE 7 · 23:00Generate, remix, and color-grade in one canvas. The aura rotates while the engine warms up.
→ START FREE TRIALA meditation app that breathes with you. Shapes soften and settle as you exhale.
Drag your cursor near the orb — it leans toward you like it's caught in your field.
They said the river had no end —
so I followed it anyway.
Forty pages on color, courage, and the people painting cities awake.
Read the issue →A scanned film transfer. Hover and the grain breathes, like light running through celluloid.
A glass widget over a living wallpaper. Hover and the frost thickens, melting the color behind it.
Hand-blown matte ceramic lamp.
Ø 130mm · cord 1.8m
E27 · 2700K · matte glaze
TOL ±0.5mm
Every interaction sends a wave outward. Hover anywhere — the ripple starts where you enter.
Discharge ⚡Sixteen hours over post oak. Hover to bring the coals back to life.
A coated-glass installation. Light enters white and leaves as a spectrum sweeping the wall.
"I had not meant to stay the winter. But the house, you understand, had other plans..."
— 1 —Seven nights in Tromsø under the polar sky. Glass-roof cabins, dog sleds, and the slow green fire overhead.
Frosted glass with backdrop blur and layered gradient glows.
Gradient border reveals on hover using pseudo-element z-index trick.
3D card flip effect →
Revealed with CSS 3D perspective
Conic-gradient border spins continuously using CSS animation.
Live animationMove your mouse over me to see the 3D tilt effect.
Mouse-trackedCursor light follows your mouse around the card surface.
Pseudo-elements create layered paper cards that fan out on hover.
Content slides up from the bottom replacing the image
border-radius morphs into a completely different blob on hover
Raw edges, hard shadows, zero subtlety. Hover to shift the shadow.
Soft extrusion from the surface. Hover to push it inward.
@alex started following you
Production deploy successful
CPU usage exceeded 90%
display: flex; align-items: center; justify-content: center on the parent. CSS Grid (one-line shorthand): display: grid; place-items: center. Absolute positioning + transform (for overlays and modals): position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%). Margin auto (for block elements with a known width): margin: 0 auto (horizontal only) or margin: auto with position: absolute + inset: 0 (both axes). All methods side-by-side comparison — see every technique render the same content with visible axis crosshairs so you can see exactly where each method lands the element. All 5 demos are 100% pure CSS, MIT-licensed, copy-paste ready, with detailed explanations of which method to use when. Works in every modern browser (Chrome, Safari, Firefox, Edge), no JavaScript required.
Demo count: 5
### 01. CSS Flexbox Center a Div
**Type:** Pure CSS
**Description:** Three flex centering patterns showing how display:flex with align-items and justify-content centers a div both horizontally and vertically, as a row, and as a stacked column.
**HTML:**
```html
Three flex centering patterns — single element, row of cards, and column stack
Three grid centering techniques — place-items, named template areas, and auto margins
Classic centering via position:absolute — translate trick, inset auto, and calc variants
Horizontal centering via margin auto, logical properties, and max-width content blocks
Flexbox, Grid, Absolute, Table-cell, and Writing-mode — every technique side by side
display:flex; align-items:center; justify-content:center
display:grid; place-items:center
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)
display:table-cell; vertical-align:middle; text-align:center
writing-mode → inline-block child → reset writing-mode
pill styling, neumorphic embedded, split-pane code plus live preview, and a pure-CSS expandable wrapper. Accessible, mobile-first, scoped per-demo classes, MIT-licensed.
Demo count: 12
### 01. Minimalist Dark Mode Code Box
**Type:** Pure CSS
**Description:** A clean, high-contrast dark code container on a deep navy gradient with a glowing left-accent border, JetBrains Mono type, subtle line numbers, and a muted meta bar carrying a colored language tag. Best for documentation hero blocks, blog post code samples, marketing pages, and any dark-themed dev site that needs a single focal code reference.
**HTML:**
```html
1// resolve an active session token
2export async function getSession(id: string) {
3 const token = await cache.read(`sess:${id}`);
4 if (!token) return null;
5 return { id, token, ttl: 3600 };
6}
```
**CSS:**
```css
/* ─── 01 Minimalist Dark Mode Code Box ──────── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Sora:wght@400;600;800&display=swap');
.ccb-mdm {
--ccb-mdm-bg: #0b0f1a;
--ccb-mdm-panel: #0f172a;
--ccb-mdm-panel-2: #111a30;
--ccb-mdm-ink: #e2e8f0;
--ccb-mdm-muted: #64748b;
--ccb-mdm-accent: #38bdf8;
--ccb-mdm-line: rgba(148,163,184,.08);
width: 100%;
min-height: 320px;
display: flex; align-items: center; justify-content: center;
background:
radial-gradient(900px 500px at 85% -10%, rgba(56,189,248,.10), transparent 60%),
radial-gradient(700px 400px at 0% 110%, rgba(129,140,248,.08), transparent 55%),
var(--ccb-mdm-bg);
color: var(--ccb-mdm-ink);
font-family: 'Sora', sans-serif;
padding: 36px 22px;
box-sizing: border-box;
}
.ccb-mdm *, .ccb-mdm *::before, .ccb-mdm *::after { box-sizing: border-box; }
.ccb-mdm__card {
position: relative;
width: 100%; max-width: 620px;
background: linear-gradient(180deg, var(--ccb-mdm-panel), var(--ccb-mdm-panel-2));
border: 1px solid var(--ccb-mdm-line);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.03);
}
.ccb-mdm__card::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: linear-gradient(180deg, var(--ccb-mdm-accent), #818cf8);
box-shadow: 0 0 24px rgba(56,189,248,.6);
}
.ccb-mdm__meta {
display: flex; align-items: center; gap: 10px;
padding: 14px 22px 12px 24px;
border-bottom: 1px solid var(--ccb-mdm-line);
font-family: 'JetBrains Mono', monospace;
font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
color: var(--ccb-mdm-muted);
}
.ccb-mdm__dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--ccb-mdm-accent);
box-shadow: 0 0 10px var(--ccb-mdm-accent);
}
.ccb-mdm__lang { margin-left: auto; color: var(--ccb-mdm-accent); font-weight: 700; }
.ccb-mdm__pre {
margin: 0; padding: 20px 24px 24px;
font-family: 'JetBrains Mono', monospace;
font-size: 13.5px; line-height: 1.85;
overflow-x: auto;
color: #cbd5e1;
}
.ccb-mdm__pre code { display: block; white-space: pre; }
.ccb-mdm__ln { color: #334155; user-select: none; display: inline-block; width: 2.2em; text-align: right; margin-right: 1.4em; }
.ccb-mdm__k { color: #c084fc; }
.ccb-mdm__f { color: #38bdf8; }
.ccb-mdm__s { color: #34d399; }
.ccb-mdm__c { color: #475569; font-style: italic; }
.ccb-mdm__n { color: #fbbf24; }
.ccb-mdm__pre::-webkit-scrollbar { height: 8px; }
.ccb-mdm__pre::-webkit-scrollbar-thumb { background: rgba(148,163,184,.2); border-radius: 8px; }
```
### 02. Mac-Style Window Container
**Type:** Pure CSS
**Description:** A floating macOS-style window with the canonical red / yellow / green traffic-light controls and a filename in the title bar, sitting on a soft pastel gradient with a 3D tilt that straightens on hover. Best for product hero sections, landing-page demos, slide thumbnails, and any place a code sample needs to feel like a real app surface instead of a flat block.
**HTML:**
```html
// floating window component
import { useState } from 'react';
export default function App() {
const [open, setOpen] = useState(true);
return open && <Panel title="Terminal" />;
}
```
**CSS:**
```css
/* ─── 02 Mac-Style Window Container ──────── */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Outfit:wght@400;600;700&display=swap');
.ccb-mac {
width: 100%;
min-height: 320px;
font-family: 'Outfit', sans-serif;
background: linear-gradient(135deg, #fbe6c8 0%, #f5b1b1 35%, #c7a6f0 70%, #9ad7f0 100%);
display: flex; align-items: center; justify-content: center;
padding: 40px 24px;
box-sizing: border-box;
}
.ccb-mac *, .ccb-mac *::before, .ccb-mac *::after { box-sizing: border-box; }
.ccb-mac__scene { width: 100%; max-width: 600px; perspective: 1600px; }
.ccb-mac__window {
background: #1d1f27;
border-radius: 14px;
overflow: hidden;
box-shadow:
0 2px 0 rgba(255,255,255,.06) inset,
0 40px 70px -24px rgba(76,29,99,.55),
0 12px 24px -12px rgba(0,0,0,.45);
transform: rotateX(6deg) rotateZ(-.4deg);
transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.ccb-mac__window:hover { transform: rotateX(0deg) rotateZ(0deg) translateY(-4px); }
.ccb-mac__titlebar {
display: flex; align-items: center; gap: 8px;
height: 42px; padding: 0 16px;
background: linear-gradient(180deg, #33363f, #282b33);
border-bottom: 1px solid rgba(0,0,0,.4);
}
.ccb-mac__traffic { display: flex; gap: 9px; }
.ccb-mac__traffic span {
width: 13px; height: 13px; border-radius: 50%;
box-shadow: inset 0 1px 1px rgba(255,255,255,.4);
}
.ccb-mac__red { background: #ff5f57; }
.ccb-mac__yellow { background: #febc2e; }
.ccb-mac__green { background: #28c840; }
.ccb-mac__filename {
margin: 0 auto;
font-family: 'Fira Code', monospace;
font-size: 13px; color: #aeb3c2; letter-spacing: .02em;
display: flex; align-items: center; gap: 8px;
}
.ccb-mac__filename::before {
content: ''; width: 14px; height: 14px; border-radius: 3px;
background: linear-gradient(135deg, #61dafb, #3b82f6);
}
.ccb-mac__pre {
margin: 0; padding: 22px 24px 26px;
font-family: 'Fira Code', monospace;
font-size: 13.5px; line-height: 1.85; color: #dfe3ee;
overflow-x: auto;
background: #1d1f27;
}
.ccb-mac__k { color: #ff79c6; }
.ccb-mac__f { color: #8be9fd; }
.ccb-mac__s { color: #f1fa8c; }
.ccb-mac__c { color: #6272a4; font-style: italic; }
.ccb-mac__t { color: #bd93f9; }
.ccb-mac__pre::-webkit-scrollbar { height: 8px; }
.ccb-mac__pre::-webkit-scrollbar-thumb { background: #3a3d48; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
.ccb-mac__window { transition: none; transform: none; }
.ccb-mac__window:hover { transform: none; }
}
```
### 03. Code Block with Copy to Clipboard Button
**Type:** Light JS
**Description:** A teal-accented dark code block using position: relative on the container and position: absolute on a copy button that is hidden by default and fades in on hover, with a working navigator.clipboard.writeText action and a "Copied!" confirmation state. Best for documentation pages, package install snippets, CLI command references, and any tutorial where a one-click copy is the primary reader action.
**HTML:**
```html
# add the codefronts CLI
npm install -g @codefronts/cli
codefronts init --template "snippet"
codefronts build && codefronts deploy
```
**CSS:**
```css
/* ─── 03 Code Block with Copy to Clipboard Button ──────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;600;700&display=swap');
.ccb-cpy {
--ccb-cpy-bg: #10131a;
--ccb-cpy-panel: #171b24;
--ccb-cpy-ink: #e7ecf3;
--ccb-cpy-muted: #7b8494;
--ccb-cpy-accent: #5eead4;
--ccb-cpy-accent-2: #2dd4bf;
width: 100%;
min-height: 320px;
display: flex; align-items: center; justify-content: center;
background:
radial-gradient(800px 460px at 110% 0%, rgba(45,212,191,.12), transparent 55%),
var(--ccb-cpy-bg);
color: var(--ccb-cpy-ink);
font-family: 'Space Grotesk', sans-serif;
padding: 36px 24px;
box-sizing: border-box;
}
.ccb-cpy *, .ccb-cpy *::before, .ccb-cpy *::after { box-sizing: border-box; }
.ccb-cpy__block {
position: relative;
width: 100%; max-width: 600px;
background: var(--ccb-cpy-panel);
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px;
box-shadow: 0 24px 60px -28px rgba(0,0,0,.8);
}
.ccb-cpy__bar {
display: flex; align-items: center;
padding: 12px 18px;
border-bottom: 1px solid rgba(255,255,255,.05);
font-family: 'IBM Plex Mono', monospace;
font-size: 12.5px; color: var(--ccb-cpy-muted);
letter-spacing: .05em;
}
.ccb-cpy__badge {
margin-left: auto;
color: var(--ccb-cpy-accent);
border: 1px solid rgba(94,234,212,.3);
padding: 3px 10px; border-radius: 999px; font-size: 11px;
}
.ccb-cpy__copy {
position: absolute; top: 50px; right: 16px;
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 14px; border-radius: 9px;
background: rgba(45,212,191,.12);
color: var(--ccb-cpy-accent);
border: 1px solid rgba(94,234,212,.28);
font-family: 'IBM Plex Mono', monospace;
font-size: 12px; cursor: pointer;
opacity: 0; transform: translateY(-4px);
transition: opacity .25s ease, transform .25s ease, background .2s;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ccb-cpy__block:hover .ccb-cpy__copy,
.ccb-cpy__copy:focus-visible { opacity: 1; transform: translateY(0); }
.ccb-cpy__copy:hover { background: rgba(45,212,191,.22); }
.ccb-cpy__copy:focus-visible { outline: 2px solid var(--ccb-cpy-accent); outline-offset: 3px; }
.ccb-cpy__copy.is-done { background: var(--ccb-cpy-accent-2); color: #06231e; border-color: var(--ccb-cpy-accent-2); }
.ccb-cpy__copy svg { width: 14px; height: 14px; }
.ccb-cpy__pre {
margin: 0; padding: 22px 22px 24px;
position: relative;
font-family: 'IBM Plex Mono', monospace;
font-size: 13.5px; line-height: 1.85;
overflow-x: auto; color: #cdd6e3;
}
.ccb-cpy__k { color: #c792ea; }
.ccb-cpy__f { color: #82aaff; }
.ccb-cpy__s { color: #c3e88d; }
.ccb-cpy__c { color: #546178; font-style: italic; }
.ccb-cpy__pre::-webkit-scrollbar { height: 8px; }
.ccb-cpy__pre::-webkit-scrollbar-thumb { background: #2a2f3a; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
.ccb-cpy__copy { transition: none; }
}
```
**JS:**
```js
(() => {
const root = document.querySelector('.ccb-cpy');
if (!root) return;
const btn = root.querySelector('[data-ccb-cpy="btn"]');
const txt = root.querySelector('[data-ccb-cpy="txt"]');
const code = root.querySelector('[data-ccb-cpy="code"]');
if (!btn || !txt || !code) return;
btn.addEventListener('click', async () => {
const raw = code.innerText;
try { await navigator.clipboard.writeText(raw); } catch (e) { /* permission denied */ }
btn.classList.add('is-done');
txt.textContent = 'Copied!';
setTimeout(() => {
btn.classList.remove('is-done');
txt.textContent = 'Copy';
}, 1600);
});
})();
```
### 04. Code Container with Line Numbers and Filename Header
**Type:** Pure CSS
**Description:** A GitHub-dark inspired code container with editor-style filename tabs (index.html / styles.css) and a grid gutter that draws its line numbers from counter-increment in CSS — the numbers never get copied with the code, because they exist only as generated content in the gutter pseudo-element. Best for tutorial walk-throughs, multi-file documentation, before/after refactors, and any post where you reference specific line numbers in prose.
**HTML:**
```html
index.html
styles.css
/* card layout tokens */
.card {
display: grid;
gap: 1.25rem;
padding: clamp(1rem, 3vw, 2rem);
border-radius: 16px;
}
```
**CSS:**
```css
/* ─── 04 Code Container with Line Numbers and Filename Header ──────── */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600&family=DM+Sans:wght@400;500;700&display=swap');
.ccb-lnh {
--ccb-lnh-bg: #0d1117;
--ccb-lnh-panel: #0f141d;
--ccb-lnh-header: #161b25;
--ccb-lnh-ink: #d7dee9;
--ccb-lnh-muted: #8a93a2;
--ccb-lnh-accent: #f78166;
--ccb-lnh-gutter: #1a212d;
--ccb-lnh-gutter-ink: #4b5566;
width: 100%;
min-height: 320px;
display: flex; align-items: center; justify-content: center;
background:
radial-gradient(700px 380px at 0% 0%, rgba(247,129,102,.08), transparent 55%),
var(--ccb-lnh-bg);
color: var(--ccb-lnh-ink);
font-family: 'DM Sans', sans-serif;
padding: 36px 22px;
box-sizing: border-box;
}
.ccb-lnh *, .ccb-lnh *::before, .ccb-lnh *::after { box-sizing: border-box; }
.ccb-lnh__file {
width: 100%; max-width: 620px;
background: var(--ccb-lnh-panel);
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px; overflow: hidden;
box-shadow: 0 30px 70px -32px rgba(0,0,0,.85);
}
.ccb-lnh__tabs {
display: flex; align-items: center; gap: 2px;
background: var(--ccb-lnh-header); padding: 10px 12px 0;
border-bottom: 1px solid rgba(255,255,255,.05);
}
.ccb-lnh__tab {
font-family: 'Source Code Pro', monospace;
font-size: 12.5px;
padding: 9px 16px; border-radius: 8px 8px 0 0;
color: var(--ccb-lnh-muted);
display: flex; align-items: center; gap: 8px;
}
.ccb-lnh__tab--active {
background: var(--ccb-lnh-panel);
color: var(--ccb-lnh-ink);
border-top: 2px solid var(--ccb-lnh-accent);
}
.ccb-lnh__ico { width: 10px; height: 10px; border-radius: 2px; }
.ccb-lnh__ico--html { background: #e34c26; }
.ccb-lnh__ico--css { background: #2965f1; }
.ccb-lnh__codegrid {
counter-reset: ccblnh-line;
font-family: 'Source Code Pro', monospace;
font-size: 13.5px; line-height: 1.9;
overflow-x: auto;
}
.ccb-lnh__row { display: grid; grid-template-columns: 3.4em 1fr; }
.ccb-lnh__row::before {
counter-increment: ccblnh-line; content: counter(ccblnh-line);
color: var(--ccb-lnh-gutter-ink); background: var(--ccb-lnh-gutter);
text-align: right; padding: 0 14px 0 0;
user-select: none;
border-right: 1px solid rgba(255,255,255,.04);
}
.ccb-lnh__row code { padding: 0 18px; white-space: pre; overflow-x: auto; color: #cdd6e2; }
.ccb-lnh__pad { padding: 14px 0 18px; }
.ccb-lnh__k { color: #ff7b72; }
.ccb-lnh__f { color: #d2a8ff; }
.ccb-lnh__s { color: #a5d6ff; }
.ccb-lnh__p { color: #79c0ff; }
.ccb-lnh__c { color: #6e7681; font-style: italic; }
```
### 05. Horizontal Scroll & Word-Wrap Handling (Mobile Responsive)
**Type:** Pure CSS
**Description:** Two stacked code blocks comparing approaches: one with overflow-x: auto (clean gradient scrollbar, single line stays on one row) versus white-space: pre-wrap (graceful wrapping for long URLs and identifiers). Both capped at max-width: 100% for mobile safety. Best for documentation that shows long API endpoints, file paths, package names, or hash strings where the reader needs to choose which trade-off fits their layout.
**HTML:**
```html
overflow-x: auto scroll
// long line stays on one row → scrollbar appears
const endpoint = "https://api.codefronts.com/v2/snippets?category=css&sort=popular&limit=50&include=author";
white-space: pre-wrap wrap
// same line wraps gracefully on narrow screens
const endpoint = "https://api.codefronts.com/v2/snippets?category=css&sort=popular&limit=50&include=author";
```
**CSS:**
```css
/* ─── 05 Horizontal Scroll & Word-Wrap Handling ──────── */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600&family=Manrope:wght@400;600;800&display=swap');
.ccb-rsp {
--ccb-rsp-bg: #0e1216;
--ccb-rsp-panel: #151b21;
--ccb-rsp-ink: #e3e9ee;
--ccb-rsp-muted: #7d8893;
--ccb-rsp-accent: #fbbf24;
--ccb-rsp-line: rgba(255,255,255,.06);
width: 100%;
min-height: 360px;
display: flex; align-items: center; justify-content: center;
background:
radial-gradient(680px 400px at 100% 100%, rgba(251,191,36,.08), transparent 55%),
var(--ccb-rsp-bg);
color: var(--ccb-rsp-ink);
font-family: 'Manrope', sans-serif;
padding: 32px 22px;
box-sizing: border-box;
}
.ccb-rsp *, .ccb-rsp *::before, .ccb-rsp *::after { box-sizing: border-box; }
.ccb-rsp__wrap { width: 100%; max-width: 580px; display: grid; gap: 18px; }
.ccb-rsp__block {
background: var(--ccb-rsp-panel);
border: 1px solid var(--ccb-rsp-line);
border-radius: 14px; overflow: hidden;
box-shadow: 0 24px 56px -30px rgba(0,0,0,.8);
}
.ccb-rsp__head {
display: flex; align-items: center; gap: 10px;
padding: 11px 18px;
border-bottom: 1px solid var(--ccb-rsp-line);
font-family: 'Roboto Mono', monospace;
font-size: 12px; color: var(--ccb-rsp-muted); letter-spacing: .05em;
}
.ccb-rsp__pill {
margin-left: auto; font-size: 11px;
color: var(--ccb-rsp-accent);
border: 1px solid rgba(251,191,36,.3);
padding: 3px 10px; border-radius: 999px;
}
.ccb-rsp__pre {
margin: 0; padding: 18px 20px;
font-family: 'Roboto Mono', monospace;
font-size: 13px; line-height: 1.75;
color: #cbd5e0; max-width: 100%;
}
.ccb-rsp__scroll .ccb-rsp__pre { overflow-x: auto; white-space: pre; }
.ccb-rsp__wrapmode .ccb-rsp__pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.ccb-rsp__scroll .ccb-rsp__pre::-webkit-scrollbar { height: 9px; }
.ccb-rsp__scroll .ccb-rsp__pre::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }
.ccb-rsp__scroll .ccb-rsp__pre::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--ccb-rsp-accent), #f59e0b); border-radius: 9px; }
.ccb-rsp__k { color: #c792ea; }
.ccb-rsp__s { color: #c3e88d; }
.ccb-rsp__c { color: #5a6573; font-style: italic; }
```
### 06. Glow-Effect & Neon Tech Code Block
**Type:** Pure CSS
**Description:** A cyberpunk-style code block on a faint grid background with a frosted backdrop-filter: blur panel, neon cyan / magenta / lime borders, and a pulsing animated glow that shifts the box-shadow color between cyan and magenta on a 3.4-second loop. text-shadow syntax accents make the code itself glow. Best for hackathon landing pages, gaming or AI product hero sections, retro-futurist portfolio sites, and any place where the code block needs to feel like a sci-fi terminal readout.
**HTML:**
```html
sys.core // online
0xCF-77
// boot the grid runtime
fn main() -> Result<()> {
let grid = Grid::connect("neon://core")?;
grid.pulse(144).await;
Ok(())
}
```
**CSS:**
```css
/* ─── 06 Glow-Effect & Neon Tech Code Block ──────── */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@500;700;900&display=swap');
.ccb-neo {
--ccb-neo-cyan: #22d3ee;
--ccb-neo-magenta: #f0f;
--ccb-neo-lime: #a3ff12;
width: 100%;
min-height: 320px;
background: #05060a;
background-image:
linear-gradient(rgba(34,211,238,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(34,211,238,.05) 1px, transparent 1px),
radial-gradient(900px 500px at 50% -10%, rgba(255,0,255,.12), transparent 60%);
background-size: 42px 42px, 42px 42px, 100% 100%;
color: #e6f7ff;
font-family: 'Orbitron', sans-serif;
display: flex; align-items: center; justify-content: center;
padding: 40px 22px;
box-sizing: border-box;
}
.ccb-neo *, .ccb-neo *::before, .ccb-neo *::after { box-sizing: border-box; }
.ccb-neo__panel {
position: relative;
width: 100%; max-width: 580px;
background: rgba(8,12,20,.55);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(34,211,238,.5);
border-radius: 14px;
box-shadow:
0 0 18px rgba(34,211,238,.35),
0 0 50px rgba(34,211,238,.18),
inset 0 0 24px rgba(34,211,238,.06);
overflow: hidden;
animation: ccb-neo-pulse 3.4s ease-in-out infinite;
}
@keyframes ccb-neo-pulse {
0%, 100% {
box-shadow:
0 0 18px rgba(34,211,238,.35),
0 0 50px rgba(34,211,238,.18),
inset 0 0 24px rgba(34,211,238,.06);
}
50% {
box-shadow:
0 0 26px rgba(255,0,255,.45),
0 0 64px rgba(255,0,255,.22),
inset 0 0 28px rgba(255,0,255,.08);
}
}
.ccb-neo__scan {
display: flex; align-items: center; gap: 12px;
padding: 12px 18px;
border-bottom: 1px solid rgba(34,211,238,.25);
font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
color: var(--ccb-neo-cyan); text-shadow: 0 0 8px var(--ccb-neo-cyan);
}
.ccb-neo__blip {
width: 9px; height: 9px; border-radius: 50%;
background: var(--ccb-neo-lime);
box-shadow: 0 0 12px var(--ccb-neo-lime);
}
.ccb-neo__id {
margin-left: auto; color: var(--ccb-neo-magenta);
text-shadow: 0 0 8px var(--ccb-neo-magenta);
}
.ccb-neo__pre {
margin: 0; padding: 22px 22px 26px;
font-family: 'Share Tech Mono', monospace;
font-size: 14px; line-height: 1.95;
color: #cdfaff; overflow-x: auto;
text-shadow: 0 0 6px rgba(34,211,238,.4);
}
.ccb-neo__k { color: var(--ccb-neo-magenta); text-shadow: 0 0 8px var(--ccb-neo-magenta); }
.ccb-neo__f { color: var(--ccb-neo-cyan); text-shadow: 0 0 8px var(--ccb-neo-cyan); }
.ccb-neo__s { color: var(--ccb-neo-lime); text-shadow: 0 0 8px var(--ccb-neo-lime); }
.ccb-neo__c { color: #5b7488; text-shadow: none; font-style: italic; }
.ccb-neo__n { color: #ffb86c; text-shadow: 0 0 8px rgba(255,184,108,.6); }
.ccb-neo__pre::-webkit-scrollbar { height: 8px; }
.ccb-neo__pre::-webkit-scrollbar-thumb { background: var(--ccb-neo-cyan); border-radius: 8px; box-shadow: 0 0 10px var(--ccb-neo-cyan); }
@media (prefers-reduced-motion: reduce) {
.ccb-neo__panel { animation: none; }
}
```
### 07. Glassmorphism Code Terminal
**Type:** Pure CSS
**Description:** A frosted-glass terminal floating over a vibrant multi-color radial-gradient backdrop with blurred orbs scattered behind it. Uses backdrop-filter: blur(22px) saturate(160%) with rgba() transparency, a thin translucent white border, and layered inset highlights so the text stays legible over the busy backdrop. Best for AI product splash pages, design-tool marketing sites, summer / festival campaign chrome, and any context where the surrounding palette is louder than the code itself.
**HTML:**
```html
# spin up the dev preview
$ pnpm dev --port 3000
# ✔ ready in 412ms
$ open "http://localhost:3000"
→ watching 128 modules for changes
```
**CSS:**
```css
/* ─── 07 Glassmorphism Code Terminal ──────── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');
.ccb-gls {
position: relative;
width: 100%;
min-height: 380px;
font-family: 'Plus Jakarta Sans', sans-serif;
background:
radial-gradient(circle at 15% 20%, #ff6ec4 0%, transparent 40%),
radial-gradient(circle at 85% 30%, #7873f5 0%, transparent 45%),
radial-gradient(circle at 50% 90%, #42e695 0%, transparent 50%),
linear-gradient(135deg, #1a1c4b, #2d1b4e);
display: flex; align-items: center; justify-content: center;
padding: 40px 24px;
overflow: hidden;
box-sizing: border-box;
}
.ccb-gls *, .ccb-gls *::before, .ccb-gls *::after { box-sizing: border-box; }
/* floating orbs scoped to the wrapper, NOT body — required so
multiple gallery demos can coexist on one page */
.ccb-gls::before, .ccb-gls::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(8px);
z-index: 0;
pointer-events: none;
}
.ccb-gls::before { width: 130px; height: 130px; background: rgba(255,255,255,.18); top: 14%; right: 16%; }
.ccb-gls::after { width: 76px; height: 76px; background: rgba(66,230,149,.40); bottom: 18%; left: 14%; }
.ccb-gls__wrap { width: 100%; max-width: 580px; position: relative; z-index: 1; }
.ccb-gls__panel {
background: rgba(255,255,255,.08);
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
border: 1px solid rgba(255,255,255,.18);
border-radius: 20px;
box-shadow:
0 24px 70px -20px rgba(0,0,0,.45),
inset 0 1px 0 rgba(255,255,255,.3),
inset 0 -1px 0 rgba(255,255,255,.06);
overflow: hidden;
}
.ccb-gls__topbar {
display: flex; align-items: center; gap: 10px;
padding: 14px 20px;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.ccb-gls__dots { display: flex; gap: 8px; }
.ccb-gls__dots span {
width: 12px; height: 12px; border-radius: 50%;
background: rgba(255,255,255,.45);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.ccb-gls__label {
margin-left: auto;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; color: rgba(255,255,255,.85); letter-spacing: .06em;
}
.ccb-gls__pre {
margin: 0; padding: 22px 22px 26px;
font-family: 'JetBrains Mono', monospace;
font-size: 13.5px; line-height: 1.9;
color: #f4f4ff; overflow-x: auto;
text-shadow: 0 1px 6px rgba(0,0,0,.3);
}
.ccb-gls__k { color: #ffd6f5; }
.ccb-gls__f { color: #aef9ff; }
.ccb-gls__s { color: #d4ffb0; }
.ccb-gls__c { color: rgba(255,255,255,.5); font-style: italic; }
.ccb-gls__n { color: #ffe39a; }
.ccb-gls__pre::-webkit-scrollbar { height: 8px; }
.ccb-gls__pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 8px; }
```
### 08. Inline Code Snippet Pill Styling
**Type:** Pure CSS
**Description:** Editorial article styling on cream textured paper showing standalone <code> pills woven into serif prose — tiny 2px 8px padding, full pill border-radius: 999px, color variants (green / blue / orange), and vertical-align: middle so the line-height never breaks around them. Best for long-form technical articles, design system documentation, blog posts mixing prose and short identifiers, and any reading surface where inline code references need to feel typographically settled, not jarring.
**HTML:**
```html
When you set display: grid on a container, every direct child becomes a grid item. Use gap instead of margins to space them, and reach for minmax() when columns need to flex.
Avoid setting a fixed height on the wrapper — let the content define it. If you must clamp it, pair max-height with overflow: auto so nothing gets visually clipped without a scroll affordance.
Finally, run npm run build and confirm the line-height stays uniform — the pill should never push a line taller than its neighbors.
```
**CSS:**
```css
/* ─── 08 Inline Code Snippet Pill Styling ──────── */
@import url('https://fonts.googleapis.com/css2?family=Spline+Sans+Mono:wght@500;600&family=Newsreader:ital,opsz,wght@0,18..72,400;0,18..72,500;1,18..72,400&display=swap');
.ccb-inl {
--ccb-inl-paper: #fcfbf7;
--ccb-inl-ink: #23201c;
--ccb-inl-muted: #6b6459;
--ccb-inl-pill-bg: #eef0e8;
--ccb-inl-pill-ink: #3f6b3a;
--ccb-inl-accent: #b4532a;
width: 100%;
min-height: 360px;
background: var(--ccb-inl-paper);
background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.04) 1px, transparent 0);
background-size: 22px 22px;
color: var(--ccb-inl-ink);
font-family: 'Newsreader', Georgia, serif;
display: flex; align-items: center; justify-content: center;
padding: 40px 24px;
box-sizing: border-box;
}
.ccb-inl *, .ccb-inl *::before, .ccb-inl *::after { box-sizing: border-box; }
.ccb-inl__prose {
max-width: 540px;
font-size: 18px; line-height: 1.85; letter-spacing: .005em;
}
.ccb-inl__prose p { margin-bottom: 1.2em; }
.ccb-inl__prose p:last-child { margin-bottom: 0; }
.ccb-inl__c {
font-family: 'Spline Sans Mono', monospace;
font-size: .82em; font-weight: 600;
background: var(--ccb-inl-pill-bg);
color: var(--ccb-inl-pill-ink);
padding: 2px 8px; border-radius: 999px;
vertical-align: middle;
border: 1px solid rgba(0,0,0,.05);
white-space: nowrap;
}
.ccb-inl__c--warn { background: #f7e9e1; color: var(--ccb-inl-accent); }
.ccb-inl__c--blue { background: #e6eef7; color: #2d5d8a; }
.ccb-inl__em { color: var(--ccb-inl-muted); }
.ccb-inl__lead::first-letter {
font-size: 3.2em; float: left; line-height: .8;
padding: 6px 10px 0 0;
color: var(--ccb-inl-accent); font-weight: 500;
}
```
### 09. Neumorphic Embedded Code Box
**Type:** Pure CSS
**Description:** A soft-UI card on a matched gray canvas where the code box uses dual box-shadow: inset (one light highlight, one dark shadow) to look recessed into the surface, with a raised outer card and a pressed-in icon badge for the tactile look. Best for design-tool dashboards, settings panels embedded inside documentation, calm productivity apps, and any place a code reference needs to feel like part of the surrounding UI rather than a hard rectangle dropped on top.
**HTML:**
```html
useToggle
hooks/useToggle.js
```
**CSS:**
```css
/* ─── 09 Neumorphic Embedded Code Box ──────── */
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500;600&family=Quicksand:wght@400;500;700&display=swap');
.ccb-nmp {
--ccb-nmp-bg: #e4e8ef;
--ccb-nmp-ink: #56627a;
--ccb-nmp-muted: #9aa3b6;
--ccb-nmp-accent: #7b8cde;
--ccb-nmp-light: #ffffff;
--ccb-nmp-dark: #bcc4d4;
width: 100%;
min-height: 320px;
background: var(--ccb-nmp-bg);
color: var(--ccb-nmp-ink);
font-family: 'Quicksand', sans-serif;
display: flex; align-items: center; justify-content: center;
padding: 36px 24px;
box-sizing: border-box;
}
.ccb-nmp *, .ccb-nmp *::before, .ccb-nmp *::after { box-sizing: border-box; }
.ccb-nmp__card {
width: 100%; max-width: 560px;
background: var(--ccb-nmp-bg);
border-radius: 28px;
padding: 26px;
box-shadow:
-10px -10px 24px var(--ccb-nmp-light),
12px 12px 28px var(--ccb-nmp-dark);
}
.ccb-nmp__row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.ccb-nmp__badge {
width: 46px; height: 46px; border-radius: 14px;
background: var(--ccb-nmp-bg);
display: flex; align-items: center; justify-content: center;
box-shadow:
inset 3px 3px 7px var(--ccb-nmp-dark),
inset -3px -3px 7px var(--ccb-nmp-light);
color: var(--ccb-nmp-accent);
font-weight: 700; font-family: 'Azeret Mono', monospace;
}
.ccb-nmp__title { font-weight: 700; font-size: 15px; }
.ccb-nmp__sub { font-size: 12.5px; color: var(--ccb-nmp-muted); font-family: 'Azeret Mono', monospace; }
.ccb-nmp__embed {
background: var(--ccb-nmp-bg);
border-radius: 18px;
box-shadow:
inset 6px 6px 14px var(--ccb-nmp-dark),
inset -6px -6px 14px var(--ccb-nmp-light);
padding: 20px 22px;
}
.ccb-nmp__pre {
margin: 0;
font-family: 'Azeret Mono', monospace;
font-size: 13px; line-height: 1.9;
color: #5b6680; overflow-x: auto;
}
.ccb-nmp__k { color: #8c6fd6; }
.ccb-nmp__f { color: #5a8ad6; }
.ccb-nmp__s { color: #5aa07a; }
.ccb-nmp__c { color: #a7afc0; font-style: italic; }
.ccb-nmp__pre::-webkit-scrollbar { height: 7px; }
.ccb-nmp__pre::-webkit-scrollbar-thumb { background: var(--ccb-nmp-dark); border-radius: 7px; }
```
### 10. Split-Pane Code + Live Preview Container
**Type:** Pure CSS
**Description:** A two-pane CSS Grid card: the left pane renders a live interactive gradient button (with working hover lift + press feedback), the right pane shows the styled <pre><code> source that produced it. Collapses to a stacked layout on mobile. Best for documentation tutorials, design-system component reference pages, MDX-driven docs sites, and any teaching context where reading the code is half the story and seeing it run is the other half.
**HTML:**
```html
Result + Source .demo-btn
.demo-btn {
background: linear-gradient(135deg,#7c5cff,#b16cff);
padding: 14px 30px;
border-radius: 12px;
box-shadow: 0 10px 30px -8px rgba(124,92,255,.7);
}
```
**CSS:**
```css
/* ─── 10 Split-Pane Code + Live Preview Container ──────── */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=Geist:wght@400;500;700&display=swap');
.ccb-spl {
--ccb-spl-bg: #0f1115;
--ccb-spl-code-bg: #15181f;
--ccb-spl-preview-bg: #1b1f29;
--ccb-spl-ink: #e6e9ef;
--ccb-spl-muted: #828b9c;
--ccb-spl-accent: #7c5cff;
--ccb-spl-line: rgba(255,255,255,.07);
width: 100%;
min-height: 320px;
display: flex; align-items: center; justify-content: center;
background:
radial-gradient(700px 400px at 100% 0%, rgba(124,92,255,.12), transparent 55%),
var(--ccb-spl-bg);
color: var(--ccb-spl-ink);
font-family: 'Geist', 'Segoe UI', sans-serif;
padding: 36px 22px;
box-sizing: border-box;
}
.ccb-spl *, .ccb-spl *::before, .ccb-spl *::after { box-sizing: border-box; }
.ccb-spl__wrap { width: 100%; max-width: 700px; }
.ccb-spl__split {
display: grid; grid-template-columns: 1fr 1fr;
background: var(--ccb-spl-code-bg);
border: 1px solid var(--ccb-spl-line);
border-radius: 16px; overflow: hidden;
box-shadow: 0 30px 70px -32px rgba(0,0,0,.85);
}
@media (max-width: 680px) {
.ccb-spl__split { grid-template-columns: 1fr; }
.ccb-spl__preview { border-right: none; border-bottom: 1px solid var(--ccb-spl-line); }
}
.ccb-spl__preview {
background:
radial-gradient(circle at 30% 20%, rgba(124,92,255,.18), transparent 60%),
var(--ccb-spl-preview-bg);
display: flex; align-items: center; justify-content: center;
padding: 36px 22px;
border-right: 1px solid var(--ccb-spl-line);
}
.ccb-spl__demo-btn {
font-family: 'Geist', sans-serif; font-weight: 600; font-size: 15px;
color: #fff; border: none; cursor: pointer;
padding: 14px 30px; border-radius: 12px;
background: linear-gradient(135deg, #7c5cff, #b16cff);
box-shadow: 0 10px 30px -8px rgba(124,92,255,.7);
transition: transform .2s, box-shadow .2s;
}
.ccb-spl__demo-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -8px rgba(124,92,255,.9); }
.ccb-spl__demo-btn:active { transform: translateY(0); }
.ccb-spl__demo-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ccb-spl__codepane { display: flex; flex-direction: column; }
.ccb-spl__codehead {
display: flex; align-items: center; gap: 8px;
padding: 11px 18px;
border-bottom: 1px solid var(--ccb-spl-line);
font-family: 'Geist Mono', monospace;
font-size: 12px; color: var(--ccb-spl-muted); letter-spacing: .05em;
}
.ccb-spl__tag { margin-left: auto; color: var(--ccb-spl-accent); }
.ccb-spl__pre {
margin: 0; padding: 20px 20px; flex: 1;
font-family: 'Geist Mono', monospace;
font-size: 12.5px; line-height: 1.85;
color: #cdd4e0; overflow-x: auto;
}
.ccb-spl__k { color: #c4b5fd; }
.ccb-spl__p { color: #7dd3fc; }
.ccb-spl__s { color: #86efac; }
.ccb-spl__pre::-webkit-scrollbar { height: 8px; }
.ccb-spl__pre::-webkit-scrollbar-thumb { background: #2a2f3a; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
.ccb-spl__demo-btn { transition: none; }
}
```
### 11. Minimalist Light Mode / Editorial Theme
**Type:** Pure CSS
**Description:** A bright Stripe-style docs aesthetic — crisp #f8fafc background, white panel, elegant Fraunces headings, and gentle indigo / green / orange syntax accents tuned for daylight readability. Filename + language pill on a soft header strip. Best for product docs, API reference sites, marketing pages targeting designers who want the page to feel calm, and any audience reading on bright screens during the day.
**HTML:**
```html
checkout.js
JavaScript
// create a payment session
const session = await stripe.checkout.sessions.create({
mode: 'payment',
line_items: [{ price: 'price_1Nx', quantity: 1 }],
success_url: 'https://codefronts.com/done',
});
```
**CSS:**
```css
/* ─── 11 Minimalist Light Mode / Editorial Theme ──────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,800&display=swap');
.ccb-lgt {
--ccb-lgt-paper: #f8fafc;
--ccb-lgt-panel: #ffffff;
--ccb-lgt-ink: #1f2933;
--ccb-lgt-muted: #697586;
--ccb-lgt-line: #e7ecf2;
--ccb-lgt-accent: #635bff;
--ccb-lgt-green: #0a7c5a;
--ccb-lgt-orange: #c2410c;
width: 100%;
min-height: 320px;
background: var(--ccb-lgt-paper);
color: var(--ccb-lgt-ink);
font-family: 'Fraunces', Georgia, serif;
display: flex; align-items: center; justify-content: center;
padding: 36px 22px;
box-sizing: border-box;
}
.ccb-lgt *, .ccb-lgt *::before, .ccb-lgt *::after { box-sizing: border-box; }
.ccb-lgt__wrap { width: 100%; max-width: 600px; }
.ccb-lgt__block {
background: var(--ccb-lgt-panel);
border: 1px solid var(--ccb-lgt-line);
border-radius: 14px; overflow: hidden;
box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -16px rgba(16,24,40,.18);
}
.ccb-lgt__head {
display: flex; align-items: center; gap: 10px;
padding: 13px 18px;
border-bottom: 1px solid var(--ccb-lgt-line);
background: #fcfdfe;
}
.ccb-lgt__name { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--ccb-lgt-muted); font-weight: 500; }
.ccb-lgt__lang {
margin-left: auto;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; color: var(--ccb-lgt-accent);
background: #eef0ff;
padding: 3px 10px; border-radius: 6px; font-weight: 600;
}
.ccb-lgt__pre {
margin: 0; padding: 20px 20px 24px;
font-family: 'IBM Plex Mono', monospace;
font-size: 13px; line-height: 1.8;
color: #334155; overflow-x: auto;
}
.ccb-lgt__k { color: var(--ccb-lgt-accent); }
.ccb-lgt__f { color: #0b69c7; }
.ccb-lgt__s { color: var(--ccb-lgt-green); }
.ccb-lgt__n { color: var(--ccb-lgt-orange); }
.ccb-lgt__c { color: #9aa5b1; font-style: italic; }
.ccb-lgt__pre::-webkit-scrollbar { height: 8px; }
.ccb-lgt__pre::-webkit-scrollbar-thumb { background: #dde3ea; border-radius: 8px; }
```
### 12. Expandable / Collapsible Code Wrapper
**Type:** Pure CSS
**Description:** A long code snippet capped with max-height + overflow: hidden and a linear-gradient(transparent, bg) fade mask at the bottom hinting at more content. A pure-CSS checkbox hack drives the smooth "Show more / Show less" toggle and rotating chevron — no JavaScript required. Best for documentation pages with long source listings, FAQ answers that embed code, blog posts where the snippet is reference material rather than the focus, and any place a long block of code would otherwise dominate the page above the fold.
**HTML:**
```html
utils/animate.js 142 lines
// easing + tween helpers
export const easeOutCubic = t => 1 - Math.pow(1 - t, 3);
export const easeInOut = t => t < .5
? 4 * t * t * t
: 1 - Math.pow(-2 * t + 2, 3) / 2;
export function tween({ from, to, duration, onUpdate }) {
const start = performance.now();
function frame(now) {
const p = Math.min((now - start) / duration, 1);
onUpdate(from + (to - from) * easeOutCubic(p));
if (p < 1) requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
}
export function stagger(items, delay = 60) {
items.forEach((el, i) => {
el.style.animationDelay = `${i * delay}ms`;
});
}
```
**CSS:**
```css
/* ─── 12 Expandable / Collapsible Code Wrapper ──────── */
@import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;600;700&display=swap');
.ccb-exp {
--ccb-exp-bg: #0c0e13;
--ccb-exp-panel: #13161d;
--ccb-exp-ink: #dfe4ec;
--ccb-exp-muted: #79828f;
--ccb-exp-accent: #34d399;
--ccb-exp-line: rgba(255,255,255,.06);
width: 100%;
min-height: 360px;
background:
radial-gradient(640px 360px at 0% 0%, rgba(52,211,153,.09), transparent 55%),
var(--ccb-exp-bg);
color: var(--ccb-exp-ink);
font-family: 'Space Grotesk', sans-serif;
display: flex; align-items: center; justify-content: center;
padding: 36px 22px;
box-sizing: border-box;
}
.ccb-exp *, .ccb-exp *::before, .ccb-exp *::after { box-sizing: border-box; }
.ccb-exp__wrap { width: 100%; max-width: 600px; }
.ccb-exp__block {
background: var(--ccb-exp-panel);
border: 1px solid var(--ccb-exp-line);
border-radius: 14px; overflow: hidden;
box-shadow: 0 24px 60px -30px rgba(0,0,0,.85);
}
.ccb-exp__head {
display: flex; align-items: center; gap: 10px;
padding: 12px 18px;
border-bottom: 1px solid var(--ccb-exp-line);
font-family: 'Martian Mono', monospace;
font-size: 11.5px; color: var(--ccb-exp-muted); letter-spacing: .04em;
}
.ccb-exp__lines { margin-left: auto; color: var(--ccb-exp-accent); }
.ccb-exp__toggle { display: none; }
.ccb-exp__codewrap { position: relative; }
.ccb-exp__pre {
margin: 0; padding: 20px 20px;
font-family: 'Martian Mono', monospace;
font-size: 12px; line-height: 1.95;
color: #cbd3df; overflow: hidden;
max-height: 170px;
transition: max-height .45s cubic-bezier(.4,0,.2,1);
}
.ccb-exp__toggle:checked ~ .ccb-exp__codewrap .ccb-exp__pre { max-height: 1200px; }
.ccb-exp__fade {
position: absolute; left: 0; right: 0; bottom: 0;
height: 80px;
pointer-events: none;
background: linear-gradient(transparent, var(--ccb-exp-panel));
transition: opacity .3s;
}
.ccb-exp__toggle:checked ~ .ccb-exp__codewrap .ccb-exp__fade { opacity: 0; }
.ccb-exp__btn {
display: block; width: 100%; text-align: center; cursor: pointer;
padding: 13px;
font-family: 'Martian Mono', monospace;
font-size: 11.5px; letter-spacing: .08em;
color: var(--ccb-exp-accent);
background: rgba(52,211,153,.06);
border-top: 1px solid var(--ccb-exp-line);
user-select: none;
transition: background .2s;
}
.ccb-exp__btn:hover { background: rgba(52,211,153,.12); }
.ccb-exp__btn .ccb-exp__more { display: inline; }
.ccb-exp__btn .ccb-exp__less { display: none; }
.ccb-exp__toggle:checked ~ .ccb-exp__btn .ccb-exp__more { display: none; }
.ccb-exp__toggle:checked ~ .ccb-exp__btn .ccb-exp__less { display: inline; }
.ccb-exp__btn::after {
content: ' \25BE';
display: inline-block;
transition: transform .3s;
}
.ccb-exp__toggle:checked ~ .ccb-exp__btn::after { transform: rotate(180deg); }
.ccb-exp__toggle:focus-visible ~ .ccb-exp__btn { outline: 2px solid var(--ccb-exp-accent); outline-offset: -3px; }
.ccb-exp__k { color: #c792ea; }
.ccb-exp__f { color: #82aaff; }
.ccb-exp__s { color: #c3e88d; }
.ccb-exp__c { color: #586173; font-style: italic; }
.ccb-exp__p { color: #7dd3fc; }
.ccb-exp__n { color: #ffb86c; }
.ccb-exp__pre::-webkit-scrollbar { height: 8px; }
.ccb-exp__pre::-webkit-scrollbar-thumb { background: #262b34; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
.ccb-exp__pre, .ccb-exp__fade, .ccb-exp__btn::after, .ccb-exp__btn { transition: none; }
}
```
---
## 6 CSS Countdown Timers
URL: https://codefronts.com/snippets/css-countdown-timers/
Description: Six hand-coded CSS countdown timer patterns for the conversion surfaces real products need — ecommerce flash sales, site-wide sticky announcement bars, shopping cart expiration alerts, coming-soon launches, circular SVG progress rings, and retro flip-clock timers. Accessible aria-live markup, prefers-reduced-motion fallbacks, scoped per-demo classes, MIT-licensed.
Demo count: 6
### 01. E-Commerce Flash Sales & Product Pages
**Type:** CSS + JS
**Description:** A bold, high-contrast product card with a brutalist offset shadow and split-panel box-style D/H/M/S clock. Pulsing "flash sale ends in" indicator, strikethrough pricing, discount badge, and a stock-scarcity line built to drive urgency-based conversions. Best for limited-edition drops, daily deals, daily-deal email landing pages, and product detail pages where the deadline is the headline.
**HTML:**
```html
SALE
AERO·9
Limited Drop · Footwear
Aero 9 Carbon Runner
$89
$179
-50%
Flash sale ends in
00Days
00Hours
00Mins
00Secs
Only 12 pairs left at this price
```
**CSS:**
```css
/* ─── 01 Flash Sale — brutalist product card ─────────────── */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');
.cdt-fls {
--cdt-fls-ink: #0a0a0a;
--cdt-fls-paper: #f4f1ea;
--cdt-fls-flame: #ff3b14;
--cdt-fls-gold: #ffcf3a;
position: relative;
width: 100%;
min-height: 520px;
background:
radial-gradient(circle at 20% 30%, rgba(255,59,20,0.08), transparent 40%),
var(--cdt-fls-paper);
display: flex; align-items: center; justify-content: center;
font-family: 'Space Mono', monospace;
padding: 40px 20px;
box-sizing: border-box;
overflow: hidden;
}
.cdt-fls *, .cdt-fls *::before, .cdt-fls *::after { box-sizing: border-box; margin: 0; padding: 0; }
.cdt-fls__card {
background: var(--cdt-fls-ink); color: var(--cdt-fls-paper);
width: 100%; max-width: 460px;
border-radius: 4px;
box-shadow: 14px 14px 0 var(--cdt-fls-flame);
position: relative; overflow: hidden;
}
.cdt-fls__card::before {
content: ''; position: absolute; inset: 0;
background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 6px);
pointer-events: none;
}
.cdt-fls__badge {
position: absolute; top: 22px; right: -42px;
background: var(--cdt-fls-flame); color: #fff;
font-family: 'Archivo Black', sans-serif;
font-size: 12px; letter-spacing: 2px;
padding: 8px 50px; transform: rotate(45deg); z-index: 3;
}
.cdt-fls__img-zone {
height: 180px;
background: linear-gradient(135deg, #2a2a2a, #111), var(--cdt-fls-ink);
display: flex; align-items: center; justify-content: center;
border-bottom: 3px solid var(--cdt-fls-flame);
}
.cdt-fls__img-zone span {
font-family: 'Archivo Black', sans-serif;
font-size: 56px; color: var(--cdt-fls-flame);
opacity: 0.85; text-shadow: 4px 4px 0 rgba(0,0,0,0.5);
transform: rotate(-6deg);
}
.cdt-fls__info { padding: 24px 28px 30px; position: relative; z-index: 2; }
.cdt-fls__cat { font-size: 11px; letter-spacing: 4px; color: var(--cdt-fls-gold); text-transform: uppercase; }
.cdt-fls__title {
font-family: 'Archivo Black', sans-serif;
font-size: 26px; line-height: 1.05; margin: 8px 0 14px; text-transform: uppercase;
color: var(--cdt-fls-paper);
}
.cdt-fls__price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; }
.cdt-fls__price { font-family: 'Archivo Black', sans-serif; font-size: 32px; color: var(--cdt-fls-flame); }
.cdt-fls__was { font-size: 16px; color: #777; text-decoration: line-through; }
.cdt-fls__off {
margin-left: auto;
background: var(--cdt-fls-gold); color: var(--cdt-fls-ink);
font-weight: 700; padding: 4px 10px; font-size: 13px;
}
.cdt-fls__urgency {
font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
color: var(--cdt-fls-flame); margin-bottom: 10px;
display: flex; align-items: center; gap: 8px;
}
.cdt-fls__pulse {
width: 9px; height: 9px; border-radius: 50%; background: var(--cdt-fls-flame);
animation: cdt-fls-blip 1s infinite;
}
@keyframes cdt-fls-blip {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,59,20,.6); }
50% { opacity: 0.4; box-shadow: 0 0 0 8px rgba(255,59,20,0); }
}
.cdt-fls__timer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.cdt-fls__seg {
background: var(--cdt-fls-paper); color: var(--cdt-fls-ink);
border-radius: 3px; padding: 12px 4px 6px;
text-align: center; position: relative; overflow: hidden;
}
.cdt-fls__seg::after {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
background: rgba(0,0,0,0.04);
}
.cdt-fls__num {
font-family: 'Archivo Black', sans-serif;
font-size: 30px; line-height: 1; position: relative; z-index: 1;
display: block;
}
.cdt-fls__lab {
font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
color: #888; margin-top: 6px; display: block;
}
.cdt-fls__buy {
width: 100%;
background: var(--cdt-fls-flame); color: #fff;
border: none; padding: 16px;
font-family: 'Archivo Black', sans-serif;
font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
cursor: pointer;
transition: transform 0.15s, background 0.2s;
}
.cdt-fls__buy:hover { background: var(--cdt-fls-gold); color: var(--cdt-fls-ink); transform: translateY(-2px); }
.cdt-fls__buy:active { transform: translateY(0); }
.cdt-fls__buy:focus-visible { outline: 2px solid var(--cdt-fls-gold); outline-offset: 3px; }
.cdt-fls__stock { text-align: center; font-size: 11px; color: #999; margin-top: 12px; letter-spacing: 1px; }
.cdt-fls__stock b { color: var(--cdt-fls-gold); }
@media (prefers-reduced-motion: reduce) {
.cdt-fls__pulse, .cdt-fls__buy { animation: none; transition: none; }
}
```
**JS:**
```js
(() => {
const root = document.querySelector('.cdt-fls');
if (!root) return;
const target = Date.now() + (1*86400 + 7*3600 + 42*60 + 18) * 1000;
const pad = (n) => String(n).padStart(2, '0');
const els = {
d: root.querySelector('[data-cdt-fls="d"]'),
h: root.querySelector('[data-cdt-fls="h"]'),
m: root.querySelector('[data-cdt-fls="m"]'),
s: root.querySelector('[data-cdt-fls="s"]'),
};
function tick() {
const diff = Math.max(0, target - Date.now());
els.d.textContent = pad(Math.floor(diff / 86400000));
els.h.textContent = pad(Math.floor(diff % 86400000 / 3600000));
els.m.textContent = pad(Math.floor(diff % 3600000 / 60000));
els.s.textContent = pad(Math.floor(diff % 60000 / 1000));
}
tick();
setInterval(tick, 1000);
})();
```
### 02. Website Sticky Announcement Bars (Site-Wide)
**Type:** CSS + JS
**Description:** An ultra-thin, flexbox-aligned strip pinned to the top of the viewport, broadcasting a free-shipping deadline. Compact monospace clock with blinking colon separators, inline CTA pill, and a faux scrollable page so you can see it stay fixed. Best for site-wide promo bars, shipping cutoff alerts, holiday campaign chrome, and any persistent deadline that should never scroll away.
**HTML:**
```html
Your storefront content
The announcement strip above stays pinned to the top of the section as visitors scroll. It is built with a flexbox-aligned inline layout, a compact monospace clock, and clean translucent borders that flow naturally with a site header.
Scroll this card to confirm the bar remains fixed. The blinking colon separators reinforce that the deadline is live and ticking.
↑ The bar stays put while you scroll ↑
```
**CSS:**
```css
/* ─── 02 Sticky Announcement Bar — site-wide countdown ──────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=DM+Mono:wght@500&display=swap');
.cdt-stk {
--cdt-stk-bar-bg: #0d1b2a;
--cdt-stk-accent: #4ee1a0;
--cdt-stk-accent-2: #7cc6fe;
--cdt-stk-text: #eef4f8;
position: relative;
width: 100%;
height: 560px;
background: linear-gradient(180deg, #c7d4dc 0%, #9fb2bd 100%);
font-family: 'Sora', sans-serif;
display: flex; flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
}
.cdt-stk *, .cdt-stk *::before, .cdt-stk *::after { box-sizing: border-box; margin: 0; padding: 0; }
.cdt-stk__announce {
position: sticky; top: 0; z-index: 100;
width: 100%;
background: var(--cdt-stk-bar-bg);
background-image:
radial-gradient(circle at 15% 50%, rgba(78,225,160,0.18), transparent 35%),
radial-gradient(circle at 85% 50%, rgba(124,198,254,0.15), transparent 35%);
color: var(--cdt-stk-text);
border-bottom: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 4px 24px rgba(13,27,42,0.25);
}
.cdt-stk__inner {
max-width: 1180px; margin: 0 auto;
padding: 11px 22px;
display: flex; align-items: center; gap: 16px;
flex-wrap: wrap; justify-content: center;
}
.cdt-stk__ship-icon {
width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(135deg, var(--cdt-stk-accent), var(--cdt-stk-accent-2));
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; box-shadow: 0 0 14px rgba(78,225,160,0.5);
}
.cdt-stk__ship-icon svg { width: 13px; height: 13px; fill: var(--cdt-stk-bar-bg); }
.cdt-stk__msg { font-size: 14px; font-weight: 600; letter-spacing: 0.2px; }
.cdt-stk__hl { color: var(--cdt-stk-accent); }
.cdt-stk__divider { width: 1px; height: 18px; background: rgba(255,255,255,0.15); }
.cdt-stk__countdown {
display: flex; align-items: center; gap: 6px;
font-family: 'DM Mono', monospace;
}
.cdt-stk__lbl {
font-family: 'Sora', sans-serif;
font-size: 12px; opacity: 0.65; margin-right: 4px; letter-spacing: 0.5px;
}
.cdt-stk__unit {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px; padding: 4px 8px;
font-size: 14px; font-weight: 500;
min-width: 30px; text-align: center; color: var(--cdt-stk-text);
}
.cdt-stk__sep {
color: var(--cdt-stk-accent); font-weight: 700;
animation: cdt-stk-flick 1s steps(1) infinite;
}
@keyframes cdt-stk-flick { 50% { opacity: 0.25; } }
.cdt-stk__cta-link {
font-size: 13px; font-weight: 700;
color: var(--cdt-stk-bar-bg); background: var(--cdt-stk-accent);
padding: 7px 16px; border-radius: 20px;
text-decoration: none; white-space: nowrap;
transition: transform 0.15s, box-shadow 0.2s;
}
.cdt-stk__cta-link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(78,225,160,0.4); }
.cdt-stk__cta-link:focus-visible { outline: 2px solid var(--cdt-stk-bar-bg); outline-offset: 2px; }
.cdt-stk__page { flex: 1; padding: 60px 24px; max-width: 760px; margin: 0 auto; color: #2b3a44; }
.cdt-stk__h2 { font-size: 22px; margin-bottom: 14px; font-weight: 700; color: #1c2a33; }
.cdt-stk__p { line-height: 1.8; margin-bottom: 16px; opacity: 0.8; font-size: 14px; }
.cdt-stk__ghost { height: 12px; background: rgba(43,58,68,0.12); border-radius: 6px; margin-bottom: 10px; }
.cdt-stk__ghost--s { width: 60%; }
.cdt-stk__hint { text-align: center; font-size: 12px; opacity: 0.55; margin-top: 30px; }
@media (max-width: 600px) {
.cdt-stk__divider { display: none; }
.cdt-stk__inner { gap: 10px; padding: 10px 14px; }
.cdt-stk__msg { font-size: 12.5px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
.cdt-stk__sep, .cdt-stk__cta-link { animation: none; transition: none; }
}
```
**JS:**
```js
(() => {
const root = document.querySelector('.cdt-stk');
if (!root) return;
const target = Date.now() + (5*3600 + 12*60 + 47) * 1000;
const pad = (n) => String(n).padStart(2, '0');
const h = root.querySelector('[data-cdt-stk="h"]');
const m = root.querySelector('[data-cdt-stk="m"]');
const s = root.querySelector('[data-cdt-stk="s"]');
function tick() {
const diff = Math.max(0, target - Date.now());
h.textContent = pad(Math.floor(diff / 3600000));
m.textContent = pad(Math.floor(diff % 3600000 / 60000));
s.textContent = pad(Math.floor(diff % 60000 / 1000));
}
tick();
setInterval(tick, 1000);
})();
```
### 03. Shopping Cart Expiration Timers
**Type:** CSS + JS
**Description:** A compact cart widget with a reserved-items alert, "Your cart is reserved for 04:59" MM:SS clock, blinking colon, and a draining progress sliver that shifts to red in the final 30 seconds — purpose-built to combat cart abandonment. Best for checkout flows, BOPIS reservations, ticket holds, limited-stock carts where a deadline is the conversion lever.
**HTML:**
```html
Your cart is reserved for
0459
$129
$89
Subtotal$218.00
ShippingFree
Total$218.00
⚡ Hurry — items release back to stock when the timer ends
```
**CSS:**
```css
/* ─── 03 Cart Expiration Timer — reservation hold UX ───────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Roboto+Mono:wght@600&display=swap');
.cdt-crt {
--cdt-crt-bg: #faf7f2;
--cdt-crt-card: #ffffff;
--cdt-crt-ink: #211c1a;
--cdt-crt-muted: #8a807a;
--cdt-crt-alert: #e8552d;
--cdt-crt-alert-soft: #fef0eb;
--cdt-crt-line: #efe9e1;
position: relative;
width: 100%;
min-height: 520px;
background: var(--cdt-crt-bg);
background-image: radial-gradient(circle at 90% 0%, rgba(232,85,45,0.05), transparent 40%);
font-family: 'Plus Jakarta Sans', sans-serif;
display: flex; align-items: center; justify-content: center;
padding: 36px 18px;
color: var(--cdt-crt-ink);
box-sizing: border-box;
overflow: hidden;
}
.cdt-crt *, .cdt-crt *::before, .cdt-crt *::after { box-sizing: border-box; margin: 0; padding: 0; }
.cdt-crt__cart {
background: var(--cdt-crt-card);
width: 100%; max-width: 420px;
border-radius: 20px;
border: 1px solid var(--cdt-crt-line);
box-shadow: 0 30px 60px -28px rgba(33,28,26,0.3);
overflow: hidden;
}
.cdt-crt__reserve {
background: var(--cdt-crt-alert-soft);
border-bottom: 1px solid #f6ddd4;
padding: 16px 22px;
display: flex; align-items: center; gap: 13px;
}
.cdt-crt__lock {
width: 34px; height: 34px; flex-shrink: 0;
background: var(--cdt-crt-alert);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 6px 14px -4px rgba(232,85,45,0.6);
}
.cdt-crt__lock svg { width: 16px; height: 16px; fill: #fff; }
.cdt-crt__reserve-text { flex: 1; }
.cdt-crt__reserve-text p { font-size: 12.5px; color: var(--cdt-crt-muted); font-weight: 600; }
.cdt-crt__clock {
font-family: 'Roboto Mono', monospace;
font-size: 22px; font-weight: 600;
color: var(--cdt-crt-alert); letter-spacing: 1px;
margin-top: 1px;
}
.cdt-crt__colon { animation: cdt-crt-blink 1s steps(1) infinite; }
@keyframes cdt-crt-blink { 50% { opacity: 0; } }
.cdt-crt__bar-track { height: 4px; background: #f3e7e1; }
.cdt-crt__bar-fill {
height: 100%; width: 100%;
background: linear-gradient(90deg, var(--cdt-crt-alert), #f6915f);
transition: width 1s linear, background 0.3s;
}
.cdt-crt__items { padding: 8px 22px 4px; }
.cdt-crt__row {
display: flex; align-items: center; gap: 14px;
padding: 16px 0; border-bottom: 1px solid var(--cdt-crt-line);
}
.cdt-crt__row:last-child { border-bottom: none; }
.cdt-crt__thumb {
width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.cdt-crt__t1 { background: #eaf2ff; }
.cdt-crt__t2 { background: #fff1e8; }
.cdt-crt__meta { flex: 1; }
.cdt-crt__meta h3 { font-size: 14px; font-weight: 700; }
.cdt-crt__meta span { font-size: 12px; color: var(--cdt-crt-muted); font-weight: 600; }
.cdt-crt__price { font-weight: 800; font-size: 15px; }
.cdt-crt__summary { padding: 18px 22px 22px; background: #fdfbf8; border-top: 1px solid var(--cdt-crt-line); }
.cdt-crt__line {
display: flex; justify-content: space-between;
font-size: 13px; color: var(--cdt-crt-muted); font-weight: 600; margin-bottom: 8px;
}
.cdt-crt__total {
display: flex; justify-content: space-between;
font-size: 18px; font-weight: 800; margin: 12px 0 18px;
}
.cdt-crt__checkout {
width: 100%; border: none;
background: var(--cdt-crt-ink); color: #fff;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700; font-size: 15px;
padding: 16px; border-radius: 14px; cursor: pointer;
transition: transform 0.15s, background 0.2s;
}
.cdt-crt__checkout:hover { background: var(--cdt-crt-alert); transform: translateY(-2px); }
.cdt-crt__checkout:focus-visible { outline: 2px solid var(--cdt-crt-alert); outline-offset: 3px; }
.cdt-crt__reassure { text-align: center; font-size: 11px; color: var(--cdt-crt-muted); margin-top: 12px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
.cdt-crt__colon, .cdt-crt__bar-fill, .cdt-crt__checkout { animation: none; transition: none; }
}
```
**JS:**
```js
(() => {
const root = document.querySelector('.cdt-crt');
if (!root) return;
const DURATION = 5 * 60;
let remaining = 4 * 60 + 59;
const pad = (n) => String(n).padStart(2, '0');
const mEl = root.querySelector('[data-cdt-crt="m"]');
const sEl = root.querySelector('[data-cdt-crt="s"]');
const bar = root.querySelector('[data-cdt-crt="bar"]');
function tick() {
mEl.textContent = pad(Math.floor(remaining / 60));
sEl.textContent = pad(remaining % 60);
bar.style.width = (remaining / DURATION * 100) + '%';
if (remaining <= 30) bar.style.background = '#c0392b';
if (remaining > 0) remaining--;
}
tick();
setInterval(tick, 1000);
})();
```
### 04. "Coming Soon" & Product Launch Landing Pages
**Type:** CSS + JS
**Description:** A full-screen hero with animated aurora blobs, grain overlay, and four glassmorphism cards as the visual focal point. Gradient display typography, live status pip, and an email "Notify Me" capture for building launch anticipation. Best for unreleased product teasers, app pre-launch pages, event registration funnels, and waitlist capture flows.
**HTML:**
```html
Launching Soon
Something
extraordinary
is coming.
We're putting the final touches on the next generation of our platform. Be the first to experience it the moment we go live.
00Days
00Hours
00Minutes
00Seconds
```
**CSS:**
```css
/* ─── 04 Coming Soon — glassmorphism aurora launch ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Outfit:wght@300;400;500&display=swap');
.cdt-coa {
--cdt-coa-bg: #07060f;
--cdt-coa-glass: rgba(255,255,255,0.06);
--cdt-coa-glass-line: rgba(255,255,255,0.14);
--cdt-coa-text: #f3f0ff;
--cdt-coa-muted: #a39fc4;
--cdt-coa-glow1: #8b5cff;
--cdt-coa-glow2: #2de2c6;
position: relative;
width: 100%;
min-height: 600px;
background: var(--cdt-coa-bg);
font-family: 'Outfit', sans-serif;
color: var(--cdt-coa-text);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
padding: 40px 30px;
box-sizing: border-box;
}
.cdt-coa *, .cdt-coa *::before, .cdt-coa *::after { box-sizing: border-box; margin: 0; padding: 0; }
.cdt-coa__aurora { position: absolute; inset: -20%; z-index: 0; filter: blur(90px); opacity: 0.7; }
.cdt-coa__aurora span { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.cdt-coa__b1 { width: 50%; height: 50%; background: var(--cdt-coa-glow1); top: -10%; left: -5%; animation: cdt-coa-float1 14s ease-in-out infinite; }
.cdt-coa__b2 { width: 45%; height: 45%; background: var(--cdt-coa-glow2); bottom: -15%; right: -5%; animation: cdt-coa-float2 18s ease-in-out infinite; }
.cdt-coa__b3 { width: 30%; height: 30%; background: #ff5db1; top: 40%; left: 50%; animation: cdt-coa-float1 22s ease-in-out infinite reverse; }
@keyframes cdt-coa-float1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8%, 12%) scale(1.15); } }
@keyframes cdt-coa-float2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-10%, -8%) scale(1.1); } }
.cdt-coa__wrap { position: relative; z-index: 2; text-align: center; max-width: 760px; }
.cdt-coa__tag {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
color: var(--cdt-coa-muted);
border: 1px solid var(--cdt-coa-glass-line);
background: var(--cdt-coa-glass);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
padding: 8px 18px; border-radius: 30px; margin-bottom: 22px;
}
.cdt-coa__dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--cdt-coa-glow2); box-shadow: 0 0 10px var(--cdt-coa-glow2);
animation: cdt-coa-ping 1.6s infinite;
}
@keyframes cdt-coa-ping { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.cdt-coa__h1 {
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: clamp(34px, 6vw, 64px);
line-height: 0.95; letter-spacing: -2px;
margin-bottom: 16px;
background: linear-gradient(120deg, #fff 30%, #c4b5ff 60%, var(--cdt-coa-glow2));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.cdt-coa__sub {
font-weight: 300; font-size: clamp(14px, 1.8vw, 17px);
color: var(--cdt-coa-muted);
max-width: 520px; margin: 0 auto 36px; line-height: 1.6;
}
.cdt-coa__timer { display: flex; justify-content: center; gap: 14px; margin-bottom: 36px; flex-wrap: wrap; }
.cdt-coa__card {
background: var(--cdt-coa-glass);
border: 1px solid var(--cdt-coa-glass-line);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
border-radius: 22px;
padding: 22px 8px 16px; width: 110px;
position: relative;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 24px 50px -20px rgba(0,0,0,0.6);
overflow: hidden;
}
.cdt-coa__card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
}
.cdt-coa__num {
font-family: 'Syne', sans-serif;
font-weight: 700; font-size: 44px; line-height: 1;
text-shadow: 0 0 24px rgba(139,92,255,0.5);
display: block;
}
.cdt-coa__lab {
display: block; margin-top: 10px;
font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
color: var(--cdt-coa-muted);
}
.cdt-coa__notify {
display: inline-flex;
background: var(--cdt-coa-glass);
border: 1px solid var(--cdt-coa-glass-line);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-radius: 40px; padding: 6px 6px 6px 22px;
align-items: center; gap: 12px;
}
.cdt-coa__notify input {
background: transparent; border: none; outline: none;
color: var(--cdt-coa-text); font-family: 'Outfit', sans-serif;
font-size: 15px; width: 200px;
}
.cdt-coa__notify input::placeholder { color: var(--cdt-coa-muted); }
.cdt-coa__notify button {
border: none; cursor: pointer;
background: linear-gradient(120deg, var(--cdt-coa-glow1), var(--cdt-coa-glow2));
color: #07060f; font-weight: 600; font-family: 'Outfit', sans-serif;
font-size: 14px; padding: 12px 24px; border-radius: 34px;
transition: transform 0.15s, box-shadow 0.2s;
}
.cdt-coa__notify button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(139,92,255,0.5); }
.cdt-coa__notify button:focus-visible { outline: 2px solid var(--cdt-coa-glow2); outline-offset: 2px; }
@media (max-width: 560px) {
.cdt-coa__card { width: 70px; padding: 18px 4px 12px; }
.cdt-coa__num { font-size: 30px; }
.cdt-coa__notify input { width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
.cdt-coa__aurora span, .cdt-coa__dot, .cdt-coa__notify button { animation: none; transition: none; }
}
```
**JS:**
```js
(() => {
const root = document.querySelector('.cdt-coa');
if (!root) return;
const target = Date.now() + (18*86400 + 6*3600 + 31*60 + 9) * 1000;
const pad = (n) => String(n).padStart(2, '0');
const els = {
d: root.querySelector('[data-cdt-coa="d"]'),
h: root.querySelector('[data-cdt-coa="h"]'),
m: root.querySelector('[data-cdt-coa="m"]'),
s: root.querySelector('[data-cdt-coa="s"]'),
};
function tick() {
const diff = Math.max(0, target - Date.now());
els.d.textContent = pad(Math.floor(diff / 86400000));
els.h.textContent = pad(Math.floor(diff % 86400000 / 3600000));
els.m.textContent = pad(Math.floor(diff % 3600000 / 60000));
els.s.textContent = pad(Math.floor(diff % 60000 / 1000));
}
tick();
setInterval(tick, 1000);
})();
```
### 05. Circular Progress & Activity Timers (SaaS/Fitness/EdTech)
**Type:** CSS + JS
**Description:** A radial SVG ring using stroke-dasharray/stroke-dashoffset that smoothly drains as time runs out, color-shifting green → amber → red. Framed as a quiz timer with center digits, live status, and pause/resume/reset controls. Best for SaaS onboarding step timers, fitness app interval rounds, EdTech quiz countdowns, and webinar pre-roll holds.
**HTML:**
```html
Section 2 of 4
Algebra Aptitude Quiz
02:00
Remaining
Time is running
```
**CSS:**
```css
/* ─── 05 Circular Progress Timer — SVG ring drain ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=JetBrains+Mono:wght@600;700&display=swap');
.cdt-cir {
--cdt-cir-bg: #0f1419;
--cdt-cir-panel: #161d26;
--cdt-cir-panel-line: #232c38;
--cdt-cir-text: #e8eef4;
--cdt-cir-muted: #7c8a9a;
--cdt-cir-ring-bg: #232c38;
--cdt-cir-green: #34d399;
--cdt-cir-amber: #fbbf24;
--cdt-cir-red: #f87171;
position: relative;
width: 100%;
min-height: 560px;
background: var(--cdt-cir-bg);
background-image: radial-gradient(circle at 50% 0%, rgba(52,211,153,0.06), transparent 50%);
font-family: 'Sora', sans-serif;
color: var(--cdt-cir-text);
display: flex; align-items: center; justify-content: center;
padding: 36px 20px;
box-sizing: border-box;
overflow: hidden;
}
.cdt-cir *, .cdt-cir *::before, .cdt-cir *::after { box-sizing: border-box; margin: 0; padding: 0; }
.cdt-cir__panel {
background: var(--cdt-cir-panel);
border: 1px solid var(--cdt-cir-panel-line);
border-radius: 28px;
padding: 36px 36px 32px;
width: 100%; max-width: 380px;
text-align: center;
box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8);
}
.cdt-cir__quiz-label {
font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
color: var(--cdt-cir-muted); margin-bottom: 6px; font-weight: 600;
}
.cdt-cir__quiz-title { font-size: 18px; font-weight: 700; margin-bottom: 26px; }
.cdt-cir__ring-wrap { position: relative; width: 220px; height: 220px; margin: 0 auto 26px; }
.cdt-cir__ring-wrap svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.cdt-cir__ring-bg { fill: none; stroke: var(--cdt-cir-ring-bg); stroke-width: 14; }
.cdt-cir__ring-fg {
fill: none; stroke: var(--cdt-cir-green); stroke-width: 14; stroke-linecap: round;
transition: stroke-dashoffset 1s linear, stroke 0.4s ease;
filter: drop-shadow(0 0 8px rgba(52,211,153,0.5));
}
.cdt-cir__ring-center {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
}
.cdt-cir__time {
font-family: 'JetBrains Mono', monospace;
font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -1px;
}
.cdt-cir__cap {
font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
color: var(--cdt-cir-muted); margin-top: 8px;
}
.cdt-cir__status {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 600;
padding: 7px 16px; border-radius: 20px;
background: rgba(52,211,153,0.12); color: var(--cdt-cir-green);
margin-bottom: 24px; transition: all 0.4s;
}
.cdt-cir__pip {
width: 8px; height: 8px; border-radius: 50%; background: currentColor;
animation: cdt-cir-blip 1.2s infinite;
}
@keyframes cdt-cir-blip { 50% { opacity: 0.3; } }
.cdt-cir__controls { display: flex; gap: 10px; }
.cdt-cir__controls button {
flex: 1;
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 14px;
padding: 12px; border-radius: 14px; cursor: pointer;
border: 1px solid var(--cdt-cir-panel-line);
background: transparent; color: var(--cdt-cir-text);
transition: background 0.2s, transform 0.15s, border-color 0.2s;
}
.cdt-cir__controls button:hover { background: var(--cdt-cir-panel-line); transform: translateY(-1px); }
.cdt-cir__controls button:focus-visible { outline: 2px solid var(--cdt-cir-green); outline-offset: 2px; }
.cdt-cir__primary {
background: var(--cdt-cir-green) !important;
color: #07120d !important;
border-color: var(--cdt-cir-green) !important;
}
.cdt-cir__primary:hover { background: #2bbd86 !important; }
@media (prefers-reduced-motion: reduce) {
.cdt-cir__ring-fg, .cdt-cir__pip, .cdt-cir__controls button { transition: none; animation: none; }
}
```
**JS:**
```js
(() => {
const root = document.querySelector('.cdt-cir');
if (!root) return;
const R = 106;
const CIRC = 2 * Math.PI * R;
const ring = root.querySelector('[data-cdt-cir="ring"]');
const timeEl = root.querySelector('[data-cdt-cir="time"]');
const statusEl = root.querySelector('[data-cdt-cir="status"]');
const statusTxt = root.querySelector('[data-cdt-cir="statusTxt"]');
const toggleBtn = root.querySelector('[data-cdt-cir="toggle"]');
const resetBtn = root.querySelector('[data-cdt-cir="reset"]');
ring.style.strokeDasharray = CIRC;
const TOTAL = 120;
let remaining = TOTAL;
let running = true;
const pad = (n) => String(n).padStart(2, '0');
function color() {
const frac = remaining / TOTAL;
if (frac > 0.5) return '#34d399';
if (frac > 0.2) return '#fbbf24';
return '#f87171';
}
function render() {
timeEl.textContent = pad(Math.floor(remaining / 60)) + ':' + pad(remaining % 60);
ring.style.strokeDashoffset = CIRC * (1 - remaining / TOTAL);
const c = color();
ring.style.stroke = c;
ring.style.filter = 'drop-shadow(0 0 8px ' + c + ')';
statusEl.style.background = c + '20';
statusEl.style.color = c;
if (remaining <= 0) {
statusTxt.textContent = "Time's up!";
running = false;
toggleBtn.textContent = 'Start';
}
}
function loop() {
if (running && remaining > 0) {
remaining--;
render();
}
}
toggleBtn.onclick = () => {
if (remaining <= 0) remaining = TOTAL;
running = !running;
toggleBtn.textContent = running ? 'Pause' : 'Resume';
statusTxt.textContent = running ? 'Time is running' : 'Paused';
};
resetBtn.onclick = () => {
remaining = TOTAL;
running = true;
toggleBtn.textContent = 'Pause';
statusTxt.textContent = 'Time is running';
render();
};
render();
setInterval(loop, 1000);
})();
```
### 06. Retro Flip-Clock Timers
**Type:** CSS + JS
**Description:** A classic airport split-flap board using 3D CSS transforms and perspective for mechanical flip motion. Two-digit flaps per unit, glowing amber accents, pulsing colons, and a film-grain ambiance for premium, event-style branding. Best for premium product launches, gallery openings, festival countdowns, and anywhere the deadline itself deserves to be the visual centerpiece.
**HTML:**
```html
Departure In
Days
Hours
Minutes
Seconds
```
**CSS:**
```css
/* ─── 06 Retro Flip Clock — 3D split-flap mechanism ────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@300;400;500&display=swap');
.cdt-flp {
--cdt-flp-bg: #1a1410;
--cdt-flp-flap: #181818;
--cdt-flp-flap-line: #000;
--cdt-flp-digit: #f5f0e6;
--cdt-flp-accent: #e6b450;
--cdt-flp-label: #8c7a5c;
position: relative;
width: 100%;
min-height: 520px;
background:
radial-gradient(circle at 50% 20%, rgba(230,180,80,0.10), transparent 55%),
repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0 2px, transparent 2px 4px),
var(--cdt-flp-bg);
font-family: 'Oswald', sans-serif;
color: var(--cdt-flp-digit);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 40px 20px;
box-sizing: border-box;
overflow: hidden;
}
.cdt-flp *, .cdt-flp *::before, .cdt-flp *::after { box-sizing: border-box; margin: 0; padding: 0; }
.cdt-flp__marquee {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(20px, 3vw, 30px);
letter-spacing: 6px; color: var(--cdt-flp-accent);
margin-bottom: 30px;
text-shadow: 0 2px 12px rgba(230,180,80,0.4);
}
.cdt-flp__clock { display: flex; align-items: center; gap: 10px; }
.cdt-flp__group { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cdt-flp__digits { display: flex; gap: 5px; }
.cdt-flp__glabel {
font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
color: var(--cdt-flp-label); font-weight: 400;
}
.cdt-flp__flap {
position: relative;
width: 56px; height: 80px;
perspective: 320px;
font-family: 'Bebas Neue', sans-serif;
font-size: 60px; line-height: 80px; text-align: center;
}
.cdt-flp__flap .cdt-flp__card {
position: absolute; left: 0; right: 0;
height: 40px; overflow: hidden;
background: var(--cdt-flp-flap);
box-shadow: inset 0 0 14px rgba(0,0,0,0.6);
}
.cdt-flp__flap .cdt-flp__top {
top: 0; border-radius: 7px 7px 0 0;
border-bottom: 1px solid var(--cdt-flp-flap-line);
align-items: flex-end;
}
.cdt-flp__flap .cdt-flp__top span { display: block; }
.cdt-flp__flap .cdt-flp__bottom {
bottom: 0; border-radius: 0 0 7px 7px; line-height: 0;
}
.cdt-flp__flap .cdt-flp__bottom span { display: block; line-height: 80px; margin-top: -40px; }
.cdt-flp__flap .cdt-flp__flip-top,
.cdt-flp__flap .cdt-flp__flip-bottom {
position: absolute; left: 0; right: 0;
height: 40px; overflow: hidden;
background: var(--cdt-flp-flap);
backface-visibility: hidden;
}
.cdt-flp__flap .cdt-flp__flip-top {
top: 0; border-radius: 7px 7px 0 0;
border-bottom: 1px solid var(--cdt-flp-flap-line);
transform-origin: bottom;
box-shadow: inset 0 0 14px rgba(0,0,0,0.6);
}
.cdt-flp__flap .cdt-flp__flip-bottom {
bottom: 0; border-radius: 0 0 7px 7px; line-height: 0;
transform-origin: top; transform: rotateX(90deg);
box-shadow: inset 0 0 14px rgba(0,0,0,0.6);
}
.cdt-flp__flap .cdt-flp__flip-bottom span { display: block; line-height: 80px; margin-top: -40px; }
.cdt-flp__flap.cdt-flp--go .cdt-flp__flip-top { animation: cdt-flp-flip-top 0.3s ease-in forwards; }
.cdt-flp__flap.cdt-flp--go .cdt-flp__flip-bottom { animation: cdt-flp-flip-bottom 0.3s 0.3s ease-out forwards; }
@keyframes cdt-flp-flip-top { 0% { transform: rotateX(0); } 100% { transform: rotateX(-90deg); } }
@keyframes cdt-flp-flip-bottom { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.cdt-flp__flap::after {
content: ''; position: absolute; left: 0; right: 0; top: 50%;
height: 2px; background: rgba(0,0,0,0.55);
transform: translateY(-1px); z-index: 5;
}
.cdt-flp__colon {
font-family: 'Bebas Neue', sans-serif;
font-size: 48px; color: var(--cdt-flp-accent);
align-self: flex-start; margin-top: 8px;
animation: cdt-flp-pulse 1s steps(1) infinite;
}
@keyframes cdt-flp-pulse { 50% { opacity: 0.25; } }
@media (max-width: 560px) {
.cdt-flp__flap { width: 38px; height: 56px; font-size: 42px; line-height: 56px; }
.cdt-flp__flap .cdt-flp__card,
.cdt-flp__flap .cdt-flp__flip-top,
.cdt-flp__flap .cdt-flp__flip-bottom { height: 28px; }
.cdt-flp__flap .cdt-flp__bottom span,
.cdt-flp__flap .cdt-flp__flip-bottom span { line-height: 56px; margin-top: -28px; }
.cdt-flp__colon { font-size: 34px; }
.cdt-flp__clock { gap: 6px; }
.cdt-flp__digits { gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
.cdt-flp__flap.cdt-flp--go .cdt-flp__flip-top,
.cdt-flp__flap.cdt-flp--go .cdt-flp__flip-bottom,
.cdt-flp__colon { animation: none; }
}
```
**JS:**
```js
(() => {
const root = document.querySelector('.cdt-flp');
if (!root) return;
function buildFlap(el, val) {
el.dataset.val = val;
el.innerHTML =
'' + val + '' +
'' + val + '' +
'' + val + '' +
'' + val + '';
}
function setFlap(el, next) {
const cur = el.dataset.val;
if (cur === next) return;
const top = el.querySelector('.cdt-flp__top span');
const bottom = el.querySelector('.cdt-flp__bottom span');
const flipTop = el.querySelector('.cdt-flp__flip-top span');
const flipBottom = el.querySelector('.cdt-flp__flip-bottom span');
flipTop.textContent = cur;
flipBottom.textContent = next;
bottom.textContent = next;
top.textContent = cur;
el.classList.remove('cdt-flp--go');
void el.offsetWidth;
el.classList.add('cdt-flp--go');
setTimeout(() => {
top.textContent = next;
el.dataset.val = next;
}, 600);
}
const flaps = {
d0: root.querySelector('[data-cdt-flp="d0"]'), d1: root.querySelector('[data-cdt-flp="d1"]'),
h0: root.querySelector('[data-cdt-flp="h0"]'), h1: root.querySelector('[data-cdt-flp="h1"]'),
m0: root.querySelector('[data-cdt-flp="m0"]'), m1: root.querySelector('[data-cdt-flp="m1"]'),
s0: root.querySelector('[data-cdt-flp="s0"]'), s1: root.querySelector('[data-cdt-flp="s1"]'),
};
Object.values(flaps).forEach((f) => buildFlap(f, '0'));
const target = Date.now() + (3*86400 + 14*3600 + 25*60 + 50) * 1000;
const pad = (n) => String(n).padStart(2, '0');
function render() {
const diff = Math.max(0, target - Date.now());
const d = pad(Math.floor(diff / 86400000));
const h = pad(Math.floor(diff % 86400000 / 3600000));
const m = pad(Math.floor(diff % 3600000 / 60000));
const s = pad(Math.floor(diff % 60000 / 1000));
setFlap(flaps.d0, d[0]); setFlap(flaps.d1, d[1]);
setFlap(flaps.h0, h[0]); setFlap(flaps.h1, h[1]);
setFlap(flaps.m0, m[0]); setFlap(flaps.m1, m[1]);
setFlap(flaps.s0, s[0]); setFlap(flaps.s1, s[1]);
}
render();
setInterval(render, 1000);
})();
```
---
## 12 CSS Dark Mode UI Patterns
URL: https://codefronts.com/design-styles/css-dark-mode-ui/
Description: 12 free CSS dark-mode UI patterns — OLED true-black, single-accent surfaces, layered slate, and emissive glow effects with copy-paste HTML and CSS.
Demo count: 12
### 01. OLED Card
**Type:** Pure CSS
**Description:** True-black background that switches off OLED pixels entirely — paired with a single accent stroke for the active element.
**HTML:**
```html
NEW
Battery saver
Pure-black surfaces save up to 60% on OLED screens.
```
**CSS:**
```css
.dm-oled-bg { padding: 28px; border-radius: 16px; background: #000; }
.dm-oled {
background: #000;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 18px 20px;
color: #ededed;
}
.dm-oled__tag {
display: inline-block;
background: transparent;
color: #4ade80;
border: 1px solid #4ade80;
padding: 2px 8px; border-radius: 4px;
font: 700 9px ui-monospace, monospace;
letter-spacing: 0.12em;
margin-bottom: 12px;
}
.dm-oled__title { margin: 0 0 6px; font: 700 16px/1.2 system-ui, sans-serif; color: #fff; }
.dm-oled__body { margin: 0 0 14px; font: 12px/1.55 system-ui, sans-serif; color: rgba(255, 255, 255, 0.55); }
.dm-oled__btn {
background: none; border: none;
color: #4ade80; padding: 0;
font: 600 12px system-ui, sans-serif; cursor: pointer;
transition: color 0.2s;
}
.dm-oled__btn:hover { color: #86efac; }
```
### 02. Stealth Panel
**Type:** Pure CSS
**Description:** Surfaces hide behind a near-black background — only the active control reveals itself with a hairline stroke.
**HTML:**
```html
Status
OPERATIONAL
Latency
42 ms
Region
us-east-1
```
**CSS:**
```css
.dm-stealth-bg { padding: 28px; border-radius: 16px; background: #050505; }
.dm-stealth {
background: #050505;
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 10px;
padding: 8px;
}
.dm-stealth__row {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 12px;
border-radius: 6px;
transition: background 0.15s;
}
.dm-stealth__row:hover {
background: rgba(255, 255, 255, 0.03);
}
.dm-stealth__row + .dm-stealth__row { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.dm-stealth__lbl {
font: 500 11px ui-monospace, monospace;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.08em; text-transform: uppercase;
}
.dm-stealth__val {
font: 600 12px ui-monospace, monospace;
color: rgba(255, 255, 255, 0.85);
}
.dm-stealth__val--ok { color: #4ade80; }
```
### 03. Inkwell Modal
**Type:** Pure CSS
**Description:** Deep-black dialog with a single warm-amber rim — the kind of confirmation modal that whispers instead of shouting.
**HTML:**
```html
!
Save your work?
Unsaved changes will be lost when you close.
```
**CSS:**
```css
.dm-ink-bg { padding: 28px; border-radius: 16px; background: #0a0905; }
.dm-ink {
background: #000;
border: 1px solid #d4a017;
border-radius: 12px;
padding: 18px 20px;
text-align: center;
box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.25), 0 8px 32px rgba(212, 160, 23, 0.1);
}
.dm-ink__icon {
width: 36px; height: 36px;
margin: 0 auto 12px;
border: 1.5px solid #d4a017;
border-radius: 50%;
display: grid; place-items: center;
font: 800 18px ui-serif, Georgia;
color: #d4a017;
}
.dm-ink__title { margin: 0 0 6px; font: 700 14px system-ui, sans-serif; color: #fff; }
.dm-ink__body { margin: 0 0 16px; font: 12px/1.55 system-ui, sans-serif; color: rgba(255, 255, 255, 0.55); }
.dm-ink__row { display: flex; gap: 8px; justify-content: center; }
.dm-ink__btn {
background: transparent;
color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 7px 16px; border-radius: 7px;
font: 600 11px system-ui, sans-serif; cursor: pointer;
transition: all 0.18s;
}
.dm-ink__btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.dm-ink__btn--primary {
background: #d4a017; color: #000; border-color: #d4a017;
}
.dm-ink__btn--primary:hover { background: #f5b818; border-color: #f5b818; }
```
### 04. Cyber Terminal
**Type:** Pure CSS
**Description:** Phosphor-green CRT terminal aesthetic — text and chrome share one accent color, suggesting a coherent technical voice.
**HTML:**
```html
node-01.codefronts.io
$ deploy --env=prod
→ Build complete in 8.42s
→ 158 pages · 0 errors
$ █
```
**CSS:**
```css
.dm-cyber-bg { padding: 22px; border-radius: 16px; background: #020a05; }
.dm-cyber {
background: #020a05;
border: 1px solid rgba(74, 222, 128, 0.25);
border-radius: 8px;
font-family: ui-monospace, "JetBrains Mono", monospace;
color: #4ade80;
overflow: hidden;
}
.dm-cyber__head {
display: flex; align-items: center; gap: 8px;
padding: 8px 14px;
background: rgba(74, 222, 128, 0.06);
border-bottom: 1px solid rgba(74, 222, 128, 0.15);
font-size: 11px;
color: rgba(74, 222, 128, 0.7);
}
.dm-cyber__dot {
width: 6px; height: 6px;
background: #4ade80;
border-radius: 50%;
box-shadow: 0 0 8px #4ade80;
}
.dm-cyber__body { padding: 12px 14px; font-size: 11.5px; line-height: 1.7; }
.dm-cyber__line { color: rgba(74, 222, 128, 0.85); }
.dm-cyber__prompt { color: #86efac; font-weight: 700; margin-right: 4px; }
.dm-cyber__cur { animation: dm-cyber-blink 0.8s steps(2) infinite; }
@keyframes dm-cyber-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dm-cyber__cur { animation: none; } }
```
### 05. Mocha Workstation
**Type:** Pure CSS
**Description:** Warm coffee-tone dark mode — espresso brown surfaces with cream highlights for a cozy reading-app aesthetic.
**HTML:**
```html
The art of restraint
In the long view, less surface area means fewer maintenance burdens. Choose carefully what you
build.
```
**CSS:**
```css
.dm-mocha-bg { padding: 28px; border-radius: 16px; background: #1c1410; }
.dm-mocha {
background: #2a1f18;
border: 1px solid #3d2c20;
border-radius: 10px;
padding: 18px 22px;
color: #f5e6d3;
}
.dm-mocha__meta {
font: 700 10px ui-monospace, monospace;
color: #c9a961;
letter-spacing: 0.12em;
margin-bottom: 10px;
}
.dm-mocha__title { margin: 0 0 8px; font: 700 16px/1.3 ui-serif, Georgia; color: #fff8ed; }
.dm-mocha__body { margin: 0 0 14px; font: 12.5px/1.65 ui-serif, Georgia; color: #d6c4ab; font-style: italic; }
.dm-mocha__author {
display: flex; align-items: center; gap: 8px;
font: 600 11px system-ui, sans-serif;
color: #c9a961;
padding-top: 12px;
border-top: 1px solid #3d2c20;
}
.dm-mocha__avatar {
width: 22px; height: 22px;
background: #c9a961;
color: #1c1410;
border-radius: 50%;
display: grid; place-items: center;
font: 700 11px system-ui, sans-serif;
}
```
### 06. Forest Dim
**Type:** Pure CSS
**Description:** Deep evergreen surfaces with sage accents — a calmer alternative to violet/cyan dark modes for reading-heavy interfaces.
**HTML:**
```html
◉
Garden updates
3 plants ready to harvest
◐
Soil moisture
Below threshold — water soon
```
**CSS:**
```css
.dm-forest-bg { padding: 24px; border-radius: 16px; background: #0a1612; }
.dm-forest {
background: #0e1f1a;
border: 1px solid #1a3329;
border-radius: 10px;
padding: 6px;
}
.dm-forest__row {
display: flex; gap: 12px; align-items: center;
padding: 12px 14px;
border-radius: 7px;
transition: background 0.18s;
}
.dm-forest__row:hover { background: rgba(143, 179, 163, 0.07); }
.dm-forest__row + .dm-forest__row { border-top: 1px solid #1a3329; margin-top: 4px; padding-top: 16px; }
.dm-forest__icon {
width: 28px; height: 28px;
background: rgba(143, 179, 163, 0.12);
color: #8fb3a3;
border-radius: 50%;
display: grid; place-items: center;
font-size: 13px;
flex-shrink: 0;
}
.dm-forest__body { display: flex; flex-direction: column; gap: 2px; }
.dm-forest__body b { font: 600 12px system-ui, sans-serif; color: #d6e6dd; }
.dm-forest__body span { font: 11px system-ui, sans-serif; color: #8fb3a3; }
```
### 07. Slate Stack
**Type:** Pure CSS
**Description:** Three slate tones layered to create depth without color — useful for dashboard chrome where data is the only color.
**HTML:**
```html
Quarterly revenue
Q1 2026
$248,392
+18.4% from last quarter
```
**CSS:**
```css
.dm-slate-bg { padding: 24px; border-radius: 16px; background: #0f172a; }
.dm-slate {
background: #1e293b;
border: 1px solid #334155;
border-radius: 10px;
padding: 18px 20px;
color: #f1f5f9;
}
.dm-slate__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dm-slate__title {
font: 600 12px system-ui, sans-serif;
color: #94a3b8;
letter-spacing: 0.04em;
}
.dm-slate__pill {
background: #334155;
color: #cbd5e1;
padding: 3px 10px; border-radius: 12px;
font: 600 10px ui-monospace, monospace;
}
.dm-slate__num {
font: 800 26px/1 system-ui, sans-serif;
color: #fff;
margin-bottom: 6px;
letter-spacing: -0.02em;
}
.dm-slate__delta {
font: 600 11px system-ui, sans-serif;
color: #4ade80;
}
```
### 08. Carbon Shelves
**Type:** Pure CSS
**Description:** List rows shelving against a darker rail — alternating row depth without alternating colors keeps long lists scannable.
**HTML:**
```html
api/auth.ts
api/session.ts
api/users.ts
db/schema.sql
```
**CSS:**
```css
.dm-carbon-bg { padding: 22px; border-radius: 16px; background: #0a0a10; }
.dm-carbon {
background: #14141c;
border: 1px solid #1f1f2e;
border-radius: 8px;
overflow: hidden;
}
.dm-carbon__row {
display: flex; justify-content: space-between; align-items: center;
padding: 11px 16px;
background: #14141c;
transition: background 0.15s;
}
.dm-carbon__row + .dm-carbon__row { border-top: 1px solid #1f1f2e; }
.dm-carbon__row:nth-child(even) { background: #181822; }
.dm-carbon__row:hover { background: #1f1f2e; }
.dm-carbon__name {
font: 600 12px ui-monospace, monospace;
color: #e2e8f0;
}
.dm-carbon__meta {
font: 500 10.5px ui-monospace, monospace;
color: #6b7080;
letter-spacing: 0.02em;
}
```
### 09. Onyx Ladder
**Type:** Pure CSS
**Description:** Vertical step indicator on a series of dark surfaces — each completed step glows gently, future steps stay quiet.
**HTML:**
```html
-
Account created10:42 AM
-
Email verified10:44 AM
-
Profile setupIn progress
-
Workspace readyPending
```
**CSS:**
```css
.dm-onyx-bg { padding: 24px; border-radius: 16px; background: #0a0a14; }
.dm-onyx {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 0;
background: #14141f;
border: 1px solid #1f1f30;
border-radius: 10px;
overflow: hidden;
}
.dm-onyx__step {
display: flex; align-items: center; gap: 12px;
padding: 11px 16px;
border-left: 2px solid transparent;
}
.dm-onyx__step + .dm-onyx__step { border-top: 1px solid #1f1f30; }
.dm-onyx__step b { display: block; font: 600 12px system-ui, sans-serif; color: #cbd5e1; }
.dm-onyx__step small { font: 500 10px ui-monospace, monospace; color: #6b7080; }
.dm-onyx__dot {
width: 10px; height: 10px;
border-radius: 50%;
background: #2a2a3d;
flex-shrink: 0;
}
.dm-onyx__step--done .dm-onyx__dot { background: #6366f1; }
.dm-onyx__step--done b { color: #fff; }
.dm-onyx__step--active {
background: rgba(99, 102, 241, 0.06);
border-left-color: #6366f1;
}
.dm-onyx__step--active .dm-onyx__dot {
background: #818cf8;
box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.15);
}
.dm-onyx__step--active b { color: #c7d2fe; }
```
### 10. Phosphor Card
**Type:** Pure CSS
**Description:** Card with a glowing accent line on its left edge — the kind of "now playing" highlight that draws the eye in dark dashboards.
**HTML:**
```html
● LIVE
2,341 watching
React Server Components Deep Dive
A walk through the boundaries between server and client.
```
**CSS:**
```css
.dm-phos-bg { padding: 28px; border-radius: 16px; background: #0a0a14; }
.dm-phos {
position: relative;
background: #14141f;
border: 1px solid #1f1f30;
border-radius: 10px;
padding: 16px 20px 16px 22px;
overflow: hidden;
}
.dm-phos::before {
content: '';
position: absolute; left: 0; top: 12px; bottom: 12px;
width: 3px;
background: #ec4899;
border-radius: 0 2px 2px 0;
box-shadow: 0 0 14px #ec4899, 0 0 32px rgba(236, 72, 153, 0.4);
}
.dm-phos__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dm-phos__live {
font: 700 10px ui-monospace, monospace;
color: #ec4899;
letter-spacing: 0.12em;
}
.dm-phos__count {
font: 500 10px ui-monospace, monospace;
color: #6b7080;
}
.dm-phos__title { margin: 0 0 6px; font: 700 14px/1.3 system-ui, sans-serif; color: #fff; }
.dm-phos__body { margin: 0; font: 12px/1.55 system-ui, sans-serif; color: #94a3b8; }
```
### 11. Aurora Dim
**Type:** Pure CSS
**Description:** Dark surface with a soft drifting aurora glow underneath — the aurora is heavily blurred so it never competes with content.
**HTML:**
```html
◈
Premium activated
Welcome to Aurora Pass.
```
**CSS:**
```css
.dm-aurora-bg {
position: relative; padding: 32px;
border-radius: 16px; overflow: hidden;
background: #0a0a14;
}
.dm-aurora-bg::before {
content: '';
position: absolute; inset: -20%;
background:
radial-gradient(ellipse at 30% 30%, rgba(139, 92, 246, 0.4), transparent 50%),
radial-gradient(ellipse at 70% 70%, rgba(236, 72, 153, 0.3), transparent 50%);
filter: blur(32px);
pointer-events: none;
}
.dm-aurora {
position: relative;
background: #14141f;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 14px 18px;
display: flex; align-items: center; gap: 14px;
}
.dm-aurora__icon {
width: 38px; height: 38px;
background: linear-gradient(135deg, #8b5cf6, #ec4899);
border-radius: 10px;
display: grid; place-items: center;
color: #fff;
font-size: 16px;
flex-shrink: 0;
box-shadow: 0 0 16px rgba(139, 92, 246, 0.5);
}
.dm-aurora__body { display: flex; flex-direction: column; gap: 3px; }
.dm-aurora__body b { font: 700 13px system-ui, sans-serif; color: #fff; }
.dm-aurora__body span { font: 12px system-ui, sans-serif; color: #94a3b8; }
```
### 12. Ember Pulse
**Type:** Pure CSS
**Description:** Notification badge with a warm orange glow that subtly breathes — designed for low-priority but persistent alerts.
**HTML:**
```html
Build attention needed
3 warnings · 0 errors · last run 2m ago
```
**CSS:**
```css
.dm-ember-bg { padding: 28px; border-radius: 16px; background: #0a0a10; }
.dm-ember {
background: #14141c;
border: 1px solid rgba(245, 158, 11, 0.15);
border-radius: 10px;
padding: 14px 16px;
display: flex; align-items: center; gap: 14px;
}
.dm-ember__icon {
position: relative;
width: 36px; height: 36px;
flex-shrink: 0;
display: grid; place-items: center;
}
.dm-ember__core {
width: 12px; height: 12px;
background: #f59e0b;
border-radius: 50%;
box-shadow: 0 0 12px #f59e0b, 0 0 24px rgba(245, 158, 11, 0.5);
z-index: 2;
}
.dm-ember__pulse {
position: absolute; inset: 0;
background: radial-gradient(circle, rgba(245, 158, 11, 0.5), transparent 70%);
border-radius: 50%;
animation: dm-ember-breath 2.5s ease-in-out infinite;
}
@keyframes dm-ember-breath {
0%, 100% { transform: scale(0.8); opacity: 0.4; }
50% { transform: scale(1.1); opacity: 0.8; }
}
.dm-ember__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-ember__body b { font: 600 12px system-ui, sans-serif; color: #f5f5f5; }
.dm-ember__body span { font: 11px ui-monospace, monospace; color: #6b7080; }
.dm-ember__btn {
background: transparent;
color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.3);
padding: 6px 12px; border-radius: 6px;
font: 600 11px system-ui, sans-serif; cursor: pointer;
flex-shrink: 0;
transition: background 0.18s, border-color 0.18s;
}
.dm-ember__btn:hover { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.55); }
@media (prefers-reduced-motion: reduce) { .dm-ember__pulse { animation: none; } }
```
---
## 18 CSS Divider Collections
URL: https://codefronts.com/snippets/css-dividers/
Description: 18 hand-coded CSS section-divider collections across eighteen design languages — editorial, brutalist, art deco, cyber, scientific, fantasy, retro, newspaper, playful, music, festive, corporate, sketch and more — 54 animated divider variants, each on its intended background.
Demo count: 18
### 01. Editorial Dividers
**Type:** Pure CSS
**Description:** Three animated literary section breaks — rules that grow from the centre, a slab that slams in from the left, and a label that fades up into place.
**HTML:**
```html
The light in August arrives differently than in other months — slanting through windows at an angle that makes dust particles visible.
· · ·
She had learned to read weather the way her grandmother did — not from forecasts but from the quality of morning silence.
Memory operates on its own calendar — a smell, a slant of afternoon light, and suddenly it is fifteen years ago.
continued overleaf
The village had grown slowly, the way most things of permanence grow: without announcement, without knowing itself.
```
**CSS:**
```css
@keyframes div-ed-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-ed-rot { from { transform: scale(0) rotate(-210deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes div-ed-fade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes div-ed-slam { from { transform: translateX(-110%); } to { transform: translateX(0); } }
.div-editorial-surface {
background: #f4efe7;
padding: 36px 40px;
border-radius: 12px;
}
.div-editorial-text {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
line-height: 1.88;
color: #3c3830;
margin: 0;
}
/* v1 — rules grow from centre, mark rotates in */
.div-editorial-v1 {
display: flex;
align-items: center;
gap: 18px;
margin: 32px 0;
}
.div-editorial-v1::before,
.div-editorial-v1::after {
content: '';
flex: 1;
height: 1px;
background: #b5ad9e;
animation: div-ed-grow 0.9s cubic-bezier(.16,1,.3,1) both;
}
.div-editorial-v1::before { transform-origin: right; }
.div-editorial-v1::after { transform-origin: left; animation-delay: 0.05s; }
.div-editorial-v1 em {
font-family: Georgia, serif;
font-style: normal;
font-size: 18px;
letter-spacing: 0.6em;
color: #928878;
padding-right: 0.4em;
animation: div-ed-rot 0.7s cubic-bezier(.34,1.56,.64,1) 0.72s both;
}
/* v2 — bold rule slams in, hairline grows under it */
.div-editorial-v2 { margin: 32px 0; overflow: hidden; }
.div-editorial-v2 i:nth-child(1) {
display: block;
height: 4px;
background: #2c2820;
animation: div-ed-slam 0.65s cubic-bezier(.18,0,.05,1) 0.18s both;
}
.div-editorial-v2 i:nth-child(2) {
display: block;
height: 1px;
margin-top: 4px;
background: #c0b8a8;
transform-origin: left;
animation: div-ed-grow 0.7s cubic-bezier(.16,1,.3,1) 0.5s both;
}
/* v3 — rules grow from centre, label fades up */
.div-editorial-v3 {
display: flex;
align-items: center;
gap: 22px;
margin: 32px 0;
}
.div-editorial-v3::before,
.div-editorial-v3::after {
content: '';
flex: 1;
height: 0.5px;
animation: div-ed-grow 0.8s cubic-bezier(.16,1,.3,1) 0.3s both;
}
.div-editorial-v3::before { background: linear-gradient(to right, transparent, #a09888); transform-origin: right; }
.div-editorial-v3::after { background: linear-gradient(to left, transparent, #a09888); transform-origin: left; animation-delay: 0.35s; }
.div-editorial-v3 span {
flex-shrink: 0;
font-family: Georgia, serif;
font-style: italic;
font-size: 11px;
letter-spacing: 0.18em;
color: #857b6e;
white-space: nowrap;
animation: div-ed-fade 0.5s ease 0.82s both;
}
@media (prefers-reduced-motion: reduce) {
.div-editorial-v1::before, .div-editorial-v1::after, .div-editorial-v1 em,
.div-editorial-v2 i, .div-editorial-v3::before, .div-editorial-v3::after,
.div-editorial-v3 span { animation: none; }
}
```
### 02. Brutalist Dividers
**Type:** Pure CSS
**Description:** Three raw breaks that arrive with force — a slab slamming in from the left, a hatch band wiping into view, and color blocks popping up in sequence.
**HTML:**
```html
CONTEMPORARY ART FOUNDATION — ANNUAL REPORT 2024. Total acquisitions: 847. Public programs attended: 12,400.
The question of what constitutes public space has never been more contested — streets, plazas, parks, all subject to restriction.
Architecture is political. Every building encodes a value system — a vision of who belongs and who does not.
WE BUILD. WE DEMOLISH. WE BUILD AGAIN. The city is its own argument — perpetually unresolved.
```
**CSS:**
```css
@keyframes div-bru-slam { from { transform: translateX(-110%); } to { transform: translateX(0); } }
@keyframes div-bru-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } }
@keyframes div-bru-pop { 0% { transform: scaleY(0); opacity: 0; } 65% { transform: scaleY(1.15); opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } }
.div-brutalist-surface {
background: #ffffff;
padding: 36px 40px;
border-radius: 12px;
}
.div-brutalist-text {
font-family: "Courier New", Courier, monospace;
font-size: 13px;
line-height: 1.78;
color: #111111;
margin: 0;
}
/* v1 — solid slab slams in */
.div-brutalist-v1 {
position: relative;
height: 18px;
margin: 32px 0;
background: #111111;
animation: div-bru-slam 0.52s cubic-bezier(.18,0,.04,1) 0.1s both;
}
.div-brutalist-v1::after {
content: '///';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
font-family: "Courier New", monospace;
font-size: 9px;
letter-spacing: 5px;
color: #ffffff;
}
/* v2 — diagonal hatch wipes in */
.div-brutalist-v2 {
position: relative;
height: 22px;
margin: 32px 0;
animation: div-bru-wipe 0.72s cubic-bezier(.16,1,.3,1) 0.22s both;
}
.div-brutalist-v2::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-60deg,
#111111 0, #111111 3px,
transparent 3px, transparent 11px
);
}
.div-brutalist-v2::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to right,
#ffffff 0, transparent 40px,
transparent calc(100% - 40px), #ffffff 100%
);
}
/* v3 — color blocks pop up in sequence */
.div-brutalist-v3 {
display: flex;
gap: 2px;
height: 10px;
margin: 32px 0;
}
.div-brutalist-v3 span {
transform-origin: bottom;
animation: div-bru-pop 0.42s cubic-bezier(.34,1.56,.64,1) both;
}
.div-brutalist-v3 span:nth-child(1) { flex: 4; background: #111111; animation-delay: 0.26s; }
.div-brutalist-v3 span:nth-child(2) { flex: 1; background: #e6351f; animation-delay: 0.36s; }
.div-brutalist-v3 span:nth-child(3) { flex: 2; background: #111111; animation-delay: 0.42s; }
.div-brutalist-v3 span:nth-child(4) { flex: 1; background: #f2c12e; animation-delay: 0.48s; }
.div-brutalist-v3 span:nth-child(5) { flex: 4; background: #111111; animation-delay: 0.53s; }
@media (prefers-reduced-motion: reduce) {
.div-brutalist-v1, .div-brutalist-v2, .div-brutalist-v3 span { animation: none; }
}
```
### 03. Art Deco Dividers
**Type:** Pure CSS
**Description:** Three gilded breaks — gold lines that draw themselves toward a diamond, a shimmering micro-diamond band, and a chevron fan that springs into place.
**HTML:**
```html
The Grand Palais reopened its gilded doors in the autumn of 1922, its iron-and-glass vault catching the afternoon light.
She wore a dress the colour of champagne with a hem that ended precisely at the knee — scandalous only three years prior.
The jazz arrived from New Orleans by way of Harlem, crossing the Atlantic in the trunks of musicians.
▴▴▴
Everything gleamed in those years — chrome fittings, lacquered surfaces, pomaded hair in the lamplight.
```
**CSS:**
```css
@keyframes div-deco-draw { to { stroke-dashoffset: 0; } }
@keyframes div-deco-gem { from { opacity: 0; transform: scale(0) rotate(-180deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes div-deco-fade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes div-deco-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-deco-fan { from { transform: scale(0) rotate(-100deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes div-deco-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.div-deco-surface {
background: #0d1018;
padding: 36px 40px;
border-radius: 12px;
}
.div-deco-text {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
line-height: 1.88;
color: #a0988a;
margin: 0;
}
/* v1 — gold lines draw toward a diamond */
.div-deco-v1 { margin: 32px 0; }
.div-deco-v1 svg { display: block; width: 100%; height: 24px; }
.div-deco-l { animation: div-deco-draw 0.88s cubic-bezier(.16,1,.3,1) both; }
.div-deco-ll1 { stroke-dasharray: 198; stroke-dashoffset: 198; }
.div-deco-ll2 { stroke-dasharray: 174; stroke-dashoffset: 174; animation-delay: 0.09s; }
.div-deco-rl1 { stroke-dasharray: 198; stroke-dashoffset: 198; animation-delay: 0.04s; }
.div-deco-rl2 { stroke-dasharray: 174; stroke-dashoffset: 174; animation-delay: 0.13s; }
.div-deco-gem {
transform-box: fill-box;
transform-origin: center;
animation: div-deco-gem 0.52s cubic-bezier(.34,1.56,.64,1) 0.73s both;
}
/* v2 — micro-diamond band with a shimmer sweep */
.div-deco-v2 {
position: relative;
margin: 32px 0;
animation: div-deco-fade 0.55s ease 0.18s both;
}
.div-deco-v2::before {
content: '';
display: block;
height: 6px;
border-top: 1px solid #c9a84c;
border-bottom: 1px solid #c9a84c;
}
.div-deco-v2::after {
content: '◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆';
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
overflow: hidden;
white-space: nowrap;
text-align: center;
font-size: 6px;
letter-spacing: 2px;
background: linear-gradient(90deg, rgba(201,168,76,.1) 0%, rgba(201,168,76,.9) 42%, rgba(255,220,140,1) 50%, rgba(201,168,76,.9) 58%, rgba(201,168,76,.1) 100%);
background-size: 300% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: div-deco-shimmer 2.8s linear infinite;
}
/* v3 — chevron fan springs in between growing lines */
.div-deco-v3 {
display: flex;
align-items: center;
gap: 10px;
margin: 32px 0;
}
.div-deco-v3::before,
.div-deco-v3::after {
content: '';
flex: 1;
height: 1px;
animation: div-deco-grow 0.7s cubic-bezier(.16,1,.3,1) 0.48s both;
}
.div-deco-v3::before { background: linear-gradient(to right, transparent, #c9a84c); transform-origin: right; }
.div-deco-v3::after { background: linear-gradient(to left, transparent, #c9a84c); transform-origin: left; animation-delay: 0.52s; }
.div-deco-fan {
flex-shrink: 0;
font-size: 10px;
letter-spacing: 2px;
color: #c9a84c;
animation: div-deco-fan 0.6s cubic-bezier(.34,1.56,.64,1) 0.1s both;
}
@media (prefers-reduced-motion: reduce) {
.div-deco-l { animation: none; stroke-dashoffset: 0; }
.div-deco-gem, .div-deco-v2, .div-deco-v3::before, .div-deco-v3::after, .div-deco-fan { animation: none; }
.div-deco-v2::after { animation: none; }
}
```
### 04. Organic Dividers
**Type:** Pure CSS
**Description:** Three nature-drawn breaks — SVG waves that draw stroke by stroke, leaf pods that spring open, and a scallop edge that fills as its outline traces.
**HTML:**
```html
In the understory of the beech forest, an entire civilization of fungi connects root system to root system.
Rain arrives not as individual drops but as a shift in atmospheric attention — the trees lean, the birds fall silent.
Seeds travel improbable distances — a dandelion's parachute can carry its cargo fourteen kilometres.
The forest is not silent — it is thinking at a frequency we have not learned to hear.
```
**CSS:**
```css
@keyframes div-org-draw { to { stroke-dashoffset: 0; } }
@keyframes div-org-leaf { from { transform: rotate(45deg) scale(0); } 70% { transform: rotate(45deg) scale(1.2); } to { transform: rotate(45deg) scale(1); } }
@keyframes div-org-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-org-fadein { to { opacity: 1; } }
.div-organic-surface {
background: #eaede6;
padding: 36px 40px;
border-radius: 12px;
}
.div-organic-text {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
line-height: 1.88;
color: #3d4438;
margin: 0;
}
/* v1 — dual SVG waves draw in */
.div-organic-v1 { margin: 32px 0; }
.div-organic-v1 svg { display: block; width: 100%; height: 28px; }
.div-organic-w1,
.div-organic-w2 {
stroke-dasharray: 1350;
stroke-dashoffset: 1350;
animation: div-org-draw 1.4s cubic-bezier(.16,1,.3,1) both;
}
.div-organic-w2 { animation-delay: 0.16s; }
/* v2 — rotated leaf pods spring open */
.div-organic-v2 {
display: flex;
align-items: center;
margin: 32px 0;
}
.div-organic-v2::before,
.div-organic-v2::after {
content: '';
flex: 1;
height: 0.5px;
background: #7a8c70;
animation: div-org-grow 0.8s cubic-bezier(.16,1,.3,1) 0.48s both;
}
.div-organic-v2::before { transform-origin: right; }
.div-organic-v2::after { transform-origin: left; animation-delay: 0.53s; }
.div-organic-pods {
display: flex;
align-items: center;
padding: 0 16px;
}
.div-organic-pods i {
display: block;
border-radius: 50% 0;
animation: div-org-leaf 0.52s cubic-bezier(.34,1.56,.64,1) both;
}
.div-organic-pods i:nth-child(1) { width: 7px; height: 7px; background: rgba(106,140,96,.55); animation-delay: 0.17s; }
.div-organic-pods i:nth-child(2) { width: 10px; height: 10px; margin: 0 5px; background: #4a7040; animation-delay: 0.07s; }
.div-organic-pods i:nth-child(3) { width: 7px; height: 7px; background: rgba(106,140,96,.55); animation-delay: 0.25s; }
/* v3 — scallop outline traces, fill fades in */
.div-organic-v3 { margin: 32px 0; }
.div-organic-v3 svg { display: block; width: 100%; height: 18px; }
.div-organic-sf {
opacity: 0;
animation: div-org-fadein 0.65s ease 0.95s both;
}
.div-organic-ss {
stroke-dasharray: 1300;
stroke-dashoffset: 1300;
animation: div-org-draw 1.25s cubic-bezier(.16,1,.3,1) 0.14s both;
}
@media (prefers-reduced-motion: reduce) {
.div-organic-w1, .div-organic-w2, .div-organic-ss { animation: none; stroke-dashoffset: 0; }
.div-organic-sf { animation: none; opacity: 1; }
.div-organic-v2::before, .div-organic-v2::after, .div-organic-pods i { animation: none; }
.div-organic-pods i { transform: rotate(45deg); }
}
```
### 05. Cyber Dividers
**Type:** Pure CSS
**Description:** Three terminal-styled breaks — a beam scanning a track, a dot-matrix grid with a pulse bar growing across it, and a system tag that types itself in.
**HTML:**
```html
> ESTABLISHING SECURE CHANNEL... [OK]
> SESSION_ID: 0x7FA3-C891-02BE
The attack surface of a modern data center is not its perimeter — that concept is meaningless now.
> ANOMALY DETECTED: 847 req/sec from 10.0.14.x
> AUTO-THROTTLE: ENGAGED
[ SYSTEM NOMINAL ]
Cryptography is applied mathematics in service of trust — the implementations are where the problems live.
```
**CSS:**
```css
@keyframes div-cy-beam { from { left: -22%; } to { left: 122%; } }
@keyframes div-cy-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-cy-type { from { max-width: 0; opacity: 0; } 1% { opacity: 1; } to { max-width: 220px; opacity: 1; } }
@keyframes div-cy-glitch { 0%,87%,100% { transform: none; } 88% { transform: translateX(3px); } 89% { transform: translateX(-2px); } 90% { transform: none; } 94% { transform: translateX(1px); } 95% { transform: none; } }
.div-cyber-surface {
background: #060a0f;
padding: 36px 40px;
border-radius: 12px;
}
.div-cyber-text {
font-family: "Courier New", Courier, monospace;
font-size: 12.5px;
line-height: 1.78;
color: #2a5848;
margin: 0;
}
/* v1 — scanning beam over a faint track */
.div-cyber-v1 {
position: relative;
height: 2px;
margin: 38px 0;
background: rgba(0, 245, 200, 0.1);
overflow: visible;
}
.div-cyber-v1::before {
content: '';
position: absolute;
top: -5px;
left: -22%;
width: 22%;
height: 12px;
background: linear-gradient(90deg, transparent, rgba(0,245,200,0.95), transparent);
animation: div-cy-beam 2.1s linear infinite;
}
.div-cyber-v1::after {
content: '// 0x4F2A·C8';
position: absolute;
right: 0;
top: -15px;
font-family: "Courier New", monospace;
font-size: 8.5px;
letter-spacing: 0.08em;
color: rgba(0, 245, 200, 0.35);
}
/* v2 — dot-matrix grid, pulse bar grows across */
.div-cyber-v2 {
position: relative;
height: 20px;
margin: 38px 0;
display: flex;
align-items: center;
}
.div-cyber-v2::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle, rgba(0,245,200,0.5) 1px, transparent 1px) 0 0 / 12px 20px;
}
.div-cyber-bar {
position: absolute;
left: 0;
right: 0;
top: 8px;
height: 4px;
background: linear-gradient(90deg, transparent, rgba(0,245,200,0.3), transparent);
transform-origin: center;
animation: div-cy-grow 0.85s cubic-bezier(.16,1,.3,1) 0.44s both;
}
/* v3 — system tag types itself in, then glitches */
.div-cyber-v3 {
display: flex;
align-items: center;
gap: 14px;
margin: 38px 0;
}
.div-cyber-v3::before,
.div-cyber-v3::after {
content: '';
flex: 1;
height: 1px;
animation: div-cy-grow 0.6s ease 0.68s both;
}
.div-cyber-v3::before { background: linear-gradient(90deg, rgba(0,245,200,.04), rgba(0,245,200,.4)); transform-origin: right; }
.div-cyber-v3::after { background: linear-gradient(270deg, rgba(0,245,200,.04), rgba(0,245,200,.4)); transform-origin: left; animation-delay: 0.73s; }
.div-cyber-tag {
flex-shrink: 0;
font-family: "Courier New", monospace;
font-size: 9.5px;
letter-spacing: 0.2em;
color: rgba(0, 245, 200, 0.8);
white-space: nowrap;
overflow: hidden;
max-width: 0;
opacity: 0;
animation: div-cy-type 0.65s steps(17,end) 0.14s forwards,
div-cy-glitch 5s ease 2.2s infinite;
}
@media (prefers-reduced-motion: reduce) {
.div-cyber-v1::before { animation: none; left: calc(50% - 11%); }
.div-cyber-bar, .div-cyber-v3::before, .div-cyber-v3::after { animation: none; }
.div-cyber-tag { animation: none; max-width: 220px; opacity: 1; }
}
```
### 06. Luxury Dividers
**Type:** Pure CSS
**Description:** Three restrained gold breaks — a hairline that draws open then shimmers, three pearls dropping into place, and a double rule that separates with a quiet breath.
**HTML:**
```html
The maison has existed in its current form since eighteen forty-two, though its predecessor occupied the same address for three decades prior.
Each piece requires between sixty and two hundred hours of work. The stitching is invisible — this is not an accident.
Materials are sourced according to a protocol established in eighteen ninety-one and revised only once.
There is no waiting list. There is a conversation, and then there is time — the object arrives when it is ready.
```
**CSS:**
```css
@keyframes div-lux-open { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-lux-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes div-lux-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-lux-drop { from { transform: scale(0) translateY(-8px); opacity: 0; } 60% { transform: scale(1.25) translateY(0); opacity: 1; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes div-lux-up { from { opacity: 0; transform: translateY(2.5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes div-lux-down { from { opacity: 0; transform: translateY(-2.5px); } to { opacity: 1; transform: translateY(0); } }
.div-luxury-surface {
background: #171310;
padding: 36px 40px;
border-radius: 12px;
}
.div-luxury-text {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
line-height: 1.95;
letter-spacing: 0.02em;
color: #988e70;
margin: 0;
}
/* v1 — hairline draws open, then shimmers */
.div-luxury-v1 {
height: 1px;
margin: 34px 0;
transform: scaleX(0);
transform-origin: center;
background: linear-gradient(90deg, transparent, #d4af76 20%, #f5e4b0 50%, #d4af76 80%, transparent);
background-size: 200% auto;
animation: div-lux-open 0.95s cubic-bezier(.16,1,.3,1) 0.1s forwards,
div-lux-shimmer 3s linear 1.15s infinite;
}
/* v2 — three pearls drop in between vanishing flanks */
.div-luxury-v2 {
display: flex;
align-items: center;
margin: 34px 0;
}
.div-luxury-v2::before,
.div-luxury-v2::after {
content: '';
flex: 1;
height: 0.5px;
background: rgba(212, 175, 118, 0.22);
animation: div-lux-grow 0.8s cubic-bezier(.16,1,.3,1) 0.42s both;
}
.div-luxury-v2::before { transform-origin: right; }
.div-luxury-v2::after { transform-origin: left; animation-delay: 0.47s; }
.div-luxury-dots {
display: flex;
align-items: center;
gap: 14px;
padding: 0 20px;
}
.div-luxury-dots i {
display: block;
border-radius: 50%;
background: #d4af76;
animation: div-lux-drop 0.52s cubic-bezier(.34,1.56,.64,1) both;
}
.div-luxury-dots i:nth-child(1) { width: 3px; height: 3px; background: rgba(212,175,118,.48); animation-delay: 0.07s; }
.div-luxury-dots i:nth-child(2) { width: 6px; height: 6px; animation-delay: 0.18s; }
.div-luxury-dots i:nth-child(3) { width: 3px; height: 3px; background: rgba(212,175,118,.48); animation-delay: 0.28s; }
/* v3 — double rule separates with a quiet breath */
.div-luxury-v3 {
position: relative;
height: 5px;
margin: 34px 0;
}
.div-luxury-v3 i:nth-child(1) {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 0.5px;
background: linear-gradient(90deg, transparent, rgba(212,175,118,.65), transparent);
animation: div-lux-up 0.75s cubic-bezier(.16,1,.3,1) 0.28s both;
}
.div-luxury-v3 i:nth-child(2) {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0.5px;
background: linear-gradient(90deg, transparent, rgba(212,175,118,.32), transparent);
animation: div-lux-down 0.75s cubic-bezier(.16,1,.3,1) 0.28s both;
}
@media (prefers-reduced-motion: reduce) {
.div-luxury-v1 { animation: none; transform: scaleX(1); }
.div-luxury-v2::before, .div-luxury-v2::after, .div-luxury-dots i,
.div-luxury-v3 i { animation: none; }
}
```
### 07. Scientific Dividers
**Type:** Pure CSS
**Description:** Three precise, instrument-styled breaks — a measurement ruler with a section marker, a connection-node line, and a flip-in chapter label between calibrated rules.
**HTML:**
```html
Fluorescence microscopy revealed distinct subcellular compartmentalization. Statistical significance was assessed across three independent biological replicates (n=847).
§ 2.4
Protein complex formation was confirmed via co-immunoprecipitation followed by tandem mass spectrometry, with peak thresholds set at 3σ above baseline.
Temperature-dependent conformational changes were observed across all conditions, with a thermal denaturation midpoint of 68.4°C (±0.7).
§ 3.1 — RESULTS
Gene expression profiles were analyzed across 12 developmental timepoints; hierarchical clustering revealed three distinct expression modules.
```
**CSS:**
```css
@keyframes div-sci-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-sci-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes div-sci-dot { from { transform: scale(0); } 65% { transform: scale(1.3); } to { transform: scale(1); } }
@keyframes div-sci-flip { from { transform: perspective(300px) rotateX(90deg); opacity: 0; } to { transform: perspective(300px) rotateX(0); opacity: 1; } }
@keyframes div-sci-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } }
.div-sci-surface {
background: #f5f7fb;
padding: 36px 40px;
border-radius: 12px;
}
.div-sci-text {
font-family: system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: 1.78;
color: #1e2533;
margin: 0;
}
/* v1 — measurement ruler with a section marker */
.div-sci-v1 {
position: relative;
height: 26px;
margin: 32px 0;
}
.div-sci-ticks {
position: absolute;
bottom: 8px;
left: 0;
right: 0;
height: 18px;
/* major tick every 64px, minor every 16px — pure-CSS ruler */
background:
repeating-linear-gradient(to right, #3060b8 0 1.5px, transparent 1.5px 64px),
repeating-linear-gradient(to right, rgba(48,96,184,0.35) 0 1px, transparent 1px 16px);
background-size: 100% 18px, 100% 7px;
background-position: bottom, bottom;
background-repeat: repeat-x;
transform-origin: left;
animation: div-sci-wipe 0.9s cubic-bezier(.16,1,.3,1) both;
}
.div-sci-rbar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1.5px;
background: #3060b8;
transform-origin: left;
animation: div-sci-grow 0.8s cubic-bezier(.16,1,.3,1) 0.56s both;
}
.div-sci-rlbl {
position: absolute;
right: 0;
bottom: 7px;
font-family: "Courier New", monospace;
font-size: 10px;
letter-spacing: 0.12em;
color: #3060b8;
animation: div-sci-fade 0.4s ease 0.96s both;
}
/* v2 — connection-node line */
.div-sci-v2 {
position: relative;
height: 14px;
margin: 32px 0;
}
.div-sci-dline {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #dde4f0;
transform-origin: left;
animation: div-sci-grow 0.6s ease 0.08s both;
}
.div-sci-ddots {
position: absolute;
inset: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.div-sci-ddots i {
width: 8px;
height: 8px;
border-radius: 50%;
border: 1.5px solid #3060b8;
background: #f5f7fb;
animation: div-sci-dot 0.4s cubic-bezier(.34,1.56,.64,1) both;
}
.div-sci-ddots i:nth-child(1) { animation-delay: 0.28s; }
.div-sci-ddots i:nth-child(2) { animation-delay: 0.4s; }
.div-sci-ddots i:nth-child(3) { animation-delay: 0.52s; border-color: #c8361a; background: #fff8f6; }
.div-sci-ddots i:nth-child(4) { animation-delay: 0.64s; }
.div-sci-ddots i:nth-child(5) { animation-delay: 0.76s; }
/* v3 — flip-in chapter label */
.div-sci-v3 {
display: flex;
align-items: center;
gap: 16px;
margin: 32px 0;
}
.div-sci-rule {
flex: 1;
height: 4px;
border-top: 1px solid #dde4f0;
border-bottom: 1px solid #c8d4ec;
animation: div-sci-grow 0.7s cubic-bezier(.16,1,.3,1) 0.4s both;
}
.div-sci-v3 .div-sci-rule:first-child { transform-origin: right; }
.div-sci-v3 .div-sci-rule:last-child { transform-origin: left; animation-delay: 0.45s; }
.div-sci-v3 b {
flex-shrink: 0;
font-family: "Courier New", monospace;
font-size: 10.5px;
font-weight: 400;
letter-spacing: 0.14em;
color: #3060b8;
white-space: nowrap;
animation: div-sci-flip 0.5s cubic-bezier(.34,1.56,.64,1) 0.1s both;
}
@media (prefers-reduced-motion: reduce) {
.div-sci-ticks, .div-sci-rbar, .div-sci-rlbl, .div-sci-dline,
.div-sci-ddots i, .div-sci-rule, .div-sci-v3 b { animation: none; }
}
```
### 08. Romantic Dividers
**Type:** Pure CSS
**Description:** Three soft, hand-drawn breaks — a flowering vine that draws itself leaf by leaf, a petal ornament, and a trio of diamonds set between blush rules.
**HTML:**
```html
They had met, improbably, at a florist's shop on a Tuesday morning in November — he returning peonies that had died too quickly.
The invitation had arrived on heavy cream stock, hand-addressed in ink the colour of dried roses.
❀
❦
❀
In the old country, weddings lasted three days and left everyone changed — not just the couple but the witnesses too.
The flowers were white roses mixed with ranunculus and a single stem of something she couldn't name.
```
**CSS:**
```css
@keyframes div-rom-draw { to { stroke-dashoffset: 0; } }
@keyframes div-rom-leaf { to { opacity: 1; } }
@keyframes div-rom-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-rom-pop { from { transform: scale(0); } 55% { transform: scale(1.25); } to { transform: scale(1); } }
@keyframes div-rom-gem { from { transform: rotate(45deg) scale(0); } 65% { transform: rotate(45deg) scale(1.3); } to { transform: rotate(45deg) scale(1); } }
.div-rom-surface {
background: #fdf5ed;
padding: 36px 40px;
border-radius: 12px;
}
.div-rom-text {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
line-height: 1.92;
color: #4a3728;
margin: 0;
}
/* v1 — flowering vine draws itself */
.div-rom-v1 { margin: 32px 0; }
.div-rom-v1 svg { display: block; width: 100%; height: 32px; }
.div-rom-vine {
stroke-dasharray: 320;
stroke-dashoffset: 320;
animation: div-rom-draw 1.25s cubic-bezier(.16,1,.3,1) both;
}
.div-rom-rv { animation-delay: 0.05s; }
.div-rom-lf {
opacity: 0;
animation: div-rom-leaf 0.35s ease both;
animation-delay: var(--ld, 0.65s);
}
/* v2 — petal ornament */
.div-rom-v2 {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin: 32px 0;
position: relative;
}
.div-rom-v2::before,
.div-rom-v2::after {
content: '';
position: absolute;
top: 50%;
width: calc(50% - 40px);
height: 0.5px;
animation: div-rom-grow 0.8s cubic-bezier(.16,1,.3,1) 0.42s both;
}
.div-rom-v2::before { left: 0; background: linear-gradient(to right, transparent, #c4826a); transform-origin: right; }
.div-rom-v2::after { right: 0; background: linear-gradient(to left, transparent, #c4826a); transform-origin: left; animation-delay: 0.47s; }
.div-rom-petal {
color: #c4826a;
animation: div-rom-pop 0.52s cubic-bezier(.34,1.56,.64,1) both;
}
.div-rom-p1 { font-size: 9px; animation-delay: 0.08s; }
.div-rom-p2 { font-size: 15px; animation-delay: 0.17s; }
.div-rom-p3 { font-size: 9px; animation-delay: 0.25s; }
/* v3 — three diamonds between blush rules */
.div-rom-v3 {
display: flex;
align-items: center;
margin: 32px 0;
}
.div-rom-v3::before,
.div-rom-v3::after {
content: '';
flex: 1;
height: 0.5px;
background: #d4a898;
animation: div-rom-grow 0.8s cubic-bezier(.16,1,.3,1) 0.4s both;
}
.div-rom-v3::before { transform-origin: right; }
.div-rom-v3::after { transform-origin: left; animation-delay: 0.45s; }
.div-rom-gems {
display: flex;
align-items: center;
gap: 9px;
padding: 0 16px;
}
.div-rom-gems i {
display: block;
width: 7px;
height: 7px;
background: #c4826a;
animation: div-rom-gem 0.45s cubic-bezier(.34,1.56,.64,1) both;
}
.div-rom-gems i:nth-child(1) { animation-delay: 0.17s; }
.div-rom-gems i:nth-child(2) { width: 11px; height: 11px; animation-delay: 0.08s; }
.div-rom-gems i:nth-child(3) { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
.div-rom-vine { animation: none; stroke-dashoffset: 0; }
.div-rom-lf { animation: none; opacity: 1; }
.div-rom-v2::before, .div-rom-v2::after, .div-rom-petal,
.div-rom-v3::before, .div-rom-v3::after { animation: none; }
.div-rom-gems i { animation: none; transform: rotate(45deg); }
}
```
### 09. Fashion Dividers
**Type:** Pure CSS
**Description:** Three editorial runway breaks — a slamming black look-number bar, a letter-spaced caption between rules, and a burn-in collection tag.
**HTML:**
```html
The collection arrives in silence. No music, no commentary — just footsteps on polished concrete and the soft percussion of fabric.
— 14 —
She believes silhouette is the only truth a garment can tell. Everything else — colour, texture — is opinion.
FEATURE
The atelier occupies four floors of a building that has stood on this street since 1891. The lift still requires an operator.
COLLECTION · AUTUMN · 2025
Fit is the argument. A jacket that fits correctly doesn't announce itself — it becomes invisible.
```
**CSS:**
```css
@keyframes div-fa-slam { from { transform: translateX(-110%); } to { transform: translateX(0); } }
@keyframes div-fa-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-fa-spread { from { letter-spacing: -0.2em; opacity: 0; } to { letter-spacing: 0.35em; opacity: 1; } }
@keyframes div-fa-burn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0% 0); } }
.div-fashion-surface {
background: #ffffff;
padding: 36px 40px;
border-radius: 12px;
}
.div-fashion-text {
font-family: system-ui, -apple-system, Arial, sans-serif;
font-size: 14px;
line-height: 1.72;
letter-spacing: 0.01em;
color: #000000;
margin: 0;
}
/* v1 — slamming look-number bar */
.div-fashion-v1 {
margin: 32px 0;
overflow: hidden;
}
.div-fashion-v1 span {
display: flex;
align-items: center;
justify-content: flex-end;
height: 20px;
padding-right: 16px;
background: #000000;
font-family: system-ui, sans-serif;
font-size: 9px;
font-weight: 400;
letter-spacing: 0.3em;
color: #ffffff;
animation: div-fa-slam 0.5s cubic-bezier(.18,0,.04,1) 0.1s both;
}
/* v2 — letter-spaced caption between rules */
.div-fashion-v2 { margin: 32px 0; }
.div-fashion-u {
display: block;
height: 2px;
background: #000000;
transform-origin: left;
animation: div-fa-grow 0.58s cubic-bezier(.18,0,.04,1) both;
}
.div-fashion-d {
display: block;
height: 1px;
background: #000000;
transform-origin: left;
animation: div-fa-grow 0.58s cubic-bezier(.18,0,.04,1) 0.35s both;
}
.div-fashion-cap {
display: flex;
justify-content: center;
margin: 7px 0;
overflow: hidden;
font-family: system-ui, sans-serif;
font-size: 9px;
font-weight: 400;
letter-spacing: 0.35em;
color: #000000;
animation: div-fa-spread 0.6s cubic-bezier(.16,1,.3,1) 0.18s both;
}
/* v3 — burn-in collection tag */
.div-fashion-v3 {
margin: 32px 0;
padding: 7px 0;
border-top: 1.5px solid #000000;
border-bottom: 1.5px solid #000000;
font-family: system-ui, sans-serif;
font-size: 8.5px;
letter-spacing: 0.38em;
text-align: center;
color: #777777;
animation: div-fa-burn 0.55s cubic-bezier(.16,1,.3,1) 0.15s both;
}
@media (prefers-reduced-motion: reduce) {
.div-fashion-v1 span, .div-fashion-u, .div-fashion-d,
.div-fashion-cap, .div-fashion-v3 { animation: none; }
}
```
### 10. Fantasy Dividers
**Type:** Pure CSS
**Description:** Three arcane breaks — a row of runes glowing into life, gold lines that draw toward a diamond sigil, and a wiping chain rule.
**HTML:**
```html
Before the age of reason came the age of inscription — when words were not merely spoken but carved into stone and oak.
ᚠᚨᚷᛁᛟ
◆
ᛗᚱᛞᛚᚾ
The tome had been sealed with a wax impression bearing an insignia no living archivist could identify.
Every ward the elder cast required a physical anchor — a mark burned into wood, pressed into clay, scratched into the threshold.
⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓
The knight had ridden three days without water before arriving at the garrison well — only to find it sealed with a sigil.
```
**CSS:**
```css
@keyframes div-fan-glow { 0% { opacity: 0; } 35% { opacity: 1; color: #ffe07a; } 100% { opacity: 1; color: #c4841c; } }
@keyframes div-fan-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-fan-draw { to { stroke-dashoffset: 0; } }
@keyframes div-fan-sigil { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes div-fan-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } }
.div-fantasy-surface {
background: #17140e;
padding: 36px 40px;
border-radius: 12px;
}
.div-fantasy-text {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
line-height: 1.88;
color: #c9ba9a;
margin: 0;
}
/* v1 — runes glow into life */
.div-fantasy-v1 { margin: 32px 0; }
.div-fantasy-runes {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 9px;
}
.div-fantasy-runes > span {
font-family: Georgia, serif;
font-size: 12px;
color: #c4841c;
animation: div-fan-glow 0.5s ease both;
}
.div-fantasy-runes > span:nth-child(1) { animation-delay: 0.05s; }
.div-fantasy-runes > span:nth-child(2) { animation-delay: 0.13s; }
.div-fantasy-runes > span:nth-child(3) { animation-delay: 0.21s; }
.div-fantasy-runes > span:nth-child(4) { animation-delay: 0.29s; }
.div-fantasy-runes > span:nth-child(5) { animation-delay: 0.37s; }
.div-fantasy-runes > span:nth-child(6) { animation-delay: 0.45s; font-size: 7px; }
.div-fantasy-runes > span:nth-child(7) { animation-delay: 0.53s; }
.div-fantasy-runes > span:nth-child(8) { animation-delay: 0.61s; }
.div-fantasy-runes > span:nth-child(9) { animation-delay: 0.69s; }
.div-fantasy-runes > span:nth-child(10) { animation-delay: 0.77s; }
.div-fantasy-runes > span:nth-child(11) { animation-delay: 0.85s; }
.div-fantasy-bar {
display: block;
height: 0.5px;
background: linear-gradient(90deg, transparent, #c4841c 30%, #c4841c 70%, transparent);
transform-origin: center;
animation: div-fan-grow 0.8s cubic-bezier(.16,1,.3,1) 0.9s both;
}
/* v2 — gold lines draw toward a sigil */
.div-fantasy-v2 { margin: 32px 0; }
.div-fantasy-v2 svg { display: block; width: 100%; height: 24px; }
.div-fantasy-l { animation: div-fan-draw 0.9s cubic-bezier(.16,1,.3,1) both; }
.div-fantasy-l1 { stroke-dasharray: 214; stroke-dashoffset: 214; }
.div-fantasy-l2 { stroke-dasharray: 186; stroke-dashoffset: 186; animation-delay: 0.09s; }
.div-fantasy-r1 { stroke-dasharray: 214; stroke-dashoffset: 214; animation-delay: 0.04s; }
.div-fantasy-r2 { stroke-dasharray: 186; stroke-dashoffset: 186; animation-delay: 0.13s; }
.div-fantasy-sigil {
transform-box: fill-box;
transform-origin: center;
animation: div-fan-sigil 0.52s cubic-bezier(.34,1.56,.64,1) 0.75s both;
}
/* v3 — wiping chain rule */
.div-fantasy-v3 {
margin: 32px 0;
overflow: hidden;
}
.div-fantasy-chain {
display: block;
font-family: "Courier New", monospace;
font-size: 10px;
letter-spacing: 2px;
color: #c4841c;
opacity: 0.7;
white-space: nowrap;
overflow: hidden;
animation: div-fan-wipe 0.85s cubic-bezier(.16,1,.3,1) 0.15s both;
}
@media (prefers-reduced-motion: reduce) {
.div-fantasy-runes > span { animation: none; opacity: 1; }
.div-fantasy-bar, .div-fantasy-sigil, .div-fantasy-chain { animation: none; }
.div-fantasy-l { animation: none; stroke-dashoffset: 0; }
}
```
### 11. Minimal Dividers
**Type:** Pure CSS
**Description:** Three quiet, restrained breaks — a hairline that draws slowly open, three dots fading in one by one, and a section mark between fine rules.
**HTML:**
```html
The studio was empty when she arrived — not empty between occupants, but empty in the original sense, before anything had been placed there.
Restraint is not the same as emptiness. The most demanding discipline in any art is knowing what to remove.
He worked slowly. The longer he looked at something, the more it revealed, and the less quickly he could move on.
§
The typeface had been designed in 1932 for a publication that ran for eleven issues before the war interrupted everything.
```
**CSS:**
```css
@keyframes div-mn-open { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-mn-fade { from { opacity: 0; } to { opacity: 1; } }
.div-minimal-surface {
background: #f9f8f6;
padding: 36px 40px;
border-radius: 12px;
}
.div-minimal-text {
font-family: system-ui, -apple-system, sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 1.9;
color: #3a3834;
margin: 0;
}
/* v1 — hairline draws slowly open */
.div-minimal-v1 {
height: 0.5px;
margin: 34px 0;
background: #cac7c2;
transform: scaleX(0);
transform-origin: center;
animation: div-mn-open 1.8s cubic-bezier(.16,1,.3,1) 0.1s both;
}
/* v2 — three dots fade in one by one */
.div-minimal-v2 {
display: flex;
justify-content: space-between;
align-items: center;
margin: 34px 0;
padding: 0 22%;
}
.div-minimal-v2 span {
width: 3px;
height: 3px;
border-radius: 50%;
background: #9a9690;
animation: div-mn-fade 0.7s ease both;
}
.div-minimal-v2 span:nth-child(1) { animation-delay: 0.2s; }
.div-minimal-v2 span:nth-child(2) { animation-delay: 0.65s; }
.div-minimal-v2 span:nth-child(3) { animation-delay: 1.1s; }
/* v3 — section mark between fine rules */
.div-minimal-v3 {
display: flex;
align-items: center;
gap: 20px;
margin: 34px 0;
}
.div-minimal-rule {
flex: 1;
height: 0.5px;
background: #cac7c2;
transform: scaleX(0);
animation: div-mn-open 1.2s cubic-bezier(.16,1,.3,1) 0.3s both;
}
.div-minimal-v3 .div-minimal-rule:first-child { transform-origin: right; }
.div-minimal-v3 .div-minimal-rule:last-child { transform-origin: left; animation-delay: 0.35s; }
.div-minimal-v3 em {
flex-shrink: 0;
font-family: Georgia, serif;
font-style: normal;
font-size: 12px;
color: #b0ada8;
white-space: nowrap;
animation: div-mn-fade 0.9s ease 0.9s both;
}
@media (prefers-reduced-motion: reduce) {
.div-minimal-v1, .div-minimal-rule { animation: none; transform: scaleX(1); }
.div-minimal-v2 span, .div-minimal-v3 em { animation: none; opacity: 1; }
}
```
### 12. Retro Dividers
**Type:** Pure CSS
**Description:** Three nostalgic breaks — a starburst whose rays draw outward, a slamming two-tone diner rule, and a perforated ticket-stub edge.
**HTML:**
```html
The diner on Route 9 had been open since 1952 and showed no signs of reconsidering. The menu hadn't changed in thirty years.
Neon signs don't flicker by accident — the gas inside reacts to alternating current with a rhythm that feels almost biological.
The booth was upholstered in vinyl the colour of oxblood — a colour whose name nobody used but everyone recognized.
The jukebox held 200 selections. He had played B-7 every visit since 1971 without wondering why.
```
**CSS:**
```css
@keyframes div-rt-ray { to { stroke-dashoffset: 0; } }
@keyframes div-rt-dot { from { transform: scale(0); } 65% { transform: scale(1.3); } to { transform: scale(1); } }
@keyframes div-rt-draw { to { stroke-dashoffset: 0; } }
@keyframes div-rt-slam { from { transform: translateX(-110%); } to { transform: translateX(0); } }
@keyframes div-rt-fade { from { opacity: 0; } to { opacity: 1; } }
.div-retro-surface {
background: #231509;
padding: 36px 40px;
border-radius: 12px;
}
.div-retro-text {
font-family: "Courier New", Courier, monospace;
font-size: 12.5px;
line-height: 1.82;
letter-spacing: 0.03em;
color: #e0c87a;
margin: 0;
}
/* v1 — starburst rays draw outward */
.div-retro-v1 { margin: 32px 0; }
.div-retro-v1 svg { display: block; width: 100%; height: 44px; overflow: visible; }
.div-retro-rays line {
stroke-dasharray: 11;
stroke-dashoffset: 11;
animation: div-rt-ray 0.22s ease both;
}
.div-retro-rays line:nth-child(1) { animation-delay: 0.08s; }
.div-retro-rays line:nth-child(2) { animation-delay: 0.12s; }
.div-retro-rays line:nth-child(3) { animation-delay: 0.17s; }
.div-retro-rays line:nth-child(4) { animation-delay: 0.21s; }
.div-retro-rays line:nth-child(5) { animation-delay: 0.26s; }
.div-retro-rays line:nth-child(6) { animation-delay: 0.30s; }
.div-retro-rays line:nth-child(7) { animation-delay: 0.35s; }
.div-retro-rays line:nth-child(8) { animation-delay: 0.39s; }
.div-retro-rays line:nth-child(9) { animation-delay: 0.44s; }
.div-retro-rays line:nth-child(10) { animation-delay: 0.48s; }
.div-retro-rays line:nth-child(11) { animation-delay: 0.53s; }
.div-retro-rays line:nth-child(12) { animation-delay: 0.57s; }
.div-retro-rays line:nth-child(13) { animation-delay: 0.62s; }
.div-retro-rays line:nth-child(14) { animation-delay: 0.66s; }
.div-retro-rays line:nth-child(15) { animation-delay: 0.71s; }
.div-retro-rays line:nth-child(16) { animation-delay: 0.75s; }
.div-retro-circ {
transform-box: fill-box;
transform-origin: center;
animation: div-rt-dot 0.4s cubic-bezier(.34,1.56,.64,1) 0.85s both;
}
.div-retro-fl,
.div-retro-fr {
stroke-dasharray: 221;
stroke-dashoffset: 221;
animation: div-rt-draw 0.72s cubic-bezier(.16,1,.3,1) 0.98s both;
}
.div-retro-fr { animation-delay: 1.02s; }
/* v2 — slamming two-tone diner rule */
.div-retro-v2 {
margin: 32px 0;
overflow: hidden;
}
.div-retro-t {
display: block;
height: 5px;
background: #d4601a;
animation: div-rt-slam 0.5s cubic-bezier(.18,0,.04,1) 0.1s both;
}
.div-retro-b {
display: block;
height: 1px;
margin-top: 3px;
background: #e0c87a;
opacity: 0.45;
animation: div-rt-slam 0.5s cubic-bezier(.18,0,.04,1) 0.28s both;
}
/* v3 — perforated ticket-stub edge */
.div-retro-v3 {
height: 4px;
margin: 32px 0;
background: radial-gradient(circle, #d4601a 2px, transparent 2px);
background-size: 14.875px 4px;
background-repeat: repeat-x;
background-position: center;
animation: div-rt-fade 0.6s ease 0.2s both;
}
@media (prefers-reduced-motion: reduce) {
.div-retro-rays line, .div-retro-fl, .div-retro-fr { animation: none; stroke-dashoffset: 0; }
.div-retro-circ, .div-retro-t, .div-retro-b, .div-retro-v3 { animation: none; }
}
```
### 13. Newspaper Dividers
**Type:** Pure CSS
**Description:** Three broadsheet-print breaks — a thick-thin masthead rule, a starred jump-line break, and a column-end colophon dash.
**HTML:**
```html
The morning edition carried news of the harbour expansion on its front page, set in a headline type the paper had used, unchanged, since nineteen thirty-eight.
Continued reporting suggested the council vote would be closer than the early projections implied — three members had not yet declared a position.
★ ★ ★
In the arts section, a review of the season's first concert ran two columns, praising the strings and saying little, pointedly, of the brass.
— 30 —
The weather, the almanac noted, would turn by the weekend; readers along the coast were advised to expect the first hard frost of the year.
```
**CSS:**
```css
@keyframes div-news-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-news-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.div-news-surface {
background: #f3efe6;
padding: 36px 40px;
border-radius: 12px;
}
.div-news-text {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
line-height: 1.82;
color: #2a2620;
margin: 0;
}
/* v1 — thick-thin masthead rule */
.div-news-v1 { margin: 30px 0; }
.div-news-v1 i {
display: block;
transform-origin: left;
animation: div-news-grow 0.7s cubic-bezier(.18,0,.05,1) both;
}
.div-news-v1 i:nth-child(1) { height: 3px; background: #2a2620; }
.div-news-v1 i:nth-child(2) { height: 1px; margin-top: 3px; background: #2a2620; animation-delay: 0.22s; }
/* v2 — starred jump-line break */
.div-news-v2 {
display: flex;
align-items: center;
gap: 18px;
margin: 30px 0;
}
.div-news-v2::before,
.div-news-v2::after {
content: '';
flex: 1;
height: 1px;
background: #8a8270;
animation: div-news-grow 0.7s cubic-bezier(.16,1,.3,1) 0.1s both;
}
.div-news-v2::before { transform-origin: right; }
.div-news-v2::after { transform-origin: left; animation-delay: 0.14s; }
.div-news-v2 span {
flex-shrink: 0;
font-size: 9px;
letter-spacing: 0.4em;
color: #6a6252;
animation: div-news-fade 0.5s ease 0.5s both;
}
/* v3 — column-end colophon dash ("-30-" = end of story) */
.div-news-v3 {
display: flex;
justify-content: center;
margin: 30px 0;
}
.div-news-v3 span {
font-family: Georgia, serif;
font-size: 12px;
letter-spacing: 0.2em;
color: #6a6252;
padding: 4px 0;
border-top: 1px solid #c4bca8;
border-bottom: 1px solid #c4bca8;
animation: div-news-fade 0.55s ease 0.15s both;
}
@media (prefers-reduced-motion: reduce) {
.div-news-v1 i, .div-news-v2::before, .div-news-v2::after,
.div-news-v2 span, .div-news-v3 span { animation: none; }
}
```
### 14. Playful Dividers
**Type:** Pure CSS
**Description:** Three bright, friendly breaks — a bouncing crayon squiggle, a row of popping shapes, and a dashed cut-here line with scissors.
**HTML:**
```html
The classroom hamster had escaped again — third time this term — and the search had become, for the children, the most educational event of the week.
Every desk had been lifted, every backpack unzipped, and a map of the room drawn on the whiteboard with a hopeful X marked near the radiator.
He was found, eventually, asleep inside a shoebox lined with cotton wool — a habitat, the children insisted, that he had clearly chosen on purpose.
✂
A certificate was drawn up, decorated with stickers, and taped above his cage: Most Adventurous Class Pet, awarded by unanimous and very loud vote.
```
**CSS:**
```css
@keyframes div-play-draw { to { stroke-dashoffset: 0; } }
@keyframes div-play-pop { from { transform: scale(0); } 60% { transform: scale(1.35); } to { transform: scale(1); } }
@keyframes div-play-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-play-slide { from { transform: translateX(-12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.div-playful-surface {
background: #fff4dc;
padding: 36px 40px;
border-radius: 12px;
}
.div-playful-text {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 14px;
line-height: 1.8;
color: #4a3a22;
margin: 0;
}
/* v1 — bouncing crayon squiggle */
.div-playful-v1 { margin: 30px 0; }
.div-playful-v1 svg { display: block; width: 100%; height: 22px; overflow: visible; }
.div-playful-squiggle {
stroke-dasharray: 760;
stroke-dashoffset: 760;
animation: div-play-draw 1.1s cubic-bezier(.16,1,.3,1) both;
}
/* v2 — row of popping shapes */
.div-playful-v2 {
display: flex;
align-items: center;
margin: 30px 0;
}
.div-playful-v2::before,
.div-playful-v2::after {
content: '';
flex: 1;
height: 2px;
border-radius: 2px;
background: #ffd089;
animation: div-play-grow 0.6s cubic-bezier(.16,1,.3,1) 0.4s both;
}
.div-playful-v2::before { transform-origin: right; }
.div-playful-v2::after { transform-origin: left; animation-delay: 0.45s; }
.div-playful-shapes {
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
}
.div-playful-shapes i {
display: block;
animation: div-play-pop 0.42s cubic-bezier(.34,1.56,.64,1) both;
}
.div-playful-c { width: 11px; height: 11px; border-radius: 50%; background: #ff7a3d; animation-delay: 0.1s; }
.div-playful-t { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid #3db4c4; animation-delay: 0.2s; }
.div-playful-s { width: 12px; height: 12px; background: #ffc23d; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation-delay: 0.3s; }
.div-playful-shapes i:nth-child(4) { animation-delay: 0.4s; }
.div-playful-shapes i:nth-child(5) { animation-delay: 0.5s; }
/* v3 — dashed cut-here line with scissors */
.div-playful-v3 {
display: flex;
align-items: center;
gap: 10px;
margin: 30px 0;
}
.div-playful-v3::before,
.div-playful-v3::after {
content: '';
flex: 1;
height: 2px;
background: repeating-linear-gradient(to right, #c4906a 0 7px, transparent 7px 13px);
animation: div-play-grow 0.7s cubic-bezier(.16,1,.3,1) 0.2s both;
}
.div-playful-v3::before { transform-origin: right; }
.div-playful-v3::after { transform-origin: left; animation-delay: 0.24s; }
.div-playful-scissors {
flex-shrink: 0;
font-size: 16px;
color: #c4906a;
animation: div-play-slide 0.5s cubic-bezier(.34,1.56,.64,1) 0.55s both;
}
@media (prefers-reduced-motion: reduce) {
.div-playful-squiggle { animation: none; stroke-dashoffset: 0; }
.div-playful-v2::before, .div-playful-v2::after, .div-playful-shapes i,
.div-playful-v3::before, .div-playful-v3::after, .div-playful-scissors { animation: none; }
}
```
### 15. Music Dividers
**Type:** Pure CSS
**Description:** Three sound-themed breaks — rising equalizer bars, a waveform pulse line, and a concentric vinyl-groove rule.
**HTML:**
```html
The record opens with eleven seconds of room tone — the sound of the studio itself, breathing, before the first note is allowed to arrive.
Side two was recorded live in a single take, the engineer refusing to stop the tape even when the bassist's string broke four bars from the end.
The mastering took longer than the recording — six weeks spent moving a single frequency band a fraction of a decibel, listening, then moving it back.
When the test pressing arrived, the band listened to it in a parked car, because the car was where, the singer said, music was actually heard.
```
**CSS:**
```css
@keyframes div-mus-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes div-mus-draw { to { stroke-dashoffset: 0; } }
@keyframes div-mus-spin { from { transform: scale(0) rotate(-90deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.div-music-surface {
background: #0e1014;
padding: 36px 40px;
border-radius: 12px;
}
.div-music-text {
font-family: system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: 1.82;
color: #8a93a0;
margin: 0;
}
/* v1 — rising equalizer bars */
.div-music-v1 { margin: 32px 0; }
.div-music-eq {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 26px;
}
.div-music-eq i {
flex: 1;
margin: 0 1.5px;
border-radius: 1.5px;
background: linear-gradient(to top, #15d18a, #15d18a 60%, rgba(21,209,138,0.35));
transform-origin: bottom;
animation: div-mus-rise 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
.div-music-eq i:nth-child(odd) { height: 60%; }
.div-music-eq i:nth-child(even) { height: 100%; }
.div-music-eq i:nth-child(3n) { height: 38%; }
.div-music-eq i:nth-child(1) { animation-delay: 0.04s; }
.div-music-eq i:nth-child(2) { animation-delay: 0.08s; }
.div-music-eq i:nth-child(3) { animation-delay: 0.12s; }
.div-music-eq i:nth-child(4) { animation-delay: 0.16s; }
.div-music-eq i:nth-child(5) { animation-delay: 0.20s; }
.div-music-eq i:nth-child(6) { animation-delay: 0.24s; }
.div-music-eq i:nth-child(7) { animation-delay: 0.28s; }
.div-music-eq i:nth-child(8) { animation-delay: 0.32s; }
.div-music-eq i:nth-child(9) { animation-delay: 0.36s; }
.div-music-eq i:nth-child(10) { animation-delay: 0.40s; }
.div-music-eq i:nth-child(11) { animation-delay: 0.44s; }
.div-music-eq i:nth-child(12) { animation-delay: 0.48s; }
.div-music-eq i:nth-child(n+13) { animation-delay: 0.52s; }
/* v2 — waveform pulse line */
.div-music-v2 { margin: 32px 0; }
.div-music-v2 svg { display: block; width: 100%; height: 24px; }
.div-music-wave {
stroke-dasharray: 900;
stroke-dashoffset: 900;
animation: div-mus-draw 1.2s cubic-bezier(.16,1,.3,1) both;
}
/* v3 — concentric vinyl-groove rule */
.div-music-v3 {
display: flex;
align-items: center;
margin: 32px 0;
}
.div-music-v3::before,
.div-music-v3::after {
content: '';
flex: 1;
height: 4px;
/* concentric grooves rendered as repeating lines */
background: repeating-linear-gradient(to bottom, rgba(21,209,138,0.4) 0 1px, transparent 1px 2px);
}
.div-music-vinyl {
flex-shrink: 0;
width: 16px;
height: 16px;
margin: 0 14px;
border-radius: 50%;
background: radial-gradient(circle, #15d18a 0 3px, #0e1014 3px 4px, #15d18a 4px 5px, #0e1014 5px 6px, #15d18a 6px 7px, #0e1014 7px 8px);
animation: div-mus-spin 0.55s cubic-bezier(.34,1.56,.64,1) 0.3s both;
}
@media (prefers-reduced-motion: reduce) {
.div-music-eq i { animation: none; }
.div-music-wave { animation: none; stroke-dashoffset: 0; }
.div-music-vinyl { animation: none; }
}
```
### 16. Festive Dividers
**Type:** Pure CSS
**Description:** Three celebration breaks — a string of fairy lights, a confetti-scatter band, and a garland swag with hanging baubles.
**HTML:**
```html
The hall had been decorated since dawn — every banister wound with greenery, every windowsill crowded with candles waiting, unlit, for the evening.
By six o'clock the first guests had arrived, stamping snow from their boots, and the quiet house became, all at once, impossibly loud and warm.
There was a long table, and then a longer one added end to end, and still the children ate standing up because that, apparently, was more fun.
When the candles were finally lit, someone turned off the lamps, and for a moment nobody spoke — the whole room held inside that small, gold light.
```
**CSS:**
```css
@keyframes div-fes-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-fes-glow { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.3); } to { transform: scale(1); opacity: 1; } }
@keyframes div-fes-fall { from { transform: translateY(-10px) rotate(0); opacity: 0; } to { transform: translateY(0) rotate(var(--r,0deg)); opacity: 1; } }
@keyframes div-fes-draw { to { stroke-dashoffset: 0; } }
@keyframes div-fes-drop { from { transform: scale(0) translateY(-6px); } 60% { transform: scale(1.25) translateY(0); } to { transform: scale(1) translateY(0); } }
.div-festive-surface {
background: #0f2418;
padding: 36px 40px;
border-radius: 12px;
}
.div-festive-text {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
line-height: 1.85;
color: #b8c4b0;
margin: 0;
}
/* v1 — string of fairy lights */
.div-festive-v1 {
position: relative;
height: 16px;
margin: 32px 0;
}
.div-festive-wire {
position: absolute;
top: 4px;
left: 0;
right: 0;
height: 1px;
background: #3a5a44;
transform-origin: left;
animation: div-fes-grow 0.7s cubic-bezier(.16,1,.3,1) both;
}
.div-festive-lights {
position: absolute;
inset: 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.div-festive-lights i {
width: 8px;
height: 11px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
margin-top: 4px;
transform-origin: top;
animation: div-fes-glow 0.4s cubic-bezier(.34,1.56,.64,1) both;
}
.div-festive-lights i:nth-child(4n+1) { background: #e8b53d; box-shadow: 0 0 7px rgba(232,181,61,0.7); }
.div-festive-lights i:nth-child(4n+2) { background: #e0455a; box-shadow: 0 0 7px rgba(224,69,90,0.7); }
.div-festive-lights i:nth-child(4n+3) { background: #4fb8d4; box-shadow: 0 0 7px rgba(79,184,212,0.7); }
.div-festive-lights i:nth-child(4n) { background: #5fc77a; box-shadow: 0 0 7px rgba(95,199,122,0.7); }
.div-festive-lights i:nth-child(1) { animation-delay: 0.4s; }
.div-festive-lights i:nth-child(2) { animation-delay: 0.46s; }
.div-festive-lights i:nth-child(3) { animation-delay: 0.52s; }
.div-festive-lights i:nth-child(4) { animation-delay: 0.58s; }
.div-festive-lights i:nth-child(5) { animation-delay: 0.64s; }
.div-festive-lights i:nth-child(6) { animation-delay: 0.70s; }
.div-festive-lights i:nth-child(7) { animation-delay: 0.76s; }
.div-festive-lights i:nth-child(8) { animation-delay: 0.82s; }
.div-festive-lights i:nth-child(9) { animation-delay: 0.88s; }
.div-festive-lights i:nth-child(10) { animation-delay: 0.94s; }
.div-festive-lights i:nth-child(11) { animation-delay: 1.00s; }
.div-festive-lights i:nth-child(12) { animation-delay: 1.06s; }
/* v2 — confetti-scatter band */
.div-festive-v2 {
height: 18px;
margin: 32px 0;
background:
radial-gradient(circle, #e8b53d 1.5px, transparent 2px) 0 2px / 26px 18px,
radial-gradient(circle, #e0455a 1.5px, transparent 2px) 13px 11px / 26px 18px,
radial-gradient(circle, #4fb8d4 1.5px, transparent 2px) 7px 14px / 19px 18px,
radial-gradient(circle, #5fc77a 1.5px, transparent 2px) 19px 4px / 23px 18px;
background-repeat: repeat-x;
transform-origin: center;
animation: div-fes-grow 0.85s cubic-bezier(.16,1,.3,1) 0.1s both;
}
/* v3 — garland swag with hanging baubles */
.div-festive-v3 { margin: 32px 0; }
.div-festive-v3 svg { display: block; width: 100%; height: 26px; }
.div-festive-swag {
stroke-dasharray: 540;
stroke-dashoffset: 540;
animation: div-fes-draw 1s cubic-bezier(.16,1,.3,1) both;
}
.div-festive-bauble {
transform-box: fill-box;
transform-origin: center top;
animation: div-fes-drop 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
.div-festive-b1 { animation-delay: 0.78s; }
.div-festive-b2 { animation-delay: 0.9s; }
.div-festive-b3 { animation-delay: 1.02s; }
@media (prefers-reduced-motion: reduce) {
.div-festive-wire, .div-festive-lights i, .div-festive-v2 { animation: none; }
.div-festive-swag { animation: none; stroke-dashoffset: 0; }
.div-festive-bauble { animation: none; }
}
```
### 17. Corporate Dividers
**Type:** Pure CSS
**Description:** Three clean dashboard breaks — a filling progress-segment bar, a chevron breadcrumb rule, and a KPI tick-marker line.
**HTML:**
```html
Quarterly performance exceeded forecast across three of four operating regions, with the strongest growth recorded in the enterprise services segment.
Customer retention held steady at ninety-four percent, while average contract value rose six points against the prior reporting period.
Operating margin improved as infrastructure costs were consolidated onto a single platform, retiring four legacy systems ahead of schedule.
Guidance for the coming year remains measured: the leadership team expects continued momentum, tempered by ongoing macroeconomic uncertainty.
```
**CSS:**
```css
@keyframes div-corp-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-corp-pop { from { transform: scale(0); } 60% { transform: scale(1.25); } to { transform: scale(1); } }
@keyframes div-corp-slide { from { transform: translateX(-8px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.div-corp-surface {
background: #1b2230;
padding: 36px 40px;
border-radius: 12px;
}
.div-corp-text {
font-family: system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: 1.78;
color: #8e98a8;
margin: 0;
}
/* v1 — filling progress-segment bar */
.div-corp-v1 {
display: flex;
gap: 3px;
height: 6px;
margin: 30px 0;
}
.div-corp-seg {
flex: 1;
border-radius: 2px;
background: #4f8cff;
transform-origin: left;
animation: div-corp-fill 0.4s cubic-bezier(.16,1,.3,1) both;
}
.div-corp-seg:nth-child(1) { animation-delay: 0.1s; }
.div-corp-seg:nth-child(2) { animation-delay: 0.22s; }
.div-corp-seg:nth-child(3) { animation-delay: 0.34s; }
.div-corp-seg:nth-child(4) { animation-delay: 0.46s; background: #3a4356; }
.div-corp-seg:nth-child(5) { animation-delay: 0.58s; background: #3a4356; }
/* v2 — chevron breadcrumb rule */
.div-corp-v2 {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 30px 0;
}
.div-corp-v2::before,
.div-corp-v2::after {
content: '';
flex: 1;
height: 1px;
background: #3a4356;
}
.div-corp-chev {
width: 7px;
height: 7px;
border-top: 2px solid #4f8cff;
border-right: 2px solid #4f8cff;
transform: rotate(45deg);
animation: div-corp-slide 0.4s cubic-bezier(.34,1.56,.64,1) both;
}
.div-corp-chev:nth-child(2) { animation-delay: 0.12s; }
.div-corp-chev:nth-child(3) { animation-delay: 0.24s; }
.div-corp-chev:nth-child(4) { animation-delay: 0.36s; }
/* v3 — KPI tick-marker line */
.div-corp-v3 {
position: relative;
height: 14px;
margin: 30px 0;
}
.div-corp-track {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
border-radius: 2px;
background:
linear-gradient(#3a4356, #3a4356) 0 0 / 100% 100%,
repeating-linear-gradient(to right, #5a6578 0 1px, transparent 1px 25%);
transform-origin: left;
animation: div-corp-fill 0.7s cubic-bezier(.16,1,.3,1) both;
}
.div-corp-marker {
position: absolute;
top: 50%;
left: 68%;
width: 11px;
height: 11px;
border-radius: 50%;
background: #4f8cff;
border: 2px solid #1b2230;
transform: translate(-50%, -50%);
box-shadow: 0 0 0 3px rgba(79,140,255,0.25);
animation: div-corp-pop 0.45s cubic-bezier(.34,1.56,.64,1) 0.7s both;
}
@media (prefers-reduced-motion: reduce) {
.div-corp-seg, .div-corp-chev, .div-corp-track, .div-corp-marker { animation: none; }
}
```
### 18. Sketch Dividers
**Type:** Pure CSS
**Description:** Three hand-drawn breaks — a wobbly marker line, a doodled arrow, and a highlighter swipe — each imperfect by design.
**HTML:**
```html
The notebook had been with her for nine years and four countries — its cover softened, its spine cracked, every page carrying some half-finished thought.
She wrote in pencil, always — not from caution but from a belief that ideas should remain provisional, should keep the option of being wrong.
The best pages were the messiest — arrows looping back on themselves, words crossed out and rewritten, a coffee ring framing one stubborn paragraph.
section two
When the notebook was full she did not buy a matching one. The next was different on purpose — a new object should not pretend to be the old.
```
**CSS:**
```css
@keyframes div-sk-draw { to { stroke-dashoffset: 0; } }
@keyframes div-sk-swipe { from { background-size: 0% 62%; } to { background-size: 100% 62%; } }
@keyframes div-sk-fade { from { opacity: 0; } to { opacity: 1; } }
.div-sketch-surface {
background: #faf8f3;
padding: 36px 40px;
border-radius: 12px;
}
.div-sketch-text {
font-family: "Comic Sans MS", "Segoe Print", "Bradley Hand", cursive;
font-size: 14px;
line-height: 1.85;
color: #3a3a3a;
margin: 0;
}
/* v1 — wobbly hand-drawn line */
.div-sketch-v1 { margin: 30px 0; }
.div-sketch-v1 svg { display: block; width: 100%; height: 14px; }
.div-sketch-line {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: div-sk-draw 0.95s cubic-bezier(.16,1,.3,1) both;
}
/* v2 — doodled arrow */
.div-sketch-v2 { margin: 30px 0; }
.div-sketch-v2 svg { display: block; width: 100%; height: 18px; }
.div-sketch-arrow {
stroke-dasharray: 480;
stroke-dashoffset: 480;
animation: div-sk-draw 0.85s cubic-bezier(.16,1,.3,1) both;
}
.div-sketch-head {
stroke-dasharray: 30;
stroke-dashoffset: 30;
animation: div-sk-draw 0.25s ease 0.82s both;
}
/* v3 — highlighter swipe under a label */
.div-sketch-v3 {
display: flex;
justify-content: center;
margin: 30px 0;
}
.div-sketch-swipe {
font-family: "Comic Sans MS", "Segoe Print", cursive;
font-size: 13px;
color: #3a3a3a;
padding: 2px 10px;
background-image: linear-gradient(rgba(255,221,87,0.85), rgba(255,221,87,0.85));
background-repeat: no-repeat;
background-position: 0 78%;
background-size: 0% 62%;
animation: div-sk-swipe 0.7s cubic-bezier(.16,1,.3,1) 0.2s both;
}
@media (prefers-reduced-motion: reduce) {
.div-sketch-line, .div-sketch-arrow, .div-sketch-head { animation: none; stroke-dashoffset: 0; }
.div-sketch-swipe { animation: none; background-size: 100% 62%; }
}
```
---
## 22 CSS Dropdown Menu Designs
URL: https://codefronts.com/navigation/css-dropdown-menus/
Description: 22 hand-coded CSS dropdown menu designs with live demos — slide-down fade, clip-path curtain reveal, 3D perspective flip, elastic bounce spring, glassmorphism float panel, stagger children reveal, mega-menu grid, underline nav fade, native details/summary, checkbox-hack mobile nav, nested multi-level flyout, icon sidebar flyout, split-screen mega-menu, segmented pill nav, color swatch picker, right-click context menu, keyboard-accessible roving tabindex, stagger blur entrance, command palette search, autocomplete suggestion, click-outside close, and multi-select chip. 15 pure CSS + 7 with a tiny vanilla JS snippet — no framework. WCAG 2.2 aria-expanded + aria-haspopup + focus management, prefers-reduced-motion honoured, MIT licensed.
Demo count: 22
### 01. Slide-Down Fade Dropdown
**Type:** Pure CSS
**Description:** Classic navigation dropdown that slides down and fades in on hover using max-height and opacity transitions on a CSS-only nav.
**HTML:**
```html
```
**CSS:**
```css
.dd-01, .dd-01 *, .dd-01 *::before, .dd-01 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-01 ::selection { background: #6366f1; color: #fff; }
.dd-01 {
--brand: #6366f1;
--brand-dark: #4f46e5;
--surface: #ffffff;
--border: #e5e7eb;
--text: #111827;
--muted: #6b7280;
--hover-bg: #f5f3ff;
--shadow: 0 10px 40px rgba(99,102,241,.15);
font-family: 'Inter', sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 340px;
background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
padding: 40px 20px;
}
.dd-01__nav {
display: flex;
align-items: center;
gap: 4px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 8px 12px;
box-shadow: 0 2px 12px rgba(0,0,0,.06);
position: relative;
z-index: 100;
}
.dd-01__item {
position: relative;
}
.dd-01__item::after {
content: "";
position: absolute;
left: 0; right: 0;
top: 100%;
height: 8px;
/* hover-bridge: invisible strip below the trigger covering
the visible gap before the panel. Lives on .__item (not
the panel, which has overflow:hidden / pointer-events:
none in its closed state) so the parent :hover stays
active while the cursor traverses the gap. */
}
.dd-01__trigger {
display: flex;
align-items: center;
gap: 5px;
padding: 8px 14px;
color: var(--text);
text-decoration: none;
font-size: 14px;
font-weight: 500;
border-radius: 8px;
transition: background 0.18s, color 0.18s;
white-space: nowrap;
}
.dd-01__trigger:hover { background: var(--hover-bg); color: var(--brand); }
.dd-01__caret {
font-size: 12px;
display: inline-block;
transition: transform 0.25s ease;
color: var(--muted);
line-height: 1;
margin-top: 1px;
}
.dd-01__item:hover .dd-01__caret { transform: rotate(180deg); color: var(--brand); }
/* ── dropdown panel ── */
.dd-01__panel {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
min-width: 200px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--shadow);
list-style: none;
padding: 6px;
max-height: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition:
max-height 0.35s ease,
opacity 0.22s ease 0.05s,
transform 0.28s ease;
}
.dd-01__item:hover .dd-01__panel {
max-height: 320px;
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.dd-01__panel li a {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 8px;
text-decoration: none;
color: var(--text);
font-size: 13.5px;
font-weight: 450;
transition: background 0.15s, color 0.15s;
}
.dd-01__panel li a:hover {
background: var(--hover-bg);
color: var(--brand);
}
.dd-01__icon {
font-size: 7px;
color: var(--brand);
opacity: 0.6;
}
.dd-01__cta {
margin-left: 8px;
padding: 8px 18px;
background: var(--brand);
color: #fff;
border-radius: 8px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: background 0.18s, transform 0.15s;
}
.dd-01__cta:hover { background: var(--brand-dark); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
.dd-01__panel, .dd-01__caret, .dd-01__trigger, .dd-01__cta { transition: none; }
}
```
### 02. Clip-Path Curtain Reveal Dropdown
**Type:** Pure CSS
**Description:** A dramatic curtain-wipe dropdown where the panel is revealed by animating a clip-path polygon from a collapsed top strip to full height.
**HTML:**
```html
```
**CSS:**
```css
.dd-02, .dd-02 *, .dd-02 *::before, .dd-02 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-02 ::selection { background: #f97316; color: #fff; }
.dd-02 {
--brand: #f97316;
--surface: #fff;
--text: #1c1917;
--muted: #78716c;
--border: #e7e5e4;
--hover: #fff7ed;
font-family: 'DM Sans', sans-serif;
min-height: 360px;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 32px 20px;
background: linear-gradient(160deg, #fff7ed 0%, #fef3c7 100%);
}
.dd-02__nav {
display: flex;
align-items: center;
gap: 32px;
background: var(--surface);
border-bottom: 2px solid var(--border);
padding: 14px 28px;
width: 100%;
max-width: 720px;
border-radius: 12px;
box-shadow: 0 2px 16px rgba(0,0,0,.06);
position: relative;
z-index: 100;
}
.dd-02__logo {
font-size: 18px;
font-weight: 700;
color: var(--brand);
text-decoration: none;
letter-spacing: -0.5px;
margin-right: auto;
}
.dd-02__items {
display: flex;
gap: 4px;
}
.dd-02__item { position: relative; }
.dd-02__item::after {
content: "";
position: absolute;
left: 0; right: 0;
top: 100%;
height: 10px;
/* hover-bridge: invisible strip below the trigger covering
the visible gap before the panel. Lives on .__item (not
the panel, which has overflow:hidden / pointer-events:
none in its closed state) so the parent :hover stays
active while the cursor traverses the gap. */
}
.dd-02__trigger {
background: none;
border: none;
cursor: pointer;
padding: 8px 14px;
font-size: 14px;
font-weight: 500;
color: var(--text);
border-radius: 8px;
transition: background 0.15s, color 0.15s;
font-family: inherit;
}
.dd-02__trigger:hover, .dd-02__item:hover .dd-02__trigger {
background: var(--hover);
color: var(--brand);
}
/* clip-path curtain panel */
.dd-02__panel {
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
min-width: 220px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 16px 48px rgba(0,0,0,.12);
overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
opacity: 0;
pointer-events: none;
transition:
clip-path 0.38s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.2s ease;
}
.dd-02__item:hover .dd-02__panel {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
opacity: 1;
pointer-events: auto;
}
.dd-02__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
padding: 8px;
}
.dd-02__link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
text-decoration: none;
color: var(--text);
font-size: 13.5px;
font-weight: 500;
transition: background 0.15s;
}
.dd-02__link:hover { background: var(--hover); color: var(--brand); }
.dd-02__badge {
font-size: 16px;
line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
.dd-02__panel { transition: none; }
}
```
### 03. 3D Perspective Flip Dropdown
**Type:** Pure CSS
**Description:** A dropdown panel that folds open from the top edge using rotateX perspective, simulating a physical lid being lifted.
**HTML:**
```html
```
**CSS:**
```css
.dd-03, .dd-03 *, .dd-03 *::before, .dd-03 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-03 ::selection { background: #0f172a; color: #e2e8f0; }
.dd-03 {
--ink: #0f172a;
--surface: #f8fafc;
--panel: #ffffff;
--accent: #6366f1;
--muted: #64748b;
--border: #e2e8f0;
font-family: 'Syne', sans-serif;
min-height: 360px;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 32px 20px;
background: linear-gradient(135deg, #f1f5f9 0%, #e0e7ff 100%);
}
.dd-03__nav {
display: flex;
align-items: center;
gap: 40px;
background: var(--ink);
padding: 16px 32px;
border-radius: 14px;
box-shadow: 0 8px 32px rgba(15,23,42,.25);
position: relative;
z-index: 100;
}
.dd-03__brand {
font-size: 18px;
font-weight: 700;
color: #fff;
letter-spacing: 3px;
margin-right: auto;
}
.dd-03__items {
display: flex;
gap: 4px;
}
.dd-03__item { position: relative; }
/* hover-bridge: invisible strip below the trigger covering the visible
10px gap before the 3D perspective container (which has
pointer-events:none in its closed state, so its own ::before bridge
doesn't catch hover). */
.dd-03__item::after {
content: "";
position: absolute;
left: 0; right: 0;
top: 100%;
height: 10px;
}
.dd-03__trigger {
display: block;
padding: 8px 16px;
color: rgba(255,255,255,0.75);
text-decoration: none;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
border-radius: 8px;
transition: color 0.15s, background 0.15s;
}
.dd-03__trigger:hover, .dd-03__item:hover .dd-03__trigger {
color: #fff;
background: rgba(255,255,255,0.1);
}
/* 3D perspective container */
.dd-03__perspective {
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
perspective: 800px;
transform-style: preserve-3d;
pointer-events: none;
}
.dd-03__perspective::before {
content: "";
position: absolute;
left: 0; right: 0;
top: -10px;
height: 10px;
/* invisible hover-bridge — keeps :hover active while
the cursor traverses the visible gap between trigger
and panel. */
}
.dd-03__item:hover .dd-03__perspective { pointer-events: auto; }
.dd-03__panel {
background: var(--panel);
border-radius: 12px;
border: 1px solid var(--border);
box-shadow: 0 20px 60px rgba(15,23,42,.2);
min-width: 180px;
padding: 6px;
display: flex;
flex-direction: column;
gap: 2px;
transform: rotateX(-90deg);
transform-origin: top center;
opacity: 0;
transition:
transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.22s ease;
}
.dd-03__item:hover .dd-03__panel {
transform: rotateX(0deg);
opacity: 1;
}
.dd-03__link {
display: block;
padding: 10px 14px;
border-radius: 8px;
text-decoration: none;
color: var(--ink);
font-size: 14px;
font-weight: 500;
transition: background 0.15s, color 0.15s;
}
.dd-03__link:hover { background: #eef2ff; color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
.dd-03__panel { transition: none; }
}
```
### 04. Elastic Bounce Dropdown
**Type:** Pure CSS
**Description:** A playful dropdown that springs open with an elastic overshoot using a carefully tuned cubic-bezier on scaleY, giving it a bouncy physical feel.
**HTML:**
```html
```
**CSS:**
```css
.dd-04, .dd-04 *, .dd-04 *::before, .dd-04 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-04 ::selection { background: #ec4899; color: #fff; }
.dd-04 {
--brand: #ec4899;
--brand-light: #fdf2f8;
--surface: #fff;
--text: #1e1b4b;
--muted: #6b7280;
--border: #f3f4f6;
font-family: 'Plus Jakarta Sans', sans-serif;
min-height: 360px;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 32px 20px;
background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #ede9fe 100%);
}
.dd-04__nav {
display: flex;
align-items: center;
gap: 8px;
background: var(--surface);
border-radius: 100px;
padding: 8px 8px 8px 24px;
box-shadow: 0 4px 24px rgba(236,72,153,.15), 0 1px 4px rgba(0,0,0,.05);
position: relative;
z-index: 100;
}
.dd-04__brand {
font-size: 16px;
font-weight: 700;
color: var(--brand);
margin-right: 8px;
letter-spacing: -0.3px;
}
.dd-04__items { display: flex; gap: 2px; }
.dd-04__item { position: relative; }
.dd-04__item::after {
content: "";
position: absolute;
left: 0; right: 0;
top: 100%;
height: 10px;
/* hover-bridge: invisible strip below the trigger covering
the visible gap before the panel. Lives on .__item (not
the panel, which has overflow:hidden / pointer-events:
none in its closed state) so the parent :hover stays
active while the cursor traverses the gap. */
}
.dd-04__trigger {
display: flex;
align-items: center;
gap: 4px;
padding: 8px 16px;
border-radius: 100px;
color: var(--text);
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: background 0.15s, color 0.15s;
}
.dd-04__trigger:hover, .dd-04__item:hover .dd-04__trigger {
background: var(--brand-light);
color: var(--brand);
}
/* elastic bounce panel */
.dd-04__panel {
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) scaleY(0);
transform-origin: top center;
min-width: 190px;
background: var(--surface);
border: 1px solid rgba(236,72,153,.12);
border-radius: 16px;
box-shadow: 0 12px 40px rgba(236,72,153,.18), 0 2px 8px rgba(0,0,0,.05);
padding: 8px;
display: flex;
flex-direction: column;
gap: 2px;
pointer-events: none;
opacity: 0;
transition:
transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.18s ease;
}
.dd-04__item:hover .dd-04__panel {
transform: translateX(-50%) scaleY(1);
opacity: 1;
pointer-events: auto;
}
.dd-04__link {
display: block;
padding: 10px 14px;
border-radius: 10px;
text-decoration: none;
color: var(--text);
font-size: 13.5px;
font-weight: 500;
transition: background 0.15s, color 0.15s;
}
.dd-04__link:hover { background: var(--brand-light); color: var(--brand); }
.dd-04__link--cta {
color: var(--brand);
font-weight: 700;
}
.dd-04__divider {
height: 1px;
background: var(--border);
margin: 4px 0;
}
@media (prefers-reduced-motion: reduce) {
.dd-04__panel { transition: none; }
}
```
### 05. Glassmorphism Float Panel Dropdown
**Type:** Pure CSS
**Description:** A frosted-glass dropdown panel that floats above a vivid gradient background using backdrop-filter blur and translucent borders.
**HTML:**
```html
```
**CSS:**
```css
.dd-05, .dd-05 *, .dd-05 *::before, .dd-05 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-05 ::selection { background: rgba(255,255,255,.4); color: #fff; }
.dd-05 {
font-family: 'Outfit', sans-serif;
min-height: 380px;
display: flex;
align-items: flex-start;
justify-content: center;
}
.dd-05__bg {
position: relative;
width: 100%;
min-height: 380px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 40%, #f093fb 100%);
overflow: hidden;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 32px 20px;
}
.dd-05__orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.5;
}
.dd-05__orb--1 { width: 300px; height: 300px; background: #f093fb; top: -100px; left: -80px; }
.dd-05__orb--2 { width: 250px; height: 250px; background: #4facfe; bottom: -80px; right: 0; }
.dd-05__orb--3 { width: 200px; height: 200px; background: #f5af19; top: 40%; left: 40%; }
.dd-05__nav {
position: relative;
z-index: 10;
display: flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.15);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 100px;
padding: 8px 8px 8px 24px;
box-shadow: 0 8px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.4);
}
.dd-05__brand {
font-size: 18px;
font-weight: 700;
color: #fff;
letter-spacing: -0.3px;
margin-right: 8px;
}
.dd-05__items { display: flex; gap: 2px; }
.dd-05__item { position: relative; }
.dd-05__item::after {
content: "";
position: absolute;
left: 0; right: 0;
top: 100%;
height: 12px;
/* hover-bridge: invisible strip below the trigger covering
the visible gap before the panel. Lives on .__item (not
the panel, which has overflow:hidden / pointer-events:
none in its closed state) so the parent :hover stays
active while the cursor traverses the gap. */
}
.dd-05__trigger {
display: block;
padding: 8px 16px;
color: rgba(255,255,255,0.85);
text-decoration: none;
font-size: 14px;
font-weight: 500;
border-radius: 100px;
transition: background 0.18s, color 0.18s;
}
.dd-05__trigger:hover, .dd-05__item:hover .dd-05__trigger {
background: rgba(255,255,255,0.2);
color: #fff;
}
/* glassmorphism panel */
.dd-05__panel {
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(-12px);
min-width: 210px;
background: rgba(255,255,255,0.18);
-webkit-backdrop-filter: blur(24px) saturate(200%);
backdrop-filter: blur(24px) saturate(200%);
border: 1px solid rgba(255,255,255,0.35);
border-radius: 16px;
box-shadow:
0 16px 48px rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 -1px 0 rgba(255,255,255,.1);
padding: 8px;
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0;
pointer-events: none;
transition:
opacity 0.25s ease,
transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.dd-05__item:hover .dd-05__panel {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.dd-05__link {
display: block;
padding: 10px 14px;
border-radius: 10px;
text-decoration: none;
color: rgba(255,255,255,0.9);
font-size: 13.5px;
font-weight: 500;
transition: background 0.15s;
}
.dd-05__link:hover { background: rgba(255,255,255,0.2); color: #fff; }
@media (prefers-reduced-motion: reduce) {
.dd-05__panel { transition: none; }
}
```
### 06. Stagger Children Reveal Dropdown
**Type:** Pure CSS
**Description:** Each menu item cascades in one-by-one with staggered animation-delay values applied via nth-child, creating a flowing sequential reveal.
**HTML:**
```html
```
**CSS:**
```css
.dd-06, .dd-06 *, .dd-06 *::before, .dd-06 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-06 ::selection { background: #6366f1; color: #fff; }
.dd-06 {
--surface: #fff;
--text: #1e293b;
--border: #f1f5f9;
--hover: #f8fafc;
font-family: 'Nunito', sans-serif;
min-height: 360px;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 32px 20px;
background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0f9ff 100%);
}
.dd-06__nav {
display: flex;
align-items: center;
gap: 4px;
background: var(--surface);
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 10px 10px 10px 20px;
box-shadow: 0 4px 20px rgba(0,0,0,.06);
position: relative;
z-index: 100;
}
.dd-06__brand {
font-size: 17px;
font-weight: 800;
color: #6366f1;
margin-right: 12px;
letter-spacing: -0.3px;
}
.dd-06__items { display: flex; gap: 2px; }
.dd-06__item { position: relative; }
.dd-06__item::after {
content: "";
position: absolute;
left: 0; right: 0;
top: 100%;
height: 10px;
/* hover-bridge: invisible strip below the trigger covering
the visible gap before the panel. Lives on .__item (not
the panel, which has overflow:hidden / pointer-events:
none in its closed state) so the parent :hover stays
active while the cursor traverses the gap. */
}
.dd-06__trigger {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 10px;
color: var(--text);
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: background 0.15s, color 0.15s;
}
.dd-06__trigger:hover, .dd-06__item:hover .dd-06__trigger {
background: #eef2ff;
color: #6366f1;
}
.dd-06__arrow {
font-size: 12px;
transition: transform 0.22s ease;
color: #94a3b8;
}
.dd-06__item:hover .dd-06__arrow { transform: rotate(180deg); color: #6366f1; }
/* panel */
.dd-06__panel {
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
min-width: 200px;
background: var(--surface);
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 12px 40px rgba(0,0,0,.10);
padding: 8px;
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
.dd-06__item:hover .dd-06__panel {
opacity: 1;
pointer-events: auto;
}
/* stagger children */
@keyframes dd-06-slide-in {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
.dd-06__link {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 10px;
text-decoration: none;
color: var(--text);
font-size: 13.5px;
font-weight: 600;
opacity: 0;
transition: background 0.15s;
}
.dd-06__item:hover .dd-06__link {
animation: dd-06-slide-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: calc(var(--i) * 60ms);
}
.dd-06__link:hover { background: var(--hover); }
.dd-06__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c, #6366f1);
flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
.dd-06__link { animation: none; opacity: 1; }
.dd-06__panel { transition: none; }
}
```
### 07. Mega Menu Grid Dropdown
**Type:** Pure CSS
**Description:** A full-width mega menu that spans the entire nav bar and organizes links into a multi-column CSS Grid layout with section headings and featured content.
**HTML:**
```html
```
**CSS:**
```css
.dd-07, .dd-07 *, .dd-07 *::before, .dd-07 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-07 ::selection { background: #0ea5e9; color: #fff; }
.dd-07 {
--brand: #0ea5e9;
--surface: #fff;
--text: #0f172a;
--muted: #64748b;
--border: #e2e8f0;
--hover: #f0f9ff;
font-family: 'Inter', sans-serif;
min-height: 380px;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
display: flex;
flex-direction: column;
align-items: stretch;
}
.dd-07__wrapper {
width: 100%;
display: flex;
justify-content: center;
padding: 32px 20px 0;
}
.dd-07__nav {
position: relative;
display: flex;
align-items: center;
gap: 4px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 10px 10px 10px 20px;
box-shadow: 0 2px 16px rgba(0,0,0,.06);
width: 100%;
max-width: 780px;
z-index: 100;
}
.dd-07__brand {
font-size: 18px;
font-weight: 700;
color: var(--brand);
margin-right: 8px;
letter-spacing: -0.5px;
}
.dd-07__items {
display: flex;
align-items: center;
gap: 2px;
flex: 1;
}
.dd-07__simple {
padding: 8px 14px;
color: var(--text);
text-decoration: none;
font-size: 14px;
font-weight: 500;
border-radius: 8px;
transition: background 0.15s, color 0.15s;
}
.dd-07__simple:hover { background: var(--hover); color: var(--brand); }
.dd-07__item { position: relative; }
/* hover-bridge: invisible strip below the trigger covering the 12px gap. */
.dd-07__item::after {
content: "";
position: absolute;
left: 0; right: 0;
top: 100%;
height: 12px;
}
.dd-07__trigger {
display: block;
padding: 8px 14px;
color: var(--text);
text-decoration: none;
font-size: 14px;
font-weight: 500;
border-radius: 8px;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.dd-07__trigger:hover, .dd-07__item:hover .dd-07__trigger {
background: var(--hover);
color: var(--brand);
}
/* mega panel */
.dd-07__mega {
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(-8px);
width: 620px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,.12);
padding: 24px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1.4fr;
gap: 24px;
opacity: 0;
pointer-events: none;
transition:
opacity 0.24s ease,
transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.dd-07__mega::before {
content: "";
position: absolute;
left: 0; right: 0;
top: -12px;
height: 12px;
/* invisible hover-bridge — keeps :hover active while
the cursor traverses the visible gap between trigger
and panel. */
}
.dd-07__item:hover .dd-07__mega {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.dd-07__heading {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.dd-07__col {
display: flex;
flex-direction: column;
gap: 2px;
}
.dd-07__link {
display: block;
padding: 7px 8px;
border-radius: 8px;
text-decoration: none;
color: var(--text);
font-size: 13px;
font-weight: 500;
transition: background 0.15s, color 0.15s;
}
.dd-07__link:hover { background: var(--hover); color: var(--brand); }
.dd-07__featured { display: flex; flex-direction: column; gap: 8px; }
.dd-07__card {
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
border: 1px solid #bae6fd;
border-radius: 12px;
padding: 16px;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.dd-07__new {
display: inline-block;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--brand);
background: #e0f2fe;
padding: 2px 6px;
border-radius: 4px;
align-self: flex-start;
}
.dd-07__card-title {
font-size: 14px;
font-weight: 700;
color: var(--text);
}
.dd-07__card-desc {
font-size: 12px;
color: var(--muted);
line-height: 1.5;
}
.dd-07__card-link {
font-size: 12px;
font-weight: 600;
color: var(--brand);
text-decoration: none;
margin-top: auto;
transition: gap 0.15s;
}
.dd-07__cta {
margin-left: auto;
padding: 8px 18px;
background: var(--brand);
color: #fff;
border-radius: 8px;
text-decoration: none;
font-size: 13.5px;
font-weight: 600;
white-space: nowrap;
transition: opacity 0.15s;
}
.dd-07__cta:hover { opacity: 0.88; }
@media (prefers-reduced-motion: reduce) {
.dd-07__mega { transition: none; }
}
```
### 08. Underline Nav Fade Panel Dropdown
**Type:** Pure CSS
**Description:** An editorial navigation style where a scaleX underline sweeps under the active trigger and a clean panel fades in below with category links.
**HTML:**
```html
```
**CSS:**
```css
.dd-08, .dd-08 *, .dd-08 *::before, .dd-08 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-08 ::selection { background: #1e293b; color: #f8fafc; }
.dd-08 {
--text: #1e293b;
--muted: #64748b;
--surface: #fff;
--border: #e2e8f0;
font-family: 'Inter', sans-serif;
min-height: 360px;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 32px 20px;
background: #fafaf8;
}
.dd-08__nav {
display: flex;
align-items: center;
gap: 0;
background: var(--surface);
border-bottom: 2px solid var(--border);
width: 100%;
max-width: 680px;
padding: 0 24px;
position: relative;
z-index: 100;
}
.dd-08__brand {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 600;
color: var(--text);
text-decoration: none;
padding: 18px 0;
margin-right: 32px;
letter-spacing: -0.5px;
}
.dd-08__brand em { font-style: italic; color: #d97706; }
.dd-08__items { display: flex; gap: 0; }
.dd-08__item { position: relative; }
.dd-08__item::after {
content: "";
position: absolute;
left: 0; right: 0;
top: 100%;
height: 2px;
/* hover-bridge: invisible strip below the trigger covering
the visible gap before the panel. Lives on .__item (not
the panel, which has overflow:hidden / pointer-events:
none in its closed state) so the parent :hover stays
active while the cursor traverses the gap. */
}
.dd-08__trigger {
display: block;
padding: 18px 16px;
color: var(--muted);
text-decoration: none;
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0.02em;
position: relative;
transition: color 0.18s;
}
/* scaleX underline */
.dd-08__trigger::after {
content: '';
position: absolute;
bottom: -2px;
left: 16px;
right: 16px;
height: 2px;
background: var(--accent, var(--text));
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.24s ease-out;
border-radius: 1px;
}
.dd-08__item:hover .dd-08__trigger {
color: var(--text);
}
.dd-08__item:hover .dd-08__trigger::after { transform: scaleX(1); }
/* panel */
.dd-08__panel {
position: absolute;
top: calc(100% + 2px);
left: 0;
background: var(--surface);
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 12px 12px;
box-shadow: 0 12px 32px rgba(0,0,0,.08);
padding: 20px 24px;
display: flex;
gap: 32px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.dd-08__item:hover .dd-08__panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.22s ease, visibility 0s linear 0s;
}
.dd-08__col {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 140px;
}
.dd-08__link {
display: block;
padding: 6px 0;
color: var(--muted);
text-decoration: none;
font-family: 'Fraunces', serif;
font-size: 15px;
font-weight: 400;
transition: color 0.15s;
border-bottom: 1px solid transparent;
}
.dd-08__link:hover { color: var(--text); border-bottom-color: var(--accent, var(--text)); }
@media (prefers-reduced-motion: reduce) {
.dd-08__panel, .dd-08__trigger::after { transition: none; }
}
```
### 09. Details Summary Native Dropdown
**Type:** Pure CSS
**Description:** A fully CSS-only dropdown built on the native HTML details/summary element, styled with custom markers and animated with the [open] attribute selector.
**HTML:**
```html
Click any nav item to toggle
```
**CSS:**
```css
.dd-09, .dd-09 *, .dd-09 *::before, .dd-09 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-09 ::selection { background: #92400e; color: #fffbeb; }
.dd-09 {
--brand: #b45309;
--surface: #fffbeb;
--panel: #fff;
--text: #1c1917;
--muted: #78716c;
--border: #e7e5e4;
--hover: #fef3c7;
font-family: 'Source Sans 3', sans-serif;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(160deg, #fffbeb 0%, #fef3c7 100%);
padding: 40px 20px;
}
.dd-09__layout {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: 100%;
max-width: 640px;
}
.dd-09__nav {
display: flex;
gap: 12px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 10px;
box-shadow: 0 4px 16px rgba(0,0,0,.06);
width: 100%;
justify-content: center;
}
.dd-09__details {
position: relative;
flex: 1;
max-width: 180px;
}
/* hide default marker */
.dd-09__details > summary { list-style: none; }
.dd-09__details > summary::-webkit-details-marker { display: none; }
.dd-09__details > summary::marker { display: none; }
.dd-09__summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-radius: 8px;
cursor: pointer;
user-select: none;
color: var(--text);
font-size: 14px;
font-weight: 600;
transition: background 0.15s, color 0.15s;
gap: 8px;
}
.dd-09__summary:hover { background: var(--hover); color: var(--brand); }
.dd-09__details[open] .dd-09__summary {
background: var(--hover);
color: var(--brand);
}
.dd-09__label { font-family: 'Lora', serif; font-size: 15px; }
.dd-09__arrow {
width: 16px;
height: 16px;
position: relative;
flex-shrink: 0;
overflow: hidden;
}
.dd-09__arrow::before, .dd-09__arrow::after {
content: '';
position: absolute;
top: 50%;
width: 7px;
height: 1.5px;
background: currentColor;
transition: transform 0.22s ease;
}
.dd-09__arrow::before { left: 3px; transform: translateY(-50%) rotate(45deg); transform-origin: center; }
.dd-09__arrow::after { right: 3px; transform: translateY(-50%) rotate(-45deg); transform-origin: center; }
.dd-09__details[open] .dd-09__arrow::before { transform: translateY(-50%) rotate(-45deg); }
.dd-09__details[open] .dd-09__arrow::after { transform: translateY(-50%) rotate(45deg); }
.dd-09__panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 100%;
min-width: 160px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,.10);
padding: 6px;
display: flex;
flex-direction: column;
gap: 2px;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.34s ease, opacity 0.22s ease;
z-index: 10;
}
.dd-09__details[open] .dd-09__panel {
max-height: 400px;
opacity: 1;
}
.dd-09__link {
display: block;
padding: 9px 12px;
border-radius: 7px;
text-decoration: none;
color: var(--text);
font-size: 13.5px;
font-weight: 500;
font-family: 'Lora', serif;
transition: background 0.15s, color 0.15s;
}
.dd-09__link:hover { background: var(--hover); color: var(--brand); }
.dd-09__hint {
font-size: 12px;
color: var(--muted);
font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
.dd-09__panel, .dd-09__arrow::before, .dd-09__arrow::after,
.dd-09__summary { transition: none; }
}
```
### 10. Checkbox Hack Mobile Nav Dropdown
**Type:** Pure CSS
**Description:** A pure CSS hamburger-to-X mobile nav using the checkbox hack — an invisible input toggled by a label drives the entire menu open/close state.
**HTML:**
```html
```
**CSS:**
```css
.dd-10, .dd-10 *, .dd-10 *::before, .dd-10 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-10 ::selection { background: #111827; color: #f9fafb; }
.dd-10 {
--ink: #111827;
--surface: #fff;
--accent: #f59e0b;
--border: #f3f4f6;
font-family: 'Space Grotesk', sans-serif;
min-height: 380px;
display: flex;
flex-direction: column;
background: linear-gradient(160deg, #fff 0%, #f9fafb 100%);
max-width: 440px;
margin: 0 auto;
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
/* hidden checkbox */
.dd-10__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.dd-10__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid var(--border);
background: var(--surface);
position: relative;
z-index: 10;
}
.dd-10__brand {
font-size: 20px;
font-weight: 700;
color: var(--ink);
text-decoration: none;
letter-spacing: -0.5px;
}
.dd-10__hamburger {
width: 40px;
height: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
cursor: pointer;
border-radius: 8px;
transition: background 0.15s;
padding: 8px;
}
.dd-10__hamburger:hover { background: #f9fafb; }
.dd-10__hamburger span {
display: block;
width: 20px;
height: 2px;
background: var(--ink);
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.2s ease;
transform-origin: center;
}
/* checked: hamburger → X */
.dd-10__input:checked ~ .dd-10__header .dd-10__hamburger span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.dd-10__input:checked ~ .dd-10__header .dd-10__hamburger span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.dd-10__input:checked ~ .dd-10__header .dd-10__hamburger span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* menu panel */
.dd-10__menu {
display: flex;
flex-direction: column;
background: var(--surface);
max-height: 0;
overflow: hidden;
opacity: 0;
transition:
max-height 0.38s ease,
opacity 0.25s ease;
}
.dd-10__input:checked ~ .dd-10__menu {
max-height: 400px;
opacity: 1;
}
.dd-10__link {
display: block;
padding: 18px 24px;
color: var(--ink);
text-decoration: none;
font-size: 22px;
font-weight: 700;
border-bottom: 1px solid var(--border);
letter-spacing: -0.5px;
transition: color 0.15s, padding-left 0.2s ease;
}
.dd-10__link:hover { color: var(--accent); padding-left: 32px; }
.dd-10__link--cta {
color: var(--accent);
font-size: 15px;
letter-spacing: 0;
font-weight: 600;
border-bottom: none;
padding: 20px 24px;
}
.dd-10__link--cta:hover { color: #d97706; padding-left: 32px; }
@media (prefers-reduced-motion: reduce) {
.dd-10__menu, .dd-10__hamburger span, .dd-10__link { transition: none; }
}
```
### 11. Nested Multi-Level Dropdown
**Type:** Pure CSS
**Description:** A three-level deep nested dropdown where each submenu flies out to the right of its parent item, triggered purely by CSS hover on sibling selectors.
**HTML:**
```html
```
**CSS:**
```css
.dd-11, .dd-11 *, .dd-11 *::before, .dd-11 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-11 ::selection { background: #1d4ed8; color: #eff6ff; }
.dd-11 {
--brand: #1d4ed8;
--surface: #fff;
--text: #1e293b;
--muted: #64748b;
--border: #e2e8f0;
--hover: #eff6ff;
font-family: 'Manrope', sans-serif;
min-height: 380px;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 32px 20px;
background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
}
.dd-11__nav {
position: relative;
z-index: 100;
}
.dd-11__list {
list-style: none;
display: flex;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 6px;
gap: 2px;
box-shadow: 0 4px 20px rgba(0,0,0,.07);
}
.dd-11__list--root > .dd-11__item { position: relative; }
/* submenus */
.dd-11__sub {
list-style: none;
position: absolute;
top: 0;
left: 100%;
min-width: 170px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0,0,0,.12);
padding: 5px;
display: flex;
flex-direction: column;
gap: 1px;
opacity: 0;
pointer-events: none;
transform: translateX(4px);
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 10;
}
/* Hover bridges — must be on the .dd-11__item (the :hover target),
NOT on .dd-11__sub because the sub has pointer-events:none at rest
so its ::before is unreachable. Nested items extend their right
edge by an invisible strip covering the gap to the submenu. */
.dd-11__item { position: relative; }
.dd-11__item:not(.dd-11__list--root > .dd-11__item)::after {
content: "";
position: absolute;
top: 0; bottom: 0;
left: 100%;
width: 10px;
}
/* Root-level items drop submenus DOWNWARD, so bridge goes BELOW. */
.dd-11__list--root > .dd-11__item::after {
content: "";
position: absolute;
left: 0; right: 0;
top: 100%;
height: 8px;
}
/* first level drops down */
.dd-11__list--root > .dd-11__item > .dd-11__sub {
top: calc(100% + 8px);
left: 0;
transform: translateY(-4px);
}
.dd-11__list--root > .dd-11__item:hover > .dd-11__sub {
transform: translateY(0);
}
.dd-11__item:hover > .dd-11__sub {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.dd-11__list--root > .dd-11__item:hover > .dd-11__sub {
opacity: 1;
pointer-events: auto;
}
.dd-11__link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 14px;
border-radius: 8px;
text-decoration: none;
color: var(--text);
font-size: 13.5px;
font-weight: 500;
white-space: nowrap;
transition: background 0.15s, color 0.15s;
gap: 8px;
}
.dd-11__link:hover { background: var(--hover); color: var(--brand); }
/* nested indicator arrow */
.dd-11__item--has-sub > .dd-11__link::after {
content: '›';
font-size: 14px;
font-weight: 400;
color: var(--muted);
margin-left: auto;
}
/* root level items use down arrow */
.dd-11__list--root > .dd-11__item--has-sub > .dd-11__link::after {
content: '⌄';
font-size: 11px;
}
.dd-11__list--root .dd-11__link {
font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
.dd-11__sub { transition: none; }
}
```
### 12. Icon Sidebar Flyout Dropdown
**Type:** Pure CSS
**Description:** A compact icon-only rail navigation where hovering each icon causes a labeled flyout panel to slide in from the right — a common pattern for collapsed sidebars.
**HTML:**
```html
Hover the icons ←
```
**CSS:**
```css
.dd-12, .dd-12 *, .dd-12 *::before, .dd-12 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-12 ::selection { background: #7c3aed; color: #ede9fe; }
.dd-12 {
--accent: #7c3aed;
--surface: #fff;
--rail-bg: #fafafa;
--text: #1e1b4b;
--muted: #6b7280;
--border: #ede9fe;
--hover-icon: #f5f3ff;
font-family: 'IBM Plex Sans', sans-serif;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
padding: 40px 20px;
}
.dd-12__app {
display: flex;
height: 300px;
width: 100%;
max-width: 560px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
overflow: visible;
box-shadow: 0 8px 32px rgba(124,58,237,.12);
}
.dd-12__rail {
width: 60px;
background: var(--rail-bg);
border-right: 1px solid var(--border);
border-radius: 16px 0 0 16px;
display: flex;
flex-direction: column;
align-items: center;
padding: 14px 0;
gap: 4px;
flex-shrink: 0;
position: relative;
z-index: 10;
overflow: visible;
}
.dd-12__brand-icon {
font-size: 18px;
color: var(--accent);
font-weight: 700;
margin-bottom: 16px;
}
.dd-12__item {
position: relative;
width: 100%;
display: flex;
justify-content: center;
}
/* hover-bridge: invisible strip on the right of the icon-rail item
covering the 8px gap to the flyout panel. Lives on .__item (not
.__flyout, which has pointer-events:none at rest). */
.dd-12__item::after {
content: "";
position: absolute;
top: 0; bottom: 0;
left: 100%;
width: 8px;
}
.dd-12__icon-wrap {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
cursor: pointer;
transition: background 0.15s;
}
.dd-12__item:hover .dd-12__icon-wrap {
background: var(--hover-icon);
}
.dd-12__icon { font-size: 18px; }
/* flyout panel */
.dd-12__flyout {
position: absolute;
left: calc(100% + 8px);
top: -4px;
min-width: 170px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 8px 28px rgba(124,58,237,.15);
padding: 12px;
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0;
pointer-events: none;
transform: translateX(-8px);
transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
z-index: 20;
}
.dd-12__item:hover .dd-12__flyout {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.dd-12__fly-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
padding: 0 4px 4px;
}
.dd-12__fly-divider {
height: 1px;
background: var(--border);
margin: 4px 0;
}
.dd-12__fly-link {
display: block;
padding: 7px 10px;
border-radius: 7px;
text-decoration: none;
color: var(--text);
font-size: 13px;
font-weight: 500;
transition: background 0.12s, color 0.12s;
}
.dd-12__fly-link:hover { background: var(--hover-icon); color: var(--accent); }
.dd-12__main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.dd-12__hint {
color: var(--muted);
font-size: 13px;
font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
.dd-12__flyout { transition: none; }
}
```
### 13. Split-Screen Mega Menu Dropdown
**Type:** Pure CSS
**Description:** A full-width two-column mega menu with a rich image panel on the left and categorized links on the right, revealing with a smooth fade-up transition.
**HTML:**
```html
```
**CSS:**
```css
.dd-13, .dd-13 *, .dd-13 *::before, .dd-13 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-13 ::selection { background: #1e293b; color: #f8fafc; }
.dd-13 {
--text: #1e293b;
--muted: #64748b;
--surface: #fff;
--border: #e2e8f0;
font-family: 'Inter', sans-serif;
min-height: 400px;
background: #f8f7f4;
display: flex;
flex-direction: column;
align-items: center;
}
.dd-13__wrap {
width: 100%;
padding: 32px 20px 0;
display: flex;
justify-content: center;
}
.dd-13__nav {
display: flex;
align-items: center;
gap: 4px;
background: var(--surface);
border-bottom: 1px solid var(--border);
width: 100%;
max-width: 720px;
padding: 0 20px;
position: relative;
z-index: 100;
border-radius: 12px 12px 0 0;
box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.dd-13__brand {
font-family: 'Playfair Display', serif;
font-size: 20px;
font-weight: 700;
color: var(--text);
text-decoration: none;
letter-spacing: -0.3px;
padding: 16px 0;
margin-right: 24px;
}
.dd-13__items {
display: flex;
align-items: center;
gap: 0;
margin-left: auto;
}
.dd-13__item { position: relative; }
.dd-13__trigger, .dd-13__plain {
display: block;
padding: 18px 14px;
color: var(--muted);
text-decoration: none;
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0.03em;
transition: color 0.15s;
}
.dd-13__trigger:hover, .dd-13__item:hover .dd-13__trigger,
.dd-13__plain:hover { color: var(--text); }
/* mega panel */
.dd-13__mega {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-10px);
width: 580px;
background: var(--surface);
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 16px 16px;
box-shadow: 0 24px 60px rgba(0,0,0,.13);
display: grid;
grid-template-columns: 1.2fr 1fr;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition:
opacity 0.26s ease,
transform 0.32s cubic-bezier(0.16,1,0.3,1);
}
.dd-13__item:hover .dd-13__mega {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.dd-13__visual {
background: linear-gradient(145deg, #1e293b 0%, #334155 50%, #475569 100%);
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 220px;
}
.dd-13__vis-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
.dd-13__vis-title {
font-family: 'Playfair Display', serif;
font-size: 20px;
color: #fff;
font-weight: 700;
line-height: 1.25;
}
.dd-13__vis-sub {
font-size: 12.5px;
color: rgba(255,255,255,0.65);
line-height: 1.5;
margin-top: 4px;
flex: 1;
}
.dd-13__vis-cta {
color: rgba(255,255,255,0.85);
text-decoration: none;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.03em;
margin-top: 8px;
transition: color 0.15s;
}
.dd-13__vis-cta:hover { color: #fff; }
.dd-13__links {
padding: 24px 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.dd-13__group {
display: flex;
flex-direction: column;
gap: 4px;
}
.dd-13__group-heading {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.dd-13__link {
display: block;
padding: 5px 0;
color: var(--text);
text-decoration: none;
font-size: 13px;
font-weight: 450;
transition: color 0.15s;
}
.dd-13__link:hover { color: #0ea5e9; }
@media (prefers-reduced-motion: reduce) {
.dd-13__mega { transition: none; }
}
```
### 14. Segmented Pill Nav Dropdown
**Type:** Pure CSS
**Description:** A pill-shaped navigation bar with a sliding background highlight that follows focus between segments, each revealing its own dropdown panel below.
**HTML:**
```html
```
**CSS:**
```css
.dd-14, .dd-14 *, .dd-14 *::before, .dd-14 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-14 ::selection { background: #0f172a; color: #f8fafc; }
.dd-14 {
--trough: #f1f5f9;
--pill-bg: #fff;
--text: #0f172a;
--muted: #64748b;
--accent: #6366f1;
--border: #e2e8f0;
--shadow: 0 2px 8px rgba(0,0,0,.08);
font-family: 'DM Sans', sans-serif;
min-height: 360px;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 36px 20px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
.dd-14__scene {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: 100%;
position: relative;
z-index: 100;
}
.dd-14__rail {
display: flex;
gap: 4px;
background: var(--trough);
border-radius: 100px;
padding: 4px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
}
.dd-14__seg { position: relative; }
/* hover-bridge: invisible strip below the pill covering the 10px gap. */
.dd-14__seg::after {
content: "";
position: absolute;
left: 0; right: 0;
top: 100%;
height: 10px;
}
.dd-14__pill {
display: flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
border: none;
border-radius: 100px;
background: transparent;
cursor: pointer;
font-family: inherit;
font-size: 13.5px;
font-weight: 600;
color: var(--muted);
transition: background 0.18s, color 0.18s, box-shadow 0.18s;
white-space: nowrap;
position: relative;
}
.dd-14__pill:hover,
.dd-14__seg:hover .dd-14__pill {
background: var(--pill-bg);
color: var(--text);
box-shadow: var(--shadow);
}
/* dropdown */
.dd-14__drop {
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
min-width: 160px;
background: var(--pill-bg);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 12px 36px rgba(0,0,0,.12);
padding: 6px;
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.16,1,0.3,1);
}
.dd-14__seg:hover .dd-14__drop {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
/* Hover bridge — keeps :hover active while cursor crosses the 10px
visible gap between the pill trigger and the dropdown panel. */
.dd-14__drop::before {
content: "";
position: absolute;
left: 0; right: 0;
top: -10px;
height: 10px;
}
.dd-14__link {
display: block;
padding: 9px 13px;
border-radius: 8px;
text-decoration: none;
color: var(--text);
font-size: 13.5px;
font-weight: 500;
transition: background 0.14s, color 0.14s;
}
.dd-14__link:hover { background: #eef2ff; color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
.dd-14__drop, .dd-14__pill { transition: none; }
}
```
### 15. Color Swatch Picker Dropdown
**Type:** Pure CSS
**Description:** A color palette dropdown that reveals a grid of color swatches on hover, with a tooltip label appearing on individual swatch hover using CSS only.
**HTML:**
```html
Choose a Color
Hover the button to pick a palette color
```
**CSS:**
```css
.dd-15, .dd-15 *, .dd-15 *::before, .dd-15 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-15 ::selection { background: #6366f1; color: #fff; }
.dd-15 {
--surface: #fff;
--border: #e2e8f0;
--text: #0f172a;
--muted: #64748b;
font-family: 'Inter', sans-serif;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #fafafa 0%, #f4f4f5 100%);
padding: 40px 20px;
}
.dd-15__scene {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.dd-15__control { position: relative; z-index: 100; }
.dd-15__item { position: relative; }
.dd-15__item::after {
content: "";
position: absolute;
left: 0; right: 0;
top: 100%;
height: 10px;
/* hover-bridge: invisible strip below the trigger covering
the visible gap before the panel. Lives on .__item (not
the panel, which has overflow:hidden / pointer-events:
none in its closed state) so the parent :hover stays
active while the cursor traverses the gap. */
}
.dd-15__trigger {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 500;
color: var(--text);
box-shadow: 0 1px 4px rgba(0,0,0,.05);
transition: box-shadow 0.15s, border-color 0.15s;
}
.dd-15__trigger:hover, .dd-15__item:hover .dd-15__trigger {
box-shadow: 0 4px 16px rgba(0,0,0,.1);
border-color: #c7d2fe;
}
.dd-15__swatch-dot {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--current, #6366f1);
border: 2px solid rgba(255,255,255,0.8);
box-shadow: 0 0 0 1px rgba(0,0,0,.12);
flex-shrink: 0;
}
.dd-15__chevron {
font-size: 11px;
color: var(--muted);
transition: transform 0.2s;
}
.dd-15__item:hover .dd-15__chevron { transform: rotate(180deg); }
/* panel */
.dd-15__panel {
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
width: 220px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 12px 40px rgba(0,0,0,.12);
padding: 14px;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.16,1,0.3,1);
}
.dd-15__item:hover .dd-15__panel {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.dd-15__panel-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 10px;
}
.dd-15__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
}
.dd-15__sw {
width: 26px;
height: 26px;
border-radius: 6px;
background: var(--sw, #ccc);
cursor: pointer;
position: relative;
transition: transform 0.15s, box-shadow 0.15s;
box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.dd-15__sw:hover {
transform: scale(1.22);
box-shadow: 0 4px 10px rgba(0,0,0,.2);
z-index: 2;
}
/* CSS tooltip via attr() */
.dd-15__sw::after {
content: attr(data-name);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: #0f172a;
color: #fff;
font-size: 10px;
font-weight: 500;
padding: 3px 7px;
border-radius: 5px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease 0.1s;
}
.dd-15__sw:hover::after { opacity: 1; }
.dd-15__label {
font-size: 12.5px;
color: var(--muted);
font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
.dd-15__panel, .dd-15__sw, .dd-15__sw::after,
.dd-15__chevron { transition: none; }
}
```
### 16. Context Menu Right-Click Dropdown
**Type:** CSS + JS
**Description:** A custom right-click context menu that appears at the exact cursor position on contextmenu event, with smooth CSS entrance animation and click-outside dismissal.
**HTML:**
```html
Right-click anywhere in this area
📄
document.pdf
```
**CSS:**
```css
.dd-16, .dd-16 *, .dd-16 *::before, .dd-16 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-16 ::selection { background: #0ea5e9; color: #fff; }
.dd-16 {
--surface: #fff;
--border: #e5e7eb;
--text: #111827;
--muted: #6b7280;
--danger: #ef4444;
--accent: #0ea5e9;
--hover: #f0f9ff;
font-family: 'Inter', sans-serif;
min-height: 360px;
position: relative;
background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
user-select: none;
}
.dd-16__zone {
width: 100%;
height: 360px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
cursor: context-menu;
border: 2px dashed #bae6fd;
border-radius: 16px;
}
.dd-16__hint {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: var(--muted);
font-size: 13.5px;
font-weight: 500;
}
.dd-16__hint-icon { font-size: 28px; }
.dd-16__file {
display: flex;
align-items: center;
gap: 8px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 18px;
font-size: 13.5px;
font-weight: 500;
color: var(--text);
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
transition: box-shadow 0.15s;
}
.dd-16__file:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
/* context menu */
.dd-16__menu {
position: fixed;
min-width: 190px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
padding: 6px;
list-style: none;
z-index: 9999;
opacity: 0;
transform: scale(0.92);
transform-origin: top left;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16,1,0.3,1);
}
.dd-16__menu.is-open {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.dd-16__item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 7px;
font-size: 13.5px;
font-weight: 500;
color: var(--text);
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.dd-16__item:hover { background: var(--hover); color: var(--accent); }
.dd-16__item--danger { color: var(--danger); }
.dd-16__item--danger:hover { background: #fef2f2; color: var(--danger); }
.dd-16__icon { font-size: 14px; width: 18px; text-align: center; }
.dd-16__sep {
height: 1px;
background: var(--border);
margin: 4px 0;
}
@media (prefers-reduced-motion: reduce) {
.dd-16__menu { transition: none; }
}
```
**JS:**
```js
(function() {
const zone = document.getElementById('dd-16-zone');
const menu = document.getElementById('dd-16-menu');
if (!zone || !menu) return;
function openMenu(x, y) {
menu.classList.add('is-open');
// position with viewport clamping
const mw = menu.offsetWidth || 200;
const mh = menu.offsetHeight || 240;
const cx = Math.min(x, window.innerWidth - mw - 8);
const cy = Math.min(y, window.innerHeight - mh - 8);
menu.style.left = cx + 'px';
menu.style.top = cy + 'px';
}
function closeMenu() {
menu.classList.remove('is-open');
}
zone.addEventListener('contextmenu', function(e) {
e.preventDefault();
closeMenu();
// small delay so scale origin resets
requestAnimationFrame(() => openMenu(e.clientX, e.clientY));
});
document.addEventListener('click', function(e) {
if (!menu.contains(e.target)) closeMenu();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeMenu();
});
// item click closes menu
menu.querySelectorAll('.dd-16__item').forEach(function(item) {
item.addEventListener('click', closeMenu);
});
})();
```
### 17. Keyboard Accessible Dropdown
**Type:** CSS + JS
**Description:** A fully ARIA-compliant dropdown with keyboard navigation: arrow keys move focus between items, Escape closes the menu, and Enter activates links.
**HTML:**
```html
▶ Keyboard
Try: Enter, ↑↓, Escape
Fully ARIA-compliant — works with screen readers
```
**CSS:**
```css
.dd-17, .dd-17 *, .dd-17 *::before, .dd-17 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-17 ::selection { background: #059669; color: #ecfdf5; }
.dd-17 {
--brand: #059669;
--surface: #fff;
--text: #111827;
--muted: #6b7280;
--border: #e5e7eb;
--hover: #f0fdf4;
--danger: #ef4444;
font-family: 'Inter', sans-serif;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
padding: 40px 20px;
}
.dd-17__scene {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
position: relative;
z-index: 100;
}
.dd-17__hint-row {
display: flex;
align-items: center;
gap: 12px;
}
.dd-17__badge {
background: #d1fae5;
color: var(--brand);
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 100px;
letter-spacing: 0.04em;
}
.dd-17__tip {
font-size: 12.5px;
color: var(--muted);
}
.dd-17__wrap { position: relative; }
.dd-17__trigger {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px 10px 18px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: var(--text);
box-shadow: 0 1px 4px rgba(0,0,0,.05);
transition: box-shadow 0.15s, border-color 0.15s;
}
.dd-17__trigger:hover { box-shadow: 0 4px 16px rgba(0,0,0,.10); border-color: #6ee7b7; }
.dd-17__trigger:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.dd-17__trigger[aria-expanded="true"] {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(5,150,105,.12);
}
.dd-17__avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--brand);
color: #fff;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.04em;
}
.dd-17__menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 200px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0,0,0,.12);
padding: 6px;
list-style: none;
opacity: 0;
transform: translateY(-8px) scale(0.97);
transform-origin: top right;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.16,1,0.3,1);
}
.dd-17__menu[aria-hidden="false"] {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.dd-17__item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 8px;
text-decoration: none;
color: var(--text);
font-size: 13.5px;
font-weight: 500;
transition: background 0.12s, color 0.12s;
}
.dd-17__item:hover,
.dd-17__item:focus-visible {
background: var(--hover);
color: var(--brand);
outline: none;
}
.dd-17__item--danger { color: var(--danger); }
.dd-17__item--danger:hover,
.dd-17__item--danger:focus-visible { background: #fef2f2; color: var(--danger); }
.dd-17__sep { height: 1px; background: var(--border); margin: 4px 0; }
.dd-17__a11y-note {
font-size: 12px;
color: var(--muted);
font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
.dd-17__menu { transition: none; }
}
```
**JS:**
```js
(function() {
const btn = document.getElementById('dd-17-btn');
const menu = document.getElementById('dd-17-menu');
if (!btn || !menu) return;
const getItems = () =>
Array.from(menu.querySelectorAll('[role="menuitem"]'));
function openMenu() {
btn.setAttribute('aria-expanded', 'true');
menu.setAttribute('aria-hidden', 'false');
const items = getItems();
if (items.length) items[0].focus();
}
function closeMenu(returnFocus) {
btn.setAttribute('aria-expanded', 'false');
menu.setAttribute('aria-hidden', 'true');
if (returnFocus) btn.focus();
}
function isOpen() {
return btn.getAttribute('aria-expanded') === 'true';
}
btn.addEventListener('click', function() {
isOpen() ? closeMenu(false) : openMenu();
});
menu.addEventListener('keydown', function(e) {
const items = getItems();
const idx = items.indexOf(document.activeElement);
if (e.key === 'ArrowDown') {
e.preventDefault();
items[(idx + 1) % items.length].focus();
} else if (e.key === 'ArrowUp') {
e.preventDefault();
items[(idx - 1 + items.length) % items.length].focus();
} else if (e.key === 'Home') {
e.preventDefault();
items[0].focus();
} else if (e.key === 'End') {
e.preventDefault();
items[items.length - 1].focus();
} else if (e.key === 'Escape') {
closeMenu(true);
} else if (e.key === 'Tab') {
closeMenu(false);
}
});
btn.addEventListener('keydown', function(e) {
if ((e.key === 'Enter' || e.key === ' ') && !isOpen()) {
e.preventDefault();
openMenu();
} else if (e.key === 'Escape' && isOpen()) {
closeMenu(false);
}
});
document.addEventListener('mousedown', function(e) {
if (!btn.contains(e.target) && !menu.contains(e.target)) {
closeMenu(false);
}
});
})();
```
### 18. Stagger Blur Entrance Dropdown
**Type:** CSS + JS
**Description:** A JS-toggled dropdown where each menu item blurs in from a frosted state, with per-item transition delays applied programmatically for a cinematic cascade.
**HTML:**
```html
```
**CSS:**
```css
.dd-18, .dd-18 *, .dd-18 *::before, .dd-18 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-18 ::selection { background: #7c3aed; color: #ede9fe; }
.dd-18 {
--brand: #7c3aed;
--surface: #fff;
--text: #18181b;
--muted: #71717a;
--border: #e4e4e7;
--hover: #f5f3ff;
font-family: 'Space Grotesk', sans-serif;
min-height: 380px;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 36px 20px;
background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
}
.dd-18__scene {
width: 100%;
max-width: 480px;
position: relative;
z-index: 100;
}
.dd-18__nav {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 12px 16px;
box-shadow: 0 4px 20px rgba(124,58,237,.1);
}
.dd-18__brand {
font-size: 18px;
font-weight: 700;
color: var(--brand);
letter-spacing: -0.5px;
}
.dd-18__group { position: relative; }
.dd-18__trigger {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
background: var(--brand);
border: none;
border-radius: 10px;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: #fff;
transition: opacity 0.15s;
}
.dd-18__trigger:hover { opacity: 0.9; }
.dd-18__trigger[aria-expanded="true"] { opacity: 0.85; }
.dd-18__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #a78bfa;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dd-18__trigger[aria-expanded="true"] .dd-18__dot {
transform: scale(1.5);
background: #c4b5fd;
}
.dd-18__panel {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 200px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 12px 40px rgba(124,58,237,.18);
padding: 8px;
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.dd-18__panel.is-open {
opacity: 1;
pointer-events: auto;
}
.dd-18__item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 13px;
border-radius: 10px;
text-decoration: none;
color: var(--text);
font-size: 13.5px;
font-weight: 500;
opacity: 0;
filter: blur(6px);
transform: translateY(6px);
transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease, background 0.12s;
}
.dd-18__panel.is-open .dd-18__item {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
.dd-18__item:hover { background: var(--hover); }
.dd-18__item--em { color: var(--brand); font-weight: 700; }
.dd-18__sep { height: 1px; background: var(--border); margin: 4px 0; }
@media (prefers-reduced-motion: reduce) {
.dd-18__item, .dd-18__panel { transition: none; filter: none; }
.dd-18__panel.is-open .dd-18__item { opacity: 1; filter: none; transform: none; }
}
```
**JS:**
```js
(function() {
var btn = document.getElementById('dd-18-btn');
var panel = document.getElementById('dd-18-panel');
if (!btn || !panel) return;
var items = Array.from(panel.querySelectorAll('.dd-18__item'));
items.forEach(function(el, i) { el.dataset.delay = i * 55; });
function openPanel() {
panel.classList.add('is-open');
btn.setAttribute('aria-expanded', 'true');
items.forEach(function(el) { el.style.transitionDelay = el.dataset.delay + 'ms'; });
}
function closePanel() {
items.forEach(function(el) { el.style.transitionDelay = '0ms'; });
panel.classList.remove('is-open');
btn.setAttribute('aria-expanded', 'false');
}
btn.addEventListener('click', function(e) {
e.stopPropagation();
panel.classList.contains('is-open') ? closePanel() : openPanel();
});
document.addEventListener('click', function(e) {
if (!panel.contains(e.target) && e.target !== btn) closePanel();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closePanel();
});
})();
```
### 19. Command Palette Search Dropdown
**Type:** CSS + JS
**Description:** A Spotlight/Linear-style command palette that filters a list of commands in real time as you type, with keyboard navigation and highlighted match text.
**HTML:**
```html
- Quick Actions
- 📄New Document⌘N
- 📁Open File⌘O
- 💾Save Project⌘S
- Navigation
- 🏠Go to Dashboard
- ⚙Go to Settings
- 📊Go to Analytics
- Theme
- 🌙Toggle Dark Mode
- 🔆Toggle Compact View
```
**CSS:**
```css
.dd-19, .dd-19 *, .dd-19 *::before, .dd-19 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-19 ::selection { background: #6366f1; color: #fff; }
.dd-19 {
--brand: #6366f1;
--surface: #fff;
--text: #111827;
--muted: #6b7280;
--border: #e5e7eb;
--hover: #f5f3ff;
font-family: 'Inter', sans-serif;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
padding: 40px 20px;
position: relative;
}
.dd-19__scene {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: 100%;
max-width: 520px;
position: relative;
}
.dd-19__open-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 500;
color: var(--muted);
box-shadow: 0 2px 8px rgba(0,0,0,.06);
transition: box-shadow 0.15s, border-color 0.15s;
}
.dd-19__open-btn:hover { box-shadow: 0 4px 16px rgba(99,102,241,.15); border-color: #c7d2fe; color: var(--text); }
.dd-19__kbd {
background: #f3f4f6;
border: 1px solid var(--border);
border-radius: 5px;
padding: 2px 6px;
font-size: 11px;
font-family: inherit;
color: var(--muted);
margin-left: 4px;
}
.dd-19__backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,.35);
backdrop-filter: blur(2px);
z-index: 200;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.dd-19__backdrop.is-open { opacity: 1; pointer-events: auto; }
.dd-19__palette {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
width: min(520px, 90vw);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 24px 80px rgba(0,0,0,.25);
z-index: 201;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
}
.dd-19__palette.is-open {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
.dd-19__search-row {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.dd-19__search-icon { font-size: 16px; color: var(--muted); flex-shrink: 0; }
.dd-19__input {
flex: 1;
border: none;
outline: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
color: var(--text);
background: transparent;
}
.dd-19__input::placeholder { color: var(--muted); font-weight: 400; }
.dd-19__esc-btn {
background: #f3f4f6;
border: 1px solid var(--border);
border-radius: 6px;
padding: 3px 8px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
color: var(--muted);
font-family: inherit;
transition: background 0.12s;
}
.dd-19__esc-btn:hover { background: #e5e7eb; }
.dd-19__list {
list-style: none;
max-height: 260px;
overflow-y: auto;
padding: 6px;
}
.dd-19__group-label {
padding: 8px 12px 4px;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
}
.dd-19__cmd {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 8px;
cursor: pointer;
transition: background 0.1s;
}
.dd-19__cmd:hover, .dd-19__cmd.is-focused { background: var(--hover); }
.dd-19__ci { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.dd-19__ct { font-size: 14px; font-weight: 500; color: var(--text); flex: 1; }
.dd-19__ct mark { background: #c7d2fe; color: var(--brand); border-radius: 2px; font-weight: 700; }
.dd-19__footer {
display: flex;
gap: 16px;
padding: 10px 16px;
border-top: 1px solid var(--border);
background: #fafafa;
font-size: 11px;
color: var(--muted);
font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
.dd-19__palette, .dd-19__backdrop { transition: none; }
}
```
**JS:**
```js
(function() {
var openBtn = document.getElementById('dd-19-open');
var closeBtn = document.getElementById('dd-19-close');
var palette = document.getElementById('dd-19-palette');
var backdrop = document.getElementById('dd-19-backdrop');
var input = document.getElementById('dd-19-input');
var list = document.getElementById('dd-19-list');
if (!openBtn || !palette) return;
function getCmds() {
return Array.from(list.querySelectorAll('.dd-19__cmd')).filter(function(el) {
return el.style.display !== 'none';
});
}
function openPalette() {
palette.classList.add('is-open');
backdrop.classList.add('is-open');
setTimeout(function() { input.focus(); }, 50);
}
function closePalette() {
palette.classList.remove('is-open');
backdrop.classList.remove('is-open');
input.value = '';
filterCmds('');
}
function filterCmds(query) {
var q = query.toLowerCase().trim();
list.querySelectorAll('.dd-19__cmd').forEach(function(cmd) {
var label = cmd.dataset.label || '';
var ct = cmd.querySelector('.dd-19__ct');
cmd.classList.remove('is-focused');
if (!q) { cmd.style.display = ''; if (ct) ct.textContent = label; return; }
if (label.toLowerCase().includes(q)) {
cmd.style.display = '';
if (ct) {
var idx = label.toLowerCase().indexOf(q);
ct.innerHTML = label.slice(0, idx) + '' + label.slice(idx, idx + q.length) + '' + label.slice(idx + q.length);
}
} else { cmd.style.display = 'none'; }
});
var visible = getCmds();
if (visible.length) visible[0].classList.add('is-focused');
}
openBtn.addEventListener('click', openPalette);
closeBtn.addEventListener('click', closePalette);
backdrop.addEventListener('click', closePalette);
input.addEventListener('input', function() { filterCmds(input.value); });
document.addEventListener('keydown', function(e) {
if (!palette.classList.contains('is-open')) return;
var cmds = getCmds();
var focused = list.querySelector('.dd-19__cmd.is-focused');
var idx = focused ? cmds.indexOf(focused) : -1;
if (e.key === 'Escape') { closePalette(); }
else if (e.key === 'ArrowDown') {
e.preventDefault();
if (cmds.length) { cmds.forEach(function(c) { c.classList.remove('is-focused'); }); cmds[(idx + 1) % cmds.length].classList.add('is-focused'); }
} else if (e.key === 'ArrowUp') {
e.preventDefault();
if (cmds.length) { cmds.forEach(function(c) { c.classList.remove('is-focused'); }); cmds[(idx - 1 + cmds.length) % cmds.length].classList.add('is-focused'); }
} else if (e.key === 'Enter' && focused) { closePalette(); }
});
})();
```
### 20. Autocomplete Suggestion Dropdown
**Type:** CSS + JS
**Description:** A live autocomplete input that filters a dataset and shows a suggestion dropdown as you type, with keyboard selection and highlighted match prefix.
**HTML:**
```html
🌎 Where to?
Search for a destination
Try: "Tok", "Par", "Bar"
```
**CSS:**
```css
.dd-20, .dd-20 *, .dd-20 *::before, .dd-20 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-20 ::selection { background: #0ea5e9; color: #fff; }
.dd-20 {
--brand: #0ea5e9;
--surface: #fff;
--text: #0f172a;
--muted: #64748b;
--border: #e2e8f0;
--hover: #f0f9ff;
font-family: 'DM Sans', sans-serif;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(160deg, #f0f9ff 0%, #bae6fd 100%);
padding: 40px 20px;
}
.dd-20__card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 28px 24px;
width: 100%;
max-width: 380px;
box-shadow: 0 8px 40px rgba(14,165,233,.15);
position: relative;
}
.dd-20__title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.dd-20__sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.dd-20__field {
display: flex;
align-items: center;
gap: 8px;
border: 2px solid var(--border);
border-radius: 12px;
padding: 10px 14px;
transition: border-color 0.18s, box-shadow 0.18s;
}
.dd-20__field:focus-within {
border-color: var(--brand);
box-shadow: 0 0 0 4px rgba(14,165,233,.12);
}
.dd-20__field-icon { font-size: 16px; color: var(--muted); flex-shrink: 0; }
.dd-20__input {
flex: 1;
border: none;
outline: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
color: var(--text);
background: transparent;
}
.dd-20__input::placeholder { color: #94a3b8; font-weight: 400; }
.dd-20__clear {
background: none;
border: none;
font-size: 18px;
color: var(--muted);
cursor: pointer;
line-height: 1;
opacity: 0;
transition: opacity 0.15s;
}
.dd-20__clear.is-visible { opacity: 1; }
.dd-20__clear:hover { color: var(--text); }
.dd-20__list {
list-style: none;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
max-height: 0;
opacity: 0;
margin-top: 6px;
box-shadow: 0 8px 24px rgba(0,0,0,.10);
transition: max-height 0.3s ease, opacity 0.2s ease;
}
.dd-20__list.is-open { max-height: 280px; opacity: 1; overflow-y: auto; }
.dd-20__list li {
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
transition: background 0.12s;
}
.dd-20__list li:hover, .dd-20__list li.is-active { background: var(--hover); color: var(--brand); }
.dd-20__list li strong { color: var(--brand); font-weight: 700; }
.dd-20__hint { margin-top: 12px; font-size: 12px; color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: reduce) {
.dd-20__list, .dd-20__field { transition: none; }
}
```
**JS:**
```js
(function() {
var data = [
'Tokyo','Paris','Barcelona','Kyoto','Nairobi','Madrid',
'New York','Rio de Janeiro','Sydney','Rome','Oslo','Cairo',
'Toronto','Mexico City','Lisbon','Amsterdam','Doha','Shanghai',
'Dublin','Bergen','Porto','Nicosia','Singapore','Berlin'
];
var flags = ['🇮🇹','🇫🇷','🇧🇦','🇰🇾','🇰🇪','🇪🇸',
'🇺🇸','🇧🇷','🇦🇺','🇮🇹','🇳🇴','🇪🇬',
'🇨🇦','🇲🇽','🇵🇹','🇳🇱','🇶🇦','🇨🇳',
'🇮🇪','🇳🇴','🇵🇹','🇨🇾','🇸🇬','🇩🇪'];
var input = document.getElementById('dd-20-input');
var list = document.getElementById('dd-20-list');
var clearBtn = document.getElementById('dd-20-clear');
var hint = document.getElementById('dd-20-hint');
if (!input || !list) return;
var activeIdx = -1;
function getItems() { return Array.from(list.querySelectorAll('li[data-idx]')); }
function render(query) {
var q = query.trim().toLowerCase();
list.innerHTML = '';
activeIdx = -1;
if (!q) {
list.classList.remove('is-open');
hint && (hint.style.display = '');
clearBtn.classList.remove('is-visible');
return;
}
clearBtn.classList.add('is-visible');
if (hint) hint.style.display = 'none';
var matched = data.filter(function(d) { return d.toLowerCase().includes(q); });
if (!matched.length) {
var li = document.createElement('li');
li.style.color = '#94a3b8'; li.style.cursor = 'default';
li.textContent = 'No destinations found';
list.appendChild(li);
} else {
matched.slice(0, 8).forEach(function(city) {
var li = document.createElement('li');
var origIdx = data.indexOf(city);
var flag = flags[origIdx] || '🌎';
var lc = city.toLowerCase();
var start = lc.indexOf(q);
var highlighted = start > -1
? city.slice(0, start) + '' + city.slice(start, start + q.length) + '' + city.slice(start + q.length)
: city;
li.innerHTML = '' + flag + '' + highlighted + '';
li.dataset.idx = origIdx;
li.addEventListener('mousedown', function() {
input.value = city;
list.classList.remove('is-open');
clearBtn.classList.add('is-visible');
if (hint) hint.style.display = 'none';
});
list.appendChild(li);
});
}
list.classList.add('is-open');
}
input.addEventListener('input', function() { render(input.value); });
input.addEventListener('keydown', function(e) {
var items = getItems();
if (e.key === 'ArrowDown') { e.preventDefault(); activeIdx = (activeIdx + 1) % items.length; }
else if (e.key === 'ArrowUp') { e.preventDefault(); activeIdx = (activeIdx - 1 + items.length) % items.length; }
else if (e.key === 'Enter' && activeIdx > -1) { items[activeIdx].dispatchEvent(new Event('mousedown')); return; }
else if (e.key === 'Escape') { list.classList.remove('is-open'); return; }
items.forEach(function(li, i) { li.classList.toggle('is-active', i === activeIdx); });
});
clearBtn.addEventListener('click', function() { input.value = ''; render(''); input.focus(); });
document.addEventListener('click', function(e) {
if (!e.target.closest('#dd-20-field') && !list.contains(e.target)) list.classList.remove('is-open');
});
})();
```
### 21. Tab Panel Dropdown
**Type:** CSS + JS
**Description:** A dropdown that contains a full tabbed interface inside it, letting users switch between content panels without leaving the nav.
**HTML:**
```html
```
**CSS:**
```css
.dd-21, .dd-21 *, .dd-21 *::before, .dd-21 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-21 ::selection { background: #10b981; color: #fff; }
.dd-21 {
--brand: #10b981;
--surface: #fff;
--text: #064e3b;
--muted: #6b7280;
--border: #d1fae5;
--hover: #ecfdf5;
font-family: 'Plus Jakarta Sans', sans-serif;
min-height: 380px;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 32px 20px;
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}
.dd-21__nav {
display: flex;
align-items: center;
gap: 4px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 10px 10px 10px 20px;
box-shadow: 0 4px 24px rgba(16,185,129,.12);
position: relative;
z-index: 100;
width: 100%;
max-width: 600px;
}
.dd-21__brand { font-size: 17px; font-weight: 700; color: var(--brand); margin-right: 12px; }
.dd-21__items { display: flex; align-items: center; gap: 4px; }
.dd-21__item { position: relative; }
.dd-21__trigger {
padding: 8px 14px;
border: none;
background: none;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: var(--text);
border-radius: 8px;
transition: background 0.15s;
}
.dd-21__trigger:hover { background: var(--hover); }
.dd-21__trigger[aria-expanded="true"] { background: var(--hover); color: var(--brand); }
.dd-21__plain {
padding: 8px 14px;
color: var(--muted);
text-decoration: none;
font-size: 14px;
font-weight: 500;
border-radius: 8px;
transition: background 0.15s, color 0.15s;
}
.dd-21__plain:hover { background: var(--hover); color: var(--text); }
.dd-21__drop {
position: absolute;
top: calc(100% + 10px);
left: 0;
width: 260px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 12px 40px rgba(16,185,129,.14);
overflow: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.dd-21__drop.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.dd-21__tabs {
display: flex;
border-bottom: 1px solid var(--border);
padding: 6px 6px 0;
gap: 2px;
}
.dd-21__tab {
flex: 1;
padding: 8px 6px;
border: none;
border-radius: 8px 8px 0 0;
background: transparent;
cursor: pointer;
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: var(--muted);
border-bottom: 2px solid transparent;
transition: color 0.15s, background 0.15s;
position: relative;
bottom: -1px;
}
.dd-21__tab:hover { color: var(--text); background: #f0fdf4; }
.dd-21__tab.is-active { color: var(--brand); border-bottom-color: var(--brand); background: #f0fdf4; }
.dd-21__panels { padding: 6px; min-height: 140px; }
.dd-21__panel { display: flex; flex-direction: column; gap: 2px; }
.dd-21__panel.is-hidden { display: none; }
@keyframes dd-21-fadein {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.dd-21__panel:not(.is-hidden) { animation: dd-21-fadein 0.22s ease; }
.dd-21__plink {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
border-radius: 9px;
text-decoration: none;
color: var(--text);
font-size: 13.5px;
font-weight: 500;
transition: background 0.12s;
}
.dd-21__plink:hover { background: var(--hover); color: var(--brand); }
@media (prefers-reduced-motion: reduce) {
.dd-21__drop, .dd-21__tab, .dd-21__panel { transition: none; animation: none; }
}
```
**JS:**
```js
(function() {
var btn = document.getElementById('dd-21-btn');
var drop = document.getElementById('dd-21-drop');
if (!btn || !drop) return;
var tabs = Array.from(drop.querySelectorAll('.dd-21__tab'));
var panels = Array.from(drop.querySelectorAll('.dd-21__panel'));
function activateTab(tab) {
tabs.forEach(function(t) { t.classList.remove('is-active'); t.setAttribute('aria-selected', 'false'); });
panels.forEach(function(p) { p.classList.add('is-hidden'); });
tab.classList.add('is-active');
tab.setAttribute('aria-selected', 'true');
var target = document.getElementById(tab.dataset.panel);
if (target) target.classList.remove('is-hidden');
}
tabs.forEach(function(tab) { tab.addEventListener('click', function() { activateTab(tab); }); });
btn.addEventListener('click', function(e) {
e.stopPropagation();
var open = drop.classList.toggle('is-open');
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
document.addEventListener('click', function(e) {
if (!drop.contains(e.target) && e.target !== btn) {
drop.classList.remove('is-open');
btn.setAttribute('aria-expanded', 'false');
}
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') { drop.classList.remove('is-open'); btn.setAttribute('aria-expanded', 'false'); }
});
})();
```
### 22. Custom Animated Select Dropdown
**Type:** CSS + JS
**Description:** A fully custom replacement for the native HTML select element, with animated option reveal, keyboard support, and a value display that updates on selection.
**HTML:**
```html
Choose your plan
Select the option that fits your needs
-
🆕 Free
$0/month
-
🚀 Pro
$12/month
-
👥 Team
$39/month
-
🏗 Enterprise
Custom
No plan selected
```
**CSS:**
```css
.dd-22, .dd-22 *, .dd-22 *::before, .dd-22 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.dd-22 ::selection { background: #f59e0b; color: #fff; }
.dd-22 {
--brand: #f59e0b;
--brand-dark: #d97706;
--surface: #fff;
--text: #1c1917;
--muted: #78716c;
--border: #e7e5e4;
--hover: #fffbeb;
--selected: #fef3c7;
font-family: 'Inter', sans-serif;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 60%, #fde68a 100%);
padding: 40px 20px;
}
.dd-22__card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 28px 24px;
width: 100%;
max-width: 360px;
box-shadow: 0 8px 40px rgba(245,158,11,.15);
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
}
.dd-22__title {
font-size: 20px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.3px;
}
.dd-22__sub { font-size: 13px; color: var(--muted); margin-top: -8px; }
/* custom select wrapper */
.dd-22__select { position: relative; z-index: 100; }
.dd-22__btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 16px;
background: var(--surface);
border: 2px solid var(--border);
border-radius: 12px;
cursor: pointer;
font-family: inherit;
font-size: 14.5px;
font-weight: 500;
color: var(--muted);
text-align: left;
transition: border-color 0.18s, box-shadow 0.18s;
}
.dd-22__btn:hover { border-color: var(--brand); }
.dd-22__btn[aria-expanded="true"] {
border-color: var(--brand);
box-shadow: 0 0 0 4px rgba(245,158,11,.14);
color: var(--text);
}
.dd-22__btn.has-value { color: var(--text); font-weight: 600; }
.dd-22__chevron {
font-size: 14px;
color: var(--muted);
display: inline-block;
transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
flex-shrink: 0;
}
.dd-22__btn[aria-expanded="true"] .dd-22__chevron { transform: rotate(180deg); }
/* option list */
.dd-22__list {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 12px 40px rgba(245,158,11,.18), 0 2px 8px rgba(0,0,0,.06);
list-style: none;
padding: 6px;
transform: scaleY(0);
transform-origin: top center;
opacity: 0;
pointer-events: none;
transition:
transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.2s ease;
}
.dd-22__list.is-open {
transform: scaleY(1);
opacity: 1;
pointer-events: auto;
}
/* stagger options */
.dd-22__opt {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 14px;
border-radius: 9px;
cursor: pointer;
opacity: 0;
transform: translateY(4px);
transition:
opacity 0.28s ease,
transform 0.28s ease,
background 0.12s;
}
.dd-22__list.is-open .dd-22__opt { opacity: 1; transform: translateY(0); }
.dd-22__list.is-open .dd-22__opt:nth-child(1) { transition-delay: 0.04s; }
.dd-22__list.is-open .dd-22__opt:nth-child(2) { transition-delay: 0.09s; }
.dd-22__list.is-open .dd-22__opt:nth-child(3) { transition-delay: 0.14s; }
.dd-22__list.is-open .dd-22__opt:nth-child(4) { transition-delay: 0.19s; }
.dd-22__opt:hover { background: var(--hover); }
.dd-22__opt.is-selected { background: var(--selected); }
.dd-22__opt.is-highlighted { background: var(--hover); outline: 2px solid var(--brand); outline-offset: -2px; }
.dd-22__opt--featured {
border: 1px dashed var(--brand);
margin-top: 4px;
}
.dd-22__opt--featured:hover { background: var(--selected); }
.dd-22__opt-name {
font-size: 14px;
font-weight: 600;
color: var(--text);
display: flex;
align-items: center;
gap: 8px;
}
.dd-22__opt-price {
font-size: 12.5px;
font-weight: 500;
color: var(--muted);
}
/* selected tick */
.dd-22__opt.is-selected .dd-22__opt-name::after {
content: '✓';
color: var(--brand);
font-size: 13px;
font-weight: 700;
}
/* submit button */
.dd-22__submit {
width: 100%;
padding: 12px;
background: var(--brand);
color: #fff;
border: none;
border-radius: 12px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s, transform 0.15s;
margin-top: 4px;
}
.dd-22__submit:hover { background: var(--brand-dark); transform: translateY(-1px); }
.dd-22__submit:active { transform: translateY(0); }
.dd-22__status {
text-align: center;
font-size: 12.5px;
color: var(--muted);
font-style: italic;
min-height: 18px;
}
@media (prefers-reduced-motion: reduce) {
.dd-22__list, .dd-22__opt, .dd-22__chevron, .dd-22__submit { transition: none; }
}
```
**JS:**
```js
(function() {
const btn = document.getElementById('dd-22-btn');
const list = document.getElementById('dd-22-list');
const valSpan = document.getElementById('dd-22-val');
const native = document.getElementById('dd-22-native');
const submitBtn = document.getElementById('dd-22-submit');
const status = document.getElementById('dd-22-status');
if (!btn || !list || !native) return;
const opts = Array.from(list.querySelectorAll('.dd-22__opt'));
let activeIdx = -1;
/* ── open / close ── */
function openList() {
list.classList.add('is-open');
btn.setAttribute('aria-expanded', 'true');
// highlight currently selected
const selIdx = opts.findIndex(function(o) { return o.classList.contains('is-selected'); });
setHighlight(selIdx > -1 ? selIdx : 0);
}
function closeList() {
list.classList.remove('is-open');
btn.setAttribute('aria-expanded', 'false');
activeIdx = -1;
opts.forEach(function(o) { o.classList.remove('is-highlighted'); });
}
function isOpen() { return list.classList.contains('is-open'); }
/* ── highlight (keyboard focus) ── */
function setHighlight(idx) {
opts.forEach(function(o) { o.classList.remove('is-highlighted'); });
if (idx < 0 || idx >= opts.length) return;
opts[idx].classList.add('is-highlighted');
opts[idx].scrollIntoView({ block: 'nearest' });
activeIdx = idx;
}
/* ── select option ── */
function selectOpt(opt) {
opts.forEach(function(o) {
o.classList.remove('is-selected');
o.setAttribute('aria-selected', 'false');
});
opt.classList.add('is-selected');
opt.setAttribute('aria-selected', 'true');
const value = opt.dataset.value;
const name = opt.querySelector('.dd-22__opt-name').textContent.trim();
const price = opt.querySelector('.dd-22__opt-price').textContent.trim();
valSpan.textContent = name + ' — ' + price;
btn.classList.add('has-value');
native.value = value;
native.dispatchEvent(new Event('change', { bubbles: true }));
status.textContent = 'Selected: ' + name + ' (' + price + ')';
closeList();
btn.focus();
}
/* ── events ── */
btn.addEventListener('click', function(e) {
e.stopPropagation();
isOpen() ? closeList() : openList();
});
opts.forEach(function(opt, i) {
opt.addEventListener('click', function() { selectOpt(opt); });
opt.addEventListener('mousemove', function() { setHighlight(i); });
});
btn.addEventListener('keydown', function(e) {
if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
if (!isOpen()) openList();
}
});
list.addEventListener('keydown', function(e) {
if (e.key === 'ArrowDown') {
e.preventDefault();
setHighlight((activeIdx + 1) % opts.length);
} else if (e.key === 'ArrowUp') {
e.preventDefault();
setHighlight((activeIdx - 1 + opts.length) % opts.length);
} else if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
if (activeIdx > -1) selectOpt(opts[activeIdx]);
} else if (e.key === 'Escape' || e.key === 'Tab') {
closeList();
btn.focus();
}
});
// make list focusable for keyboard relay
list.setAttribute('tabindex', '-1');
btn.addEventListener('keydown', function(e) {
if (isOpen() && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
e.preventDefault();
list.focus();
setHighlight(e.key === 'ArrowDown' ? 0 : opts.length - 1);
}
});
document.addEventListener('click', function(e) {
if (!btn.contains(e.target) && !list.contains(e.target)) closeList();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && isOpen()) { closeList(); btn.focus(); }
});
submitBtn && submitBtn.addEventListener('click', function() {
if (!native.value) {
status.textContent = '⚠ Please select a plan first.';
btn.style.borderColor = '#ef4444';
setTimeout(function() { btn.style.borderColor = ''; }, 1500);
} else {
status.textContent = '✓ Proceeding with ' + valSpan.textContent;
}
});
})();
```
---
## 16 CSS Fade In Animation Designs
URL: https://codefronts.com/motion/css-fade-in-animation/
Description: 16 hand-coded CSS fade-in animations with live demos — pure-opacity hero fade with staggered delays, clip-path inset reveal, blur defocus, staggered grid cascade, scroll-triggered IntersectionObserver reveal, directional slide-fade up, scale-up zoom-in, scale-down zoom-in, rotateX perspective tilt, word-by-word split, skew sweep, radial clip-path mask reveal, greyscale-to-color saturate, rotateY flip card, glitch flash multi-step, and cascade letter drop. 13 pure CSS + 3 with a tiny vanilla JS snippet — no framework. animation-fill-mode forwards, prefers-reduced-motion honoured, MIT licensed.
Demo count: 16
### 01. Pure Opacity Hero Fade
**Type:** Pure CSS
**Description:** A layered hero section where eyebrow, heading, paragraph, CTA buttons, and indicator dots each fade in sequentially using staggered animation-delay on a single opacity keyframe.
**HTML:**
```html
Design System v3.0
Build Beautiful
Interfaces Fast
A production-ready design system with 200+ components, dark mode, and accessibility built in.
```
**CSS:**
```css
.fi-01{
--bg:#0a0a12;--accent:#6c63ff;--text:#f0eeff;--sub:#9d97c8;
--dur:1.2s;--ease:cubic-bezier(.16,1,.3,1);
font-family:'DM Sans',sans-serif;
min-height:320px;border-radius:20px;
display:flex;align-items:center;justify-content:center;
padding:40px;overflow:hidden;position:relative;
}
.fi-01::before{
content:'';position:absolute;inset:0;
background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(108,99,255,.18),transparent);
pointer-events:none;
}
.fi-01 *,.fi-01 *::before,.fi-01 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-01 ::selection{background:var(--accent);color:#fff}
.fi-01__inner{text-align:center;position:relative;z-index:1}
.fi-01__eyebrow{
font-size:.75rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
color:var(--accent);margin-bottom:20px;
opacity:0;animation:fi-01-fade var(--dur) var(--ease) .1s forwards;
}
.fi-01__heading{
font-family:'Syne',sans-serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:800;
color:var(--text);line-height:1.1;margin-bottom:16px;
opacity:0;animation:fi-01-fade var(--dur) var(--ease) .35s forwards;
}
.fi-01__heading span{
background:linear-gradient(135deg,#6c63ff,#a78bfa);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.fi-01__sub{
font-size:1rem;color:var(--sub);line-height:1.6;max-width:440px;margin:0 auto 28px;
opacity:0;animation:fi-01-fade var(--dur) var(--ease) .55s forwards;
}
.fi-01__cta{
display:inline-flex;gap:12px;align-items:center;
opacity:0;animation:fi-01-fade var(--dur) var(--ease) .75s forwards;
}
.fi-01__btn{
padding:12px 28px;border-radius:10px;font-size:.95rem;font-weight:500;cursor:pointer;
border:none;transition:transform .2s,box-shadow .2s;
}
.fi-01__btn:hover{transform:translateY(-2px)}
.fi-01__btn--primary{
background:var(--accent);color:#fff;
box-shadow:0 8px 24px rgba(108,99,255,.35);
}
.fi-01__btn--primary:hover{box-shadow:0 12px 32px rgba(108,99,255,.5)}
.fi-01__btn--ghost{
background:rgba(108,99,255,.1);color:var(--text);
border:1px solid rgba(108,99,255,.3);
}
.fi-01__dots{
display:flex;gap:8px;justify-content:center;margin-top:24px;
opacity:0;animation:fi-01-fade var(--dur) var(--ease) .95s forwards;
}
.fi-01__dot{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.3}
.fi-01__dot:nth-child(2){opacity:.6}
.fi-01__dot:nth-child(3){opacity:1}
@keyframes fi-01-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
.fi-01 *{animation:none!important;opacity:1!important}
}
```
### 02. Clip-Path Inset Reveal
**Type:** Pure CSS
**Description:** A cyberpunk status panel that sweeps into view from left using clip-path: inset(0 100% 0 0 round 16px) animated to inset(0 0% 0 0), revealing content like a shutter opening.
**HTML:**
```html
System Status
Neural Core
Online
All subsystems operational. Processing at peak efficiency with zero latency degradation.
99.9%Uptime
0.4msLatency
4.2TBProcessed
```
**CSS:**
```css
.fi-02{
--bg:#06060f;--neon:#00ffe0;--neon2:#ff006e;--text:#e0fff9;
font-family:'Inter',sans-serif;
min-height:320px;border-radius:20px;
display:grid;place-items:center;
padding:40px;overflow:hidden;position:relative;
}
.fi-02 *,.fi-02 *::before,.fi-02 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-02 ::selection{background:var(--neon);color:#000}
/* clip-path reveal: inset(0 100% 0 0) → inset(0 0% 0 0) */
.fi-02__panel{
background:linear-gradient(135deg,rgba(0,255,224,.06),rgba(255,0,110,.06));
border:1px solid rgba(0,255,224,.2);
border-radius:16px;padding:32px 40px;
text-align:center;max-width:500px;
clip-path:inset(0 100% 0 0 round 16px);
animation:fi-02-clip-reveal .9s cubic-bezier(.77,0,.18,1) .2s forwards;
}
.fi-02__label{
font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;
color:var(--neon);margin-bottom:16px;display:block;
}
.fi-02__title{
font-family:'Orbitron',monospace;font-size:clamp(1.6rem,4vw,2.4rem);
font-weight:900;color:var(--text);margin-bottom:12px;
text-shadow:0 0 20px rgba(0,255,224,.4);
}
.fi-02__bar{
height:3px;background:linear-gradient(90deg,var(--neon),var(--neon2));
border-radius:2px;margin:16px 0;
}
.fi-02__desc{font-size:.9rem;color:rgba(224,255,249,.6);line-height:1.6}
.fi-02__stats{
display:flex;gap:24px;justify-content:center;margin-top:24px;
}
.fi-02__stat span{display:block;font-family:'Orbitron',monospace;font-size:1.4rem;font-weight:700;color:var(--neon)}
.fi-02__stat small{font-size:.7rem;color:rgba(224,255,249,.5);text-transform:uppercase;letter-spacing:.1em}
@keyframes fi-02-clip-reveal{
to{clip-path:inset(0 0% 0 0 round 16px)}
}
@media(prefers-reduced-motion:reduce){
.fi-02 *{animation:none!important;clip-path:none!important}
}
```
### 03. Blur Defocus Fade
**Type:** Pure CSS
**Description:** A feature card that emerges from a dreamlike haze using filter: blur(20px) combined with opacity: 0, animating to sharp focus — the cinematographic rack-focus in pure CSS.
**HTML:**
```html
✦
Blur-to-Focus Reveal
Elements emerge from a dreamlike haze into sharp clarity using CSS filter: blur() combined with opacity — the cinematographic focus pull, in pure CSS.
```
**CSS:**
```css
.fi-03{
--bg:#0d0f1a;--purple:#a855f7;--pink:#ec4899;--text:#f8f0ff;
font-family:'Plus Jakarta Sans',sans-serif;
min-height:320px;border-radius:20px;
display:grid;place-items:center;
padding:40px;overflow:hidden;
}
.fi-03 *,.fi-03 *::before,.fi-03 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-03 ::selection{background:var(--purple);color:#fff}
/* blur fade: filter:blur(20px) opacity:0 → blur(0) opacity:1 */
.fi-03__card{
background:linear-gradient(135deg,rgba(168,85,247,.1),rgba(236,72,153,.08));
border:1px solid rgba(168,85,247,.25);border-radius:20px;
padding:36px;max-width:480px;text-align:center;
opacity:0;filter:blur(20px);
animation:fi-03-blur-in 1s cubic-bezier(.4,0,.2,1) .15s forwards;
}
.fi-03__icon{
width:64px;height:64px;border-radius:18px;
background:linear-gradient(135deg,var(--purple),var(--pink));
display:grid;place-items:center;font-size:1.8rem;
margin:0 auto 20px;
box-shadow:0 8px 32px rgba(168,85,247,.4);
}
.fi-03__title{
font-size:clamp(1.4rem,3vw,2rem);font-weight:800;color:var(--text);
margin-bottom:10px;
}
.fi-03__sub{
font-size:.9rem;color:rgba(248,240,255,.55);line-height:1.6;margin-bottom:24px;
}
.fi-03__tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.fi-03__tag{
padding:5px 14px;border-radius:20px;font-size:.75rem;font-weight:700;
background:rgba(168,85,247,.15);color:var(--purple);
border:1px solid rgba(168,85,247,.2);
}
.fi-03__tag:nth-child(2){background:rgba(236,72,153,.15);color:var(--pink);border-color:rgba(236,72,153,.2)}
.fi-03__tag:nth-child(3){background:rgba(168,85,247,.1);color:rgba(248,240,255,.7);border-color:rgba(255,255,255,.1)}
@keyframes fi-03-blur-in{
to{opacity:1;filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){
.fi-03__card{animation:none;opacity:1;filter:none}
}
```
### 04. Staggered Grid Card Fade
**Type:** Pure CSS
**Description:** A dashboard metrics grid where six stat cards stagger into view with nth-child animation-delay offsets, each sliding up from translateY(16px) to its resting position.
**HTML:**
```html
Dashboard Metrics
$84K
Revenue
12.4K
Users
91%
Uptime
3.2s
Avg Load
73%
Retention
4.2★
Rating
```
**CSS:**
```css
.fi-04{
--bg:#0c0e16;--c1:#f97316;--c2:#ef4444;--c3:#a855f7;--c4:#3b82f6;
--c5:#10b981;--c6:#f59e0b;--text:#f5f5f0;
font-family:'DM Sans',sans-serif;
min-height:340px;border-radius:20px;
padding:32px;overflow:hidden;
}
.fi-04 *,.fi-04 *::before,.fi-04 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-04 ::selection{background:#f97316;color:#000}
.fi-04__label{
font-family:'Syne',sans-serif;font-size:.75rem;font-weight:600;
letter-spacing:.2em;text-transform:uppercase;color:rgba(245,245,240,.4);
margin-bottom:20px;
}
.fi-04__grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
gap:14px;
}
.fi-04__card{
border-radius:14px;padding:20px 16px;
opacity:0;transform:translateY(16px);
animation:fi-04-stagger .6s cubic-bezier(.16,1,.3,1) forwards;
}
.fi-04__card:nth-child(1){--delay:.05s;background:linear-gradient(135deg,rgba(249,115,22,.15),rgba(239,68,68,.08));border:1px solid rgba(249,115,22,.25)}
.fi-04__card:nth-child(2){--delay:.12s;background:linear-gradient(135deg,rgba(168,85,247,.15),rgba(99,102,241,.08));border:1px solid rgba(168,85,247,.25)}
.fi-04__card:nth-child(3){--delay:.19s;background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(6,182,212,.08));border:1px solid rgba(59,130,246,.25)}
.fi-04__card:nth-child(4){--delay:.26s;background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(5,150,105,.08));border:1px solid rgba(16,185,129,.25)}
.fi-04__card:nth-child(5){--delay:.33s;background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(234,179,8,.08));border:1px solid rgba(245,158,11,.25)}
.fi-04__card:nth-child(6){--delay:.40s;background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(236,72,153,.08));border:1px solid rgba(239,68,68,.25)}
.fi-04__card{animation-delay:var(--delay)}
.fi-04__num{
font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:800;
line-height:1;margin-bottom:4px;
}
.fi-04__card:nth-child(1) .fi-04__num{color:var(--c1)}
.fi-04__card:nth-child(2) .fi-04__num{color:var(--c3)}
.fi-04__card:nth-child(3) .fi-04__num{color:var(--c4)}
.fi-04__card:nth-child(4) .fi-04__num{color:var(--c5)}
.fi-04__card:nth-child(5) .fi-04__num{color:var(--c6)}
.fi-04__card:nth-child(6) .fi-04__num{color:var(--c2)}
.fi-04__metric{font-size:.72rem;color:rgba(245,245,240,.5);letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px}
.fi-04__bar-bg{height:4px;background:rgba(255,255,255,.07);border-radius:2px}
.fi-04__bar{height:4px;border-radius:2px;transition:width .6s cubic-bezier(.16,1,.3,1)}
.fi-04__card:nth-child(1) .fi-04__bar{background:var(--c1);width:84%}
.fi-04__card:nth-child(2) .fi-04__bar{background:var(--c3);width:67%}
.fi-04__card:nth-child(3) .fi-04__bar{background:var(--c4);width:91%}
.fi-04__card:nth-child(4) .fi-04__bar{background:var(--c5);width:55%}
.fi-04__card:nth-child(5) .fi-04__bar{background:var(--c6);width:73%}
.fi-04__card:nth-child(6) .fi-04__bar{background:var(--c2);width:42%}
@keyframes fi-04-stagger{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
.fi-04 *{animation:none!important;opacity:1!important;transform:none!important}
}
```
### 05. Scroll-Triggered Observer Fade
**Type:** CSS + JS
**Description:** An activity feed list where items observe viewport entry via IntersectionObserver and acquire a .fi-05--visible class, triggering CSS transitions to slide and fade in staggered.
**HTML:**
```html
Activity Feed
Deployment successfulLive
Pull request mergedDone
Build failed on mainError
New user signup spikeAlert
Database backup completeDone
```
**CSS:**
```css
.fi-05{
--bg:#0b1120;--sky:#38bdf8;--emerald:#34d399;--rose:#fb7185;--text:#f0f9ff;
font-family:'Inter',sans-serif;
min-height:360px;border-radius:20px;
padding:32px;overflow:hidden;
}
.fi-05 *,.fi-05 *::before,.fi-05 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-05 ::selection{background:var(--sky);color:#000}
.fi-05__title{
font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
color:rgba(240,249,255,.35);margin-bottom:24px;
}
.fi-05__items{display:flex;flex-direction:column;gap:14px}
/* Items start hidden; JS adds .fi-05--visible via IntersectionObserver */
.fi-05__item{
display:flex;gap:16px;align-items:center;
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
border-radius:12px;padding:16px 20px;
opacity:0;transform:translateX(-24px);
transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
}
.fi-05__item.fi-05--visible{opacity:1;transform:translateX(0)}
.fi-05__item:hover{background:rgba(255,255,255,.06);border-color:rgba(56,189,248,.2)}
.fi-05__dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.fi-05__item:nth-child(1) .fi-05__dot{background:var(--sky);box-shadow:0 0 8px rgba(56,189,248,.5)}
.fi-05__item:nth-child(2) .fi-05__dot{background:var(--emerald);box-shadow:0 0 8px rgba(52,211,153,.5)}
.fi-05__item:nth-child(3) .fi-05__dot{background:var(--rose);box-shadow:0 0 8px rgba(251,113,133,.5)}
.fi-05__item:nth-child(4) .fi-05__dot{background:var(--sky);box-shadow:0 0 8px rgba(56,189,248,.5)}
.fi-05__item:nth-child(5) .fi-05__dot{background:var(--emerald);box-shadow:0 0 8px rgba(52,211,153,.5)}
.fi-05__body{flex:1}
.fi-05__name{font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:3px}
.fi-05__meta{font-size:.75rem;color:rgba(240,249,255,.4)}
.fi-05__badge{
font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:8px;
}
.fi-05__item:nth-child(1) .fi-05__badge{background:rgba(56,189,248,.15);color:var(--sky)}
.fi-05__item:nth-child(2) .fi-05__badge{background:rgba(52,211,153,.15);color:var(--emerald)}
.fi-05__item:nth-child(3) .fi-05__badge{background:rgba(251,113,133,.15);color:var(--rose)}
.fi-05__item:nth-child(4) .fi-05__badge{background:rgba(56,189,248,.15);color:var(--sky)}
.fi-05__item:nth-child(5) .fi-05__badge{background:rgba(52,211,153,.15);color:var(--emerald)}
@media(prefers-reduced-motion:reduce){
.fi-05__item{transition:none;opacity:1;transform:none}
}
```
**JS:**
```js
(function(){
const items = document.querySelectorAll('#fi-05-root .fi-05__item');
const obs = new IntersectionObserver((entries)=>{
entries.forEach(e=>{
if(e.isIntersecting){
const el = e.target;
const idx = [...items].indexOf(el);
setTimeout(()=>el.classList.add('fi-05--visible'), idx * 100);
obs.unobserve(el);
}
});
},{threshold:0.2});
items.forEach(el=>obs.observe(el));
})();
```
### 06. Directional Slide-Fade Up
**Type:** Pure CSS
**Description:** A two-column feature section where the text block slides up from below while card items follow with sequential translateY(30px → 0) + opacity delays for a rising-content effect.
**HTML:**
```html
Premium Features
Everything you need to ship faster
Components slide into view from below as the page loads, creating a sense of content rising to meet the reader — directional fade with translateY.
Explore features →
⚡
Lightning Build
🎨
Design Tokens
🔒
Auth Built-in
```
**CSS:**
```css
.fi-06{
--bg:#0e0a1a;--violet:#7c3aed;--indigo:#4f46e5;--text:#ede9fe;
font-family:'DM Sans',sans-serif;
min-height:340px;border-radius:20px;
padding:40px;overflow:hidden;
display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;
}
.fi-06 *,.fi-06 *::before,.fi-06 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-06 ::selection{background:var(--violet);color:#fff}
/* slide-fade from below: translateY(40px) opacity:0 → Y(0) opacity:1 */
.fi-06__left{
opacity:0;transform:translateY(40px);
animation:fi-06-up .8s cubic-bezier(.16,1,.3,1) .1s forwards;
}
.fi-06__eyebrow{
font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
color:var(--violet);margin-bottom:14px;
}
.fi-06__heading{
font-family:'Syne',sans-serif;font-size:clamp(1.6rem,3vw,2.4rem);
font-weight:800;color:var(--text);line-height:1.15;margin-bottom:14px;
}
.fi-06__body{font-size:.9rem;color:rgba(237,233,254,.5);line-height:1.7;margin-bottom:20px}
.fi-06__link{
display:inline-flex;align-items:center;gap:8px;
font-size:.85rem;font-weight:600;color:var(--violet);
text-decoration:none;border-bottom:1px solid rgba(124,58,237,.3);
padding-bottom:2px;transition:border-color .2s;
}
.fi-06__link:hover{border-color:var(--violet)}
.fi-06__right{display:flex;flex-direction:column;gap:12px}
.fi-06__card{
background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(79,70,229,.06));
border:1px solid rgba(124,58,237,.2);border-radius:12px;padding:16px 20px;
display:flex;gap:14px;align-items:center;
opacity:0;transform:translateY(30px);
}
.fi-06__card:nth-child(1){animation:fi-06-up .7s cubic-bezier(.16,1,.3,1) .3s forwards}
.fi-06__card:nth-child(2){animation:fi-06-up .7s cubic-bezier(.16,1,.3,1) .45s forwards}
.fi-06__card:nth-child(3){animation:fi-06-up .7s cubic-bezier(.16,1,.3,1) .6s forwards}
.fi-06__icon{
width:40px;height:40px;border-radius:10px;
background:rgba(124,58,237,.2);
display:grid;place-items:center;font-size:1.1rem;flex-shrink:0;
}
.fi-06__cname{font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:2px}
.fi-06__cmeta{font-size:.72rem;color:rgba(237,233,254,.4)}
@keyframes fi-06-up{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
.fi-06 *{animation:none!important;opacity:1!important;transform:none!important}
}
```
### 07. Scale-Up Zoom In Fade
**Type:** Pure CSS
**Description:** Four metric stat cards pop into view from scale(0.5) using a spring cubic-bezier(.34,1.56,.64,1) overshoot curve — a satisfying organic scale-up growth entrance.
**HTML:**
```html
2.4B
Requests
99.9
Uptime %
0.4ms
Latency
140+
Countries
```
**CSS:**
```css
.fi-07{
--bg:#060d0d;--teal:#2dd4bf;--cyan:#06b6d4;--text:#f0fdfa;
font-family:'Inter',sans-serif;
min-height:340px;border-radius:20px;
display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;
padding:40px;overflow:hidden;
}
.fi-07 *,.fi-07 *::before,.fi-07 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-07 ::selection{background:var(--teal);color:#000}
/* scale-up fade: scale(.5) opacity:0 → scale(1) opacity:1 */
.fi-07__card{
width:140px;border-radius:16px;padding:24px 16px;text-align:center;
opacity:0;transform:scale(.5);
animation:fi-07-zoom-in .6s cubic-bezier(.34,1.56,.64,1) forwards;
}
.fi-07__card:nth-child(1){--d:.05s;background:linear-gradient(135deg,rgba(45,212,191,.15),rgba(6,182,212,.08));border:1px solid rgba(45,212,191,.3)}
.fi-07__card:nth-child(2){--d:.18s;background:linear-gradient(135deg,rgba(6,182,212,.15),rgba(59,130,246,.08));border:1px solid rgba(6,182,212,.3)}
.fi-07__card:nth-child(3){--d:.31s;background:linear-gradient(135deg,rgba(45,212,191,.12),rgba(52,211,153,.08));border:1px solid rgba(45,212,191,.25)}
.fi-07__card:nth-child(4){--d:.44s;background:linear-gradient(135deg,rgba(6,182,212,.12),rgba(14,165,233,.08));border:1px solid rgba(6,182,212,.25)}
.fi-07__card{animation-delay:var(--d)}
.fi-07__card:hover{transform:scale(1.04)!important;transition:transform .2s}
.fi-07__num{
font-family:'Orbitron',monospace;
font-size:2rem;font-weight:900;
background:linear-gradient(135deg,var(--teal),var(--cyan));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
line-height:1;margin-bottom:6px;
}
.fi-07__label{font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,253,250,.45);margin-bottom:12px}
.fi-07__ring{
width:40px;height:40px;border-radius:50%;
border:3px solid rgba(45,212,191,.15);
border-top-color:var(--teal);
margin:0 auto;
}
@keyframes fi-07-zoom-in{to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
.fi-07 *{animation:none!important;opacity:1!important;transform:scale(1)!important}
}
```
### 08. Scale-Down Zoom In Fade
**Type:** Pure CSS
**Description:** A premium hero that fades in from scale(1.4), shrinking to normal — a dramatic 'punch out' cinematic entrance where content arrives oversized then settles into place.
**HTML:**
```html
👑
Scale-Down
Entrance
Content arrives oversized and shrinks to fit — a cinematic "punch out" effect using scale(1.4) → scale(1) with opacity.
Premium
Exclusive
Gold Tier
```
**CSS:**
```css
.fi-08{
--bg:#100c1e;--gold:#f59e0b;--amber:#d97706;--text:#fffbeb;
font-family:'DM Sans',sans-serif;
min-height:340px;border-radius:20px;
display:grid;place-items:center;
padding:40px;overflow:hidden;position:relative;
}
.fi-08::before{
content:'';position:absolute;inset:0;
background:radial-gradient(circle 300px at 50% 50%,rgba(245,158,11,.07),transparent);
}
.fi-08 *,.fi-08 *::before,.fi-08 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-08 ::selection{background:var(--gold);color:#000}
/* scale-down fade: scale(1.4) opacity:0 → scale(1) opacity:1 — dramatic zoom-in from large */
.fi-08__hero{
text-align:center;position:relative;z-index:1;
opacity:0;transform:scale(1.4);
animation:fi-08-zoom-in .9s cubic-bezier(.25,.46,.45,.94) .1s forwards;
}
.fi-08__crown{font-size:3rem;margin-bottom:12px;display:block}
.fi-08__title{
font-family:'Syne',sans-serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:800;
color:var(--text);line-height:1;margin-bottom:8px;
}
.fi-08__title em{
font-style:normal;
background:linear-gradient(90deg,var(--gold),var(--amber));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.fi-08__sub{
font-size:1rem;color:rgba(255,251,235,.5);margin:16px 0 28px;max-width:360px;
margin-left:auto;margin-right:auto;line-height:1.6;
}
.fi-08__ribbon{
display:inline-flex;gap:20px;align-items:center;
background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);
border-radius:40px;padding:10px 24px;
}
.fi-08__ritem{font-size:.8rem;font-weight:600;color:var(--gold);display:flex;gap:6px;align-items:center}
.fi-08__ritem::before{content:'✦';font-size:.6rem;opacity:.7}
.fi-08__ritem + .fi-08__ritem{border-left:1px solid rgba(245,158,11,.2);padding-left:20px}
@keyframes fi-08-zoom-in{to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
.fi-08 *{animation:none!important;opacity:1!important;transform:scale(1)!important}
}
```
### 09. RotateX Perspective Tilt Fade
**Type:** Pure CSS
**Description:** Three feature tiles tumble forward into position via perspective(800px) rotateX(60deg → 0) with staggered delays, creating a card-dealing 3D tilt-down entrance.
**HTML:**
```html
🌐
Web Platform
Cards tumble into place with a 3D perspective rotation on the X axis.
rotateX
📐
Perspective
CSS perspective() gives depth, making 2D elements feel truly spatial.
perspective
✨
Depth Fade
Combined with opacity, the tilt creates a cinematic camera-drop entrance.
3D fade
```
**CSS:**
```css
.fi-09{
--bg:#0c0d1a;--blue:#3b82f6;--indigo:#6366f1;--text:#eff6ff;
font-family:'Inter',sans-serif;
min-height:360px;border-radius:20px;
display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
padding:40px;overflow:hidden;
perspective:1000px;
}
.fi-09 *,.fi-09 *::before,.fi-09 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-09 ::selection{background:var(--blue);color:#fff}
/* rotateX perspective fade: rotateX(60deg) opacity:0 → rotateX(0) opacity:1 */
.fi-09__tile{
width:160px;min-height:180px;border-radius:14px;padding:24px 18px;
display:flex;flex-direction:column;gap:10px;
opacity:0;transform:perspective(800px) rotateX(60deg) translateY(20px);
animation:fi-09-flip-in .7s cubic-bezier(.16,1,.3,1) forwards;
}
.fi-09__tile:nth-child(1){--d:.05s;background:linear-gradient(160deg,rgba(59,130,246,.18),rgba(99,102,241,.1));border:1px solid rgba(59,130,246,.3)}
.fi-09__tile:nth-child(2){--d:.2s;background:linear-gradient(160deg,rgba(99,102,241,.18),rgba(139,92,246,.1));border:1px solid rgba(99,102,241,.3)}
.fi-09__tile:nth-child(3){--d:.35s;background:linear-gradient(160deg,rgba(139,92,246,.18),rgba(167,139,250,.1));border:1px solid rgba(139,92,246,.3)}
.fi-09__tile{animation-delay:var(--d)}
.fi-09__tile:hover{transform:perspective(800px) rotateX(-4deg) translateY(-4px)!important;transition:transform .3s}
.fi-09__icon{font-size:2rem}
.fi-09__name{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;color:var(--text)}
.fi-09__desc{font-size:.75rem;color:rgba(239,246,255,.45);line-height:1.5;flex:1}
.fi-09__tag{
font-size:.65rem;font-weight:600;padding:3px 8px;border-radius:6px;
background:rgba(59,130,246,.15);color:var(--blue);align-self:flex-start;
}
.fi-09__tile:nth-child(2) .fi-09__tag{background:rgba(99,102,241,.15);color:#818cf8}
.fi-09__tile:nth-child(3) .fi-09__tag{background:rgba(139,92,246,.15);color:#a78bfa}
@keyframes fi-09-flip-in{
to{opacity:1;transform:perspective(800px) rotateX(0deg) translateY(0)}
}
@media(prefers-reduced-motion:reduce){
.fi-09 *{animation:none!important;opacity:1!important;transform:none!important}
}
```
### 10. Word-by-Word Split Fade
**Type:** CSS + JS
**Description:** A headline is split word-by-word into spans via JavaScript, each assigned an animation-delay, creating a sequential typewriter-style word cascade with translateY spring bounce.
**HTML:**
```html
Word-by-word fade
Words appear one by one creating a cinematic reading experience
JavaScript splits text into spans, staggering animation-delay per word index.
↺ Replay
```
**CSS:**
```css
.fi-10{
--bg:#0a0f0a;--green:#4ade80;--lime:#a3e635;--text:#f0fdf4;
font-family:'Plus Jakarta Sans',sans-serif;
min-height:320px;border-radius:20px;
display:grid;place-items:center;
padding:40px;overflow:hidden;
}
.fi-10 *,.fi-10 *::before,.fi-10 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-10 ::selection{background:var(--green);color:#000}
.fi-10__output{text-align:center;max-width:560px}
.fi-10__label{
font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
color:var(--green);margin-bottom:20px;opacity:0;
animation:fi-10-word-fade .5s ease forwards .1s;
}
.fi-10__text{
font-size:clamp(1.4rem,3.5vw,2.2rem);font-weight:800;line-height:1.4;
color:var(--text);margin-bottom:24px;
}
/* JS injects spans; each span animates individually */
.fi-10__word{
display:inline-block;margin-right:.3em;
opacity:0;transform:translateY(12px);
animation:fi-10-word-up .5s cubic-bezier(.16,1,.3,1) forwards;
}
.fi-10__sub{
font-size:.9rem;color:rgba(240,253,244,.45);line-height:1.6;
opacity:0;animation:fi-10-word-fade .5s ease forwards;
}
.fi-10__replay{
margin-top:20px;display:inline-block;
font-size:.75rem;font-weight:600;color:var(--green);cursor:pointer;
border:1px solid rgba(74,222,128,.2);border-radius:20px;padding:6px 16px;
background:rgba(74,222,128,.08);transition:background .2s;
}
.fi-10__replay:hover{background:rgba(74,222,128,.15)}
@keyframes fi-10-word-up{to{opacity:1;transform:translateY(0)}}
@keyframes fi-10-word-fade{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
.fi-10 *{animation:none!important;opacity:1!important;transform:none!important}
}
```
**JS:**
```js
(function(){
const textEl = document.getElementById('fi-10-text');
const subEl = document.getElementById('fi-10-sub');
const replay = document.getElementById('fi-10-replay');
const BASE_DELAY = 0.3;
const STEP = 0.09;
function splitAndAnimate(el, startDelay){
const words = el.textContent.trim().split(/\s+/);
el.innerHTML = '';
words.forEach((w,i)=>{
const span = document.createElement('span');
span.className='fi-10__word';
span.textContent = w;
span.style.animationDelay = (startDelay + i * STEP)+'s';
el.appendChild(span);
});
return startDelay + words.length * STEP;
}
function run(){
const subDelay = splitAndAnimate(textEl, BASE_DELAY);
subEl.style.animationDelay = (subDelay + 0.1)+'s';
subEl.style.animation='none';
void subEl.offsetWidth;
subEl.style.animation='fi-10-word-fade .5s ease forwards';
}
run();
replay.addEventListener('click',()=>{
// Reset and re-animate
textEl.querySelectorAll('.fi-10__word').forEach(s=>{
s.style.animation='none';
void s.offsetWidth;
s.style.animation='fi-10-word-up .5s cubic-bezier(.16,1,.3,1) forwards';
});
subEl.style.animation='none';
void subEl.offsetWidth;
subEl.style.animation='fi-10-word-fade .5s ease forwards';
});
})();
```
### 11. Skew Sweep Fade
**Type:** Pure CSS
**Description:** Three stat panels slice into frame from the left using skewX(15deg) + translateX(-40px) → skewX(0) — a momentum-carrying diagonal sweep entrance.
**HTML:**
```html
847K
Monthly Views
Panels slice into view from the left with a momentum-carrying skew.
12.3K
Subscribers
skewX(15deg) creates a dynamic diagonal entry effect.
98%
Satisfaction
Combined with translateX for a satisfying sweeping entrance.
```
**CSS:**
```css
.fi-11{
--bg:#0f0a14;--rose:#f43f5e;--pink:#ec4899;--text:#fff1f2;
font-family:'DM Sans',sans-serif;
min-height:340px;border-radius:20px;
display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
padding:40px;overflow:hidden;
}
.fi-11 *,.fi-11 *::before,.fi-11 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-11 ::selection{background:var(--rose);color:#fff}
/* skew + fade: skewX(15deg) translateX(-40px) opacity:0 → skewX(0) translateX(0) opacity:1 */
.fi-11__block{
border-radius:14px;padding:28px 24px;flex:1;min-width:160px;max-width:200px;
opacity:0;transform:skewX(15deg) translateX(-40px);
animation:fi-11-skew-in .7s cubic-bezier(.16,1,.3,1) forwards;
}
.fi-11__block:nth-child(1){--d:.05s;background:linear-gradient(135deg,rgba(244,63,94,.18),rgba(236,72,153,.08));border:1px solid rgba(244,63,94,.25)}
.fi-11__block:nth-child(2){--d:.2s;background:linear-gradient(135deg,rgba(236,72,153,.18),rgba(168,85,247,.08));border:1px solid rgba(236,72,153,.25)}
.fi-11__block:nth-child(3){--d:.35s;background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(99,102,241,.08));border:1px solid rgba(168,85,247,.25)}
.fi-11__block{animation-delay:var(--d)}
.fi-11__block:hover{transform:skewX(0) translateX(0) scale(1.03)!important;transition:transform .25s}
.fi-11__num{
font-family:'Syne',sans-serif;font-size:2.2rem;font-weight:800;
line-height:1;margin-bottom:4px;
}
.fi-11__block:nth-child(1) .fi-11__num{color:var(--rose)}
.fi-11__block:nth-child(2) .fi-11__num{color:var(--pink)}
.fi-11__block:nth-child(3) .fi-11__num{color:#a78bfa}
.fi-11__stat{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,241,242,.45);margin-bottom:14px}
.fi-11__divider{height:1px;background:rgba(255,255,255,.08);margin-bottom:12px}
.fi-11__desc{font-size:.78rem;color:rgba(255,241,242,.55);line-height:1.5}
@keyframes fi-11-skew-in{
to{opacity:1;transform:skewX(0deg) translateX(0)}
}
@media(prefers-reduced-motion:reduce){
.fi-11 *{animation:none!important;opacity:1!important;transform:none!important}
}
```
### 12. Radial Clip-Path Mask Reveal
**Type:** Pure CSS
**Description:** A feature panel expands outward from the centre using clip-path: circle(0% → 100%) — a portal-opening radial mask reveal radiating from a single focal point.
**HTML:**
```html
🌀
Radial Mask Reveal
Content expands outward from a central point using clip-path: circle() — like a portal opening or a spotlight growing to full brightness.
clip-path
circle()
radial reveal
```
**CSS:**
```css
.fi-12{
--bg:#07080e;--sky:#0ea5e9;--cobalt:#1d4ed8;--text:#f0f9ff;
font-family:'Inter',sans-serif;
min-height:340px;border-radius:20px;
display:grid;place-items:center;
padding:40px;overflow:hidden;
}
.fi-12 *,.fi-12 *::before,.fi-12 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-12 ::selection{background:var(--sky);color:#000}
/* radial clip-path mask reveal: circle(0%) → circle(100%) */
.fi-12__wrap{position:relative;max-width:480px;width:100%}
.fi-12__panel{
background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(29,78,216,.08));
border:1px solid rgba(14,165,233,.25);border-radius:20px;
padding:36px;text-align:center;
clip-path:circle(0% at 50% 50%);
animation:fi-12-radial-reveal 1s cubic-bezier(.4,0,.2,1) .15s forwards;
}
.fi-12__glow{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:200px;height:200px;border-radius:50%;
background:radial-gradient(circle,rgba(14,165,233,.15),transparent 70%);
pointer-events:none;
}
.fi-12__emoji{font-size:2.5rem;display:block;margin-bottom:16px}
.fi-12__title{
font-family:'Syne',sans-serif;font-size:clamp(1.4rem,3vw,2rem);
font-weight:800;color:var(--text);margin-bottom:10px;
}
.fi-12__sub{font-size:.9rem;color:rgba(240,249,255,.5);line-height:1.6;margin-bottom:24px}
.fi-12__orbs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.fi-12__orb{
padding:6px 14px;border-radius:20px;font-size:.72rem;font-weight:600;
background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.2);color:var(--sky);
}
@keyframes fi-12-radial-reveal{to{clip-path:circle(100% at 50% 50%)}}
@media(prefers-reduced-motion:reduce){
.fi-12__panel{animation:none;clip-path:none}
}
```
### 13. Greyscale to Color Saturate Fade
**Type:** Pure CSS
**Description:** Three profile cards transition from filter: saturate(0) brightness(0.7) to full color, creating a greyscale-to-vivid reveal with cascading animation delays.
**HTML:**
```html
```
**CSS:**
```css
.fi-13{
--bg:#111;--text:#fafafa;
font-family:'Plus Jakarta Sans',sans-serif;
min-height:340px;border-radius:20px;
display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
padding:40px;overflow:hidden;
}
.fi-13 *,.fi-13 *::before,.fi-13 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-13 ::selection{background:#888;color:#fff}
/* Greyscale → color: filter:saturate(0) opacity:0 → saturate(1) opacity:1 */
.fi-13__photo{
position:relative;border-radius:16px;overflow:hidden;
flex:1;min-width:140px;max-width:170px;aspect-ratio:3/4;
opacity:0;filter:saturate(0) brightness(.7);
animation:fi-13-color-in 1s ease-out forwards;
cursor:pointer;
}
.fi-13__photo:nth-child(1){--d:.1s}
.fi-13__photo:nth-child(2){--d:.3s}
.fi-13__photo:nth-child(3){--d:.5s}
.fi-13__photo{animation-delay:var(--d)}
.fi-13__photo:hover{filter:saturate(1.2) brightness(1.05)!important;transform:scale(1.03);transition:all .3s}
/* Colorful gradient "photos" */
.fi-13__photo:nth-child(1){background:linear-gradient(160deg,#f97316,#ec4899,#8b5cf6)}
.fi-13__photo:nth-child(2){background:linear-gradient(160deg,#06b6d4,#3b82f6,#a855f7)}
.fi-13__photo:nth-child(3){background:linear-gradient(160deg,#10b981,#14b8a6,#0ea5e9)}
.fi-13__overlay{
position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 60%);
display:flex;flex-direction:column;justify-content:flex-end;padding:16px;
}
.fi-13__pname{font-size:.85rem;font-weight:700;color:#fff;margin-bottom:3px}
.fi-13__prole{font-size:.7rem;color:rgba(255,255,255,.6)}
.fi-13__dot{
position:absolute;top:14px;right:14px;
width:8px;height:8px;border-radius:50%;background:#4ade80;
box-shadow:0 0 6px #4ade80;
}
@keyframes fi-13-color-in{to{opacity:1;filter:saturate(1) brightness(1)}}
@media(prefers-reduced-motion:reduce){
.fi-13 *{animation:none!important;opacity:1!important;filter:none!important}
}
```
### 14. RotateY Flip Card Fade
**Type:** Pure CSS
**Description:** Three feature cards flip into view from the side via perspective(800px) rotateY(90deg → 0), fanning in sequence like a hand of cards being dealt face-up.
**HTML:**
```html
🎭
UI Craft
Design System
Cards flip into view from the side using rotateY.
⚙️
Dev Tools
Engineering
Each card delays 170ms, creating a fan-in sequence.
🚀
Launchpad
Products
Hover reveals a subtle counter-tilt for depth feedback.
```
**CSS:**
```css
.fi-14{
--bg:#0c0814;--purple:#9333ea;--violet:#7c3aed;--text:#faf5ff;
font-family:'Inter',sans-serif;
min-height:360px;border-radius:20px;
display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
padding:40px;overflow:hidden;
perspective:1200px;
}
.fi-14 *,.fi-14 *::before,.fi-14 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-14 ::selection{background:var(--purple);color:#fff}
/* flip card: rotateY(90deg) opacity:0 → rotateY(0) opacity:1 */
.fi-14__card{
width:160px;min-height:200px;border-radius:16px;padding:24px 18px;
display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
opacity:0;transform:perspective(800px) rotateY(90deg);
animation:fi-14-flip-reveal .65s cubic-bezier(.16,1,.3,1) forwards;
cursor:pointer;transition:box-shadow .2s;
}
.fi-14__card:nth-child(1){--d:.05s;background:linear-gradient(160deg,rgba(147,51,234,.2),rgba(79,70,229,.1));border:1px solid rgba(147,51,234,.3)}
.fi-14__card:nth-child(2){--d:.22s;background:linear-gradient(160deg,rgba(79,70,229,.2),rgba(59,130,246,.1));border:1px solid rgba(79,70,229,.3)}
.fi-14__card:nth-child(3){--d:.39s;background:linear-gradient(160deg,rgba(236,72,153,.2),rgba(147,51,234,.1));border:1px solid rgba(236,72,153,.3)}
.fi-14__card{animation-delay:var(--d)}
.fi-14__card:hover{box-shadow:0 16px 48px rgba(147,51,234,.3);transform:perspective(800px) rotateY(-5deg) translateY(-4px)!important;transition:all .3s}
.fi-14__emoji{font-size:2rem}
.fi-14__name{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:800;color:var(--text)}
.fi-14__role{font-size:.72rem;color:rgba(250,245,255,.45);margin-bottom:8px}
.fi-14__divider{width:32px;height:1px;background:rgba(255,255,255,.12)}
.fi-14__detail{font-size:.72rem;color:rgba(250,245,255,.55);line-height:1.5}
@keyframes fi-14-flip-reveal{
to{opacity:1;transform:perspective(800px) rotateY(0deg)}
}
@media(prefers-reduced-motion:reduce){
.fi-14 *{animation:none!important;opacity:1!important;transform:none!important}
}
```
### 15. Glitch Flash Multi-Step Fade
**Type:** Pure CSS
**Description:** A terminal-style display where the headline stutters into existence through a multi-step opacity flicker keyframe with micro translateX jitter, simulating a signal locking on.
**HTML:**
```html
BOOT SEQUENCE INITIATED...
LOADING KERNEL MODULES...
SIGNAL ACQUIRED. RENDERING...
GLITCH FADE
MULTI-STEP OPACITY FLICKER TECHNIQUE
```
**CSS:**
```css
.fi-15{
--bg:#050505;--red:#ff2244;--white:#f8f8f8;--dim:#888;
font-family:'Orbitron',monospace;
min-height:340px;border-radius:20px;
display:grid;place-items:center;
padding:40px;overflow:hidden;position:relative;
}
.fi-15 *,.fi-15 *::before,.fi-15 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-15 ::selection{background:var(--red);color:#fff}
/* glitch-flash fade: multi-step opacity flicker + slight translateX jitter */
.fi-15__screen{text-align:center;position:relative}
.fi-15__line{
display:block;
font-family:'Share Tech Mono',monospace;
font-size:.7rem;letter-spacing:.15em;color:var(--dim);
margin-bottom:8px;
opacity:0;animation:fi-15-static .1s steps(1) forwards;
}
.fi-15__line:nth-child(1){animation-delay:.1s}
.fi-15__line:nth-child(2){animation-delay:.2s}
.fi-15__line:nth-child(3){animation-delay:.3s}
.fi-15__glitch-text{
font-size:clamp(2rem,6vw,4rem);font-weight:900;
color:var(--white);position:relative;display:inline-block;
animation:fi-15-glitch-in 1.2s steps(1) .4s forwards;opacity:0;
}
.fi-15__glitch-text::before,.fi-15__glitch-text::after{
content:attr(data-text);position:absolute;inset:0;
}
.fi-15__glitch-text::before{
color:var(--red);
animation:fi-15-ghost-r 1.2s steps(1) .4s forwards;opacity:0;
clip-path:polygon(0 20%,100% 20%,100% 45%,0 45%);
}
.fi-15__glitch-text::after{
color:#0ff;
animation:fi-15-ghost-l 1.2s steps(1) .4s forwards;opacity:0;
clip-path:polygon(0 55%,100% 55%,100% 80%,0 80%);
}
.fi-15__sub{
font-size:.65rem;letter-spacing:.2em;color:var(--dim);margin-top:16px;
opacity:0;animation:fi-15-static .1s steps(1) 1.4s forwards;
}
.fi-15__cursor{
display:inline-block;width:2px;height:1em;background:var(--red);
vertical-align:middle;margin-left:4px;
animation:fi-15-blink .8s steps(1) infinite 1.4s;opacity:0;
}
@keyframes fi-15-glitch-in{
0%{opacity:0;transform:translateX(-4px)}
5%{opacity:1;transform:translateX(3px)}
8%{opacity:0;transform:translateX(-2px)}
12%{opacity:1;transform:translateX(0)}
20%{opacity:.3;transform:translateX(2px)}
22%{opacity:1;transform:translateX(0)}
35%{opacity:.8;transform:translateX(-1px)}
40%{opacity:1;transform:translateX(0)}
100%{opacity:1;transform:translateX(0)}
}
@keyframes fi-15-ghost-r{
0%{opacity:0}5%{opacity:.8;transform:translateX(4px)}
8%{opacity:0}20%{opacity:.6;transform:translateX(-3px)}
22%{opacity:0}35%{opacity:.4;transform:translateX(2px)}
40%{opacity:0}100%{opacity:0}
}
@keyframes fi-15-ghost-l{
0%{opacity:0}12%{opacity:.7;transform:translateX(-3px)}
15%{opacity:0}28%{opacity:.5;transform:translateX(2px)}
30%{opacity:0}100%{opacity:0}
}
@keyframes fi-15-static{to{opacity:1}}
@keyframes fi-15-blink{0%,100%{opacity:1}50%{opacity:0}}
@media(prefers-reduced-motion:reduce){
.fi-15 *{animation:none!important;opacity:1!important;transform:none!important}
}
```
### 16. Cascade Letter Drop Fade
**Type:** CSS + JS
**Description:** JavaScript splits a headline character-by-character into spans with staggered animation-delay; each letter drops in from above with a spring bounce, creating a raindrop cascade.
**HTML:**
```html
Letter cascade
Cascade Letters
JavaScript splits every character into a span with a staggered animation-delay, creating a raindrop-style letter cascade.
JS split
nth-child delay
spring bounce
↺ replay animation
```
**CSS:**
```css
.fi-16{
--bg:#090b14;--gold:#f59e0b;--amber:#fbbf24;--text:#fffbeb;
font-family:'DM Sans',sans-serif;
min-height:340px;border-radius:20px;
display:grid;place-items:center;
padding:40px;overflow:hidden;text-align:center;
}
.fi-16 *,.fi-16 *::before,.fi-16 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-16 ::selection{background:var(--gold);color:#000}
.fi-16__label{
font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
color:rgba(255,251,235,.35);margin-bottom:20px;
}
.fi-16__title{
font-family:'Syne',sans-serif;font-size:clamp(1.8rem,4vw,3rem);font-weight:800;
color:var(--text);line-height:1.2;margin-bottom:16px;display:block;
}
/* JS injects letter spans */
.fi-16__letter{
display:inline-block;
opacity:0;transform:translateY(-20px) rotate(-8deg);
animation:fi-16-letter-drop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
.fi-16__letter.fi-16--space{margin-right:.35em}
.fi-16__sub{
font-size:.95rem;color:rgba(255,251,235,.45);line-height:1.6;max-width:400px;
margin-bottom:28px;opacity:0;animation:fi-16-fade-up .6s ease forwards;
}
.fi-16__row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fi-16-fade-up .5s ease forwards}
.fi-16__chip{
padding:7px 16px;border-radius:20px;font-size:.75rem;font-weight:700;
background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.25);color:var(--gold);
transition:background .2s,transform .2s;cursor:default;
}
.fi-16__chip:hover{background:rgba(245,158,11,.22);transform:translateY(-2px)}
.fi-16__replay{
margin-top:18px;display:inline-block;font-size:.72rem;font-weight:600;
color:rgba(255,251,235,.35);cursor:pointer;border-bottom:1px dashed rgba(255,255,255,.15);
padding-bottom:2px;transition:color .2s;
opacity:0;animation:fi-16-fade-up .5s ease forwards;
}
.fi-16__replay:hover{color:var(--gold)}
@keyframes fi-16-letter-drop{to{opacity:1;transform:translateY(0) rotate(0deg)}}
@keyframes fi-16-fade-up{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
.fi-16 *{animation:none!important;opacity:1!important;transform:none!important}
}
```
**JS:**
```js
(function(){
const titleEl = document.getElementById('fi-16-title');
const replay = document.getElementById('fi-16-replay');
const STEP = 0.05;
function animate(){
const text = 'Cascade Letters';
titleEl.innerHTML = '';
[...text].forEach((ch, i)=>{
const span = document.createElement('span');
span.className = 'fi-16__letter' + (ch === ' ' ? ' fi-16--space' : '');
span.textContent = ch === ' ' ? '\u00a0' : ch;
span.style.animationDelay = (0.1 + i * STEP)+'s';
titleEl.appendChild(span);
});
}
animate();
replay.addEventListener('click',()=>{
titleEl.querySelectorAll('.fi-16__letter').forEach(s=>{
s.style.animation='none';void s.offsetWidth;
s.style.animation='fi-16-letter-drop .5s cubic-bezier(.34,1.56,.64,1) forwards';
});
});
})();
```
---
## 10 CSS Feature Sections
URL: https://codefronts.com/layouts/css-feature-sections/
Description: 10 hand-coded CSS feature section templates covering the patterns landing pages actually need in 2026 — icon grid with stats strip, Apple-style bento grid layout, dark glassmorphism with animated blobs, scroll-reveal alternating rows, developer SDK with syntax-highlighted code preview, side-by-side comparison table with pricing cards, full SaaS hero with mesh-gradient + social proof, 3D mousemove tilt cards, parchment-cream floating phone mockup, and Linear-style product roadmap timeline. 7 of 10 demos are 100% pure CSS — drop into any stack. The 3 JS-enhanced demos (scroll-reveal, 3D tilt, timeline-glow) degrade gracefully if JavaScript is disabled. Every demo respects prefers-reduced-motion, uses scoped .fsNN__* class names so multiple can coexist, and ships MIT-licensed.
Demo count: 10
### 01. CSS Feature Section with Icon Grid
**Type:** Pure CSS
**Description:** A dark-mode icon-grid platform feature section — six cards on a `#09090f` background, each with a coloured icon badge, per-card radial glow on hover, and a stats strip with 99.99% uptime, 300+ nodes, and <30s deploy time. Syne display + Inter body.
**HTML:**
```html
Platform capabilities
Everything you need to
ship faster
A complete toolkit for modern teams. Automate the repetitive, focus on what matters, and deploy with confidence — every single time.
⚡
Instant Deployments
Push to main and go live in under 30 seconds. Zero-downtime rollouts with automatic health checks built in.
Infrastructure
🛡️
Edge Security
DDoS protection, WAF rules, and bot mitigation run at the network edge — before traffic ever reaches your app.
Security
📊
Real-Time Analytics
P99 latencies, error budgets, and user flows surface automatically. No instrumentation required on your end.
Observability
🔁
Smart Rollbacks
Detect regressions automatically and roll back to the last stable release — database migrations included.
Reliability
🌐
Global CDN
Static assets and edge functions served from 300+ PoPs worldwide. Sub-20ms cache hits across six continents.
Performance
🤝
Team Workflows
Preview environments per pull request, role-based access, and audit logs that satisfy even your strictest compliance team.
Collaboration
Start for free →
99.99%
Uptime SLA
300+
Edge nodes
<30s
Deploy time
```
**CSS:**
```css
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fs01 {
--bg: #09090f;
--surface: #111118;
--border: rgba(255,255,255,0.07);
--text: #e8e8f0;
--muted: #6b6b85;
--accent1: #7c6dfa;
--accent2: #e05aff;
--accent3: #00e5c3;
--card-bg: #13131c;
font-family: 'Inter', sans-serif;
background: var(--bg);
color: var(--text);
padding: 96px 24px;
min-height: 100vh;
}
.fs01__inner {
max-width: 1100px;
margin: 0 auto;
}
.fs01__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent1);
background: rgba(124,109,250,0.1);
border: 1px solid rgba(124,109,250,0.25);
padding: 6px 14px;
border-radius: 100px;
margin-bottom: 28px;
}
.fs01__eyebrow::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent1);
box-shadow: 0 0 8px var(--accent1);
}
.fs01__headline {
font-family: 'Syne', sans-serif;
font-size: clamp(36px, 5vw, 62px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.02em;
margin-bottom: 20px;
max-width: 680px;
}
.fs01__headline span {
background: linear-gradient(135deg, var(--accent1), var(--accent2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.fs01__sub {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
max-width: 520px;
margin-bottom: 72px;
}
.fs01__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 20px;
overflow: hidden;
}
.fs01__card {
background: var(--card-bg);
padding: 36px 32px;
position: relative;
transition: background 0.25s;
cursor: default;
}
.fs01__card::after {
content: '';
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s;
background: radial-gradient(circle at 50% 0%, rgba(124,109,250,0.08), transparent 70%);
}
.fs01__card:hover { background: #16162000; }
.fs01__card:hover::after { opacity: 1; }
.fs01__icon-wrap {
width: 48px; height: 48px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
font-size: 22px;
position: relative;
z-index: 1;
}
.fs01__card:nth-child(1) .fs01__icon-wrap { background: rgba(124,109,250,0.15); }
.fs01__card:nth-child(2) .fs01__icon-wrap { background: rgba(224,90,255,0.15); }
.fs01__card:nth-child(3) .fs01__icon-wrap { background: rgba(0,229,195,0.15); }
.fs01__card:nth-child(4) .fs01__icon-wrap { background: rgba(255,160,64,0.15); }
.fs01__card:nth-child(5) .fs01__icon-wrap { background: rgba(255,80,120,0.15); }
.fs01__card:nth-child(6) .fs01__icon-wrap { background: rgba(64,180,255,0.15); }
.fs01__card-title {
font-family: 'Syne', sans-serif;
font-size: 17px;
font-weight: 700;
margin-bottom: 10px;
color: #fff;
position: relative;
z-index: 1;
}
.fs01__card-body {
font-size: 14px;
line-height: 1.65;
color: var(--muted);
position: relative;
z-index: 1;
}
.fs01__card-tag {
display: inline-block;
margin-top: 16px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 6px;
position: relative;
z-index: 1;
}
.fs01__card:nth-child(1) .fs01__card-tag { color: var(--accent1); background: rgba(124,109,250,0.1); }
.fs01__card:nth-child(2) .fs01__card-tag { color: var(--accent2); background: rgba(224,90,255,0.1); }
.fs01__card:nth-child(3) .fs01__card-tag { color: var(--accent3); background: rgba(0,229,195,0.1); }
.fs01__card:nth-child(4) .fs01__card-tag { color: #ffa040; background: rgba(255,160,64,0.1); }
.fs01__card:nth-child(5) .fs01__card-tag { color: #ff5078; background: rgba(255,80,120,0.1); }
.fs01__card:nth-child(6) .fs01__card-tag { color: #40b4ff; background: rgba(64,180,255,0.1); }
.fs01__bottom {
margin-top: 64px;
display: flex;
align-items: center;
gap: 40px;
flex-wrap: wrap;
}
.fs01__cta {
display: inline-flex; align-items: center; gap: 10px;
background: linear-gradient(135deg, var(--accent1), var(--accent2));
color: #fff;
font-size: 15px;
font-weight: 600;
padding: 14px 28px;
border-radius: 12px;
text-decoration: none;
transition: opacity 0.2s, transform 0.2s;
}
.fs01__cta:hover { opacity: 0.9; transform: translateY(-1px); }
.fs01__stats {
display: flex; gap: 32px;
}
.fs01__stat-num {
font-family: 'Syne', sans-serif;
font-size: 28px;
font-weight: 800;
background: linear-gradient(135deg, #fff, var(--muted));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.fs01__stat-label {
font-size: 12px;
color: var(--muted);
margin-top: 2px;
}
@media (max-width: 640px) {
.fs01__grid { grid-template-columns: 1fr; }
.fs01__bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
.fs01__card, .fs01__card::after, .fs01__cta { transition: none; }
}
```
### 02. CSS Bento Grid Features Layout
**Type:** Pure CSS
**Description:** A warm-cream bento-grid layout with five asymmetric CSS Grid cells (dark ink, forest green, white, terracotta, and deep navy) showcasing animated bar meters, a large metric number, and an orbiting dot animation. Fraunces serif + DM Sans.
**HTML:**
```html
Why teams choose us
The platform that
works beautifully at scale
Workflow
From idea to production in one tool
Design, prototype, review, and deploy — without leaving a single workspace. Your entire product lifecycle lives here.
01
Performance
Built for speed without trade-offs
Scale
12M
Requests handled per second at peak
Elastic infrastructure that scales automatically without capacity planning.
Security
Zero-trust by default
Every request is authenticated at the edge. SSO, SAML, and hardware key support out of the box.
Integrations
Connects to your whole stack
GitHub, Slack, Datadog, PagerDuty — 200+ integrations and a full API for anything custom.
```
**CSS:**
```css
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fs02 {
--bg: #f5f0e8;
--ink: #1a1612;
--muted: #7a7065;
--card1: #1a1612;
--card2: #2c5f3c;
--card3: #fff;
--card4: #e8623a;
--card5: #fff;
--card6: #2a2060;
--accent: #e8623a;
font-family: 'DM Sans', sans-serif;
background: var(--bg);
color: var(--ink);
padding: 80px 24px;
min-height: 100vh;
}
.fs02__inner { max-width: 1100px; margin: 0 auto; }
.fs02__header { margin-bottom: 56px; }
.fs02__label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
}
.fs02__headline {
font-family: 'Fraunces', serif;
font-size: clamp(38px, 5.5vw, 68px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.02em;
max-width: 640px;
}
.fs02__headline em {
font-style: italic;
color: var(--accent);
}
.fs02__bento {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
gap: 12px;
}
/* Card base */
.fs02__cell {
border-radius: 20px;
padding: 36px;
position: relative;
overflow: hidden;
}
.fs02__cell--a {
grid-column: span 5;
background: var(--card1);
color: #f0ece4;
min-height: 280px;
}
.fs02__cell--b {
grid-column: span 7;
background: var(--card2);
color: #d4eedb;
min-height: 280px;
}
.fs02__cell--c {
grid-column: span 4;
background: var(--card3);
border: 1.5px solid rgba(0,0,0,0.1);
min-height: 220px;
}
.fs02__cell--d {
grid-column: span 4;
background: var(--card4);
color: #fff;
min-height: 220px;
}
.fs02__cell--e {
grid-column: span 4;
background: var(--card6);
color: #c8c4ee;
min-height: 220px;
}
.fs02__cell-tag {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 100px;
margin-bottom: 24px;
}
.fs02__cell--a .fs02__cell-tag { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.fs02__cell--b .fs02__cell-tag { background: rgba(255,255,255,0.1); color: rgba(212,238,219,0.7); }
.fs02__cell--c .fs02__cell-tag { background: #f0ece4; color: #7a7065; }
.fs02__cell--d .fs02__cell-tag { background: rgba(255,255,255,0.2); color: #fff; }
.fs02__cell--e .fs02__cell-tag { background: rgba(255,255,255,0.1); color: rgba(200,196,238,0.7); }
.fs02__cell-title {
font-family: 'Fraunces', serif;
font-size: clamp(22px, 2.5vw, 30px);
font-weight: 800;
line-height: 1.15;
margin-bottom: 12px;
}
.fs02__cell-body {
font-size: 14px;
line-height: 1.65;
opacity: 0.72;
max-width: 340px;
}
/* Decorative large number */
.fs02__cell--a .fs02__bg-num {
position: absolute;
bottom: -20px; right: -10px;
font-family: 'Fraunces', serif;
font-size: 140px;
font-weight: 800;
color: rgba(255,255,255,0.04);
line-height: 1;
pointer-events: none;
user-select: none;
}
/* Progress bars in cell b */
.fs02__bars { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.fs02__bar-row { display: flex; align-items: center; gap: 12px; }
.fs02__bar-label { font-size: 12px; opacity: 0.7; min-width: 80px; }
.fs02__bar-track {
flex: 1; height: 6px;
background: rgba(255,255,255,0.15);
border-radius: 100px;
overflow: hidden;
}
.fs02__bar-fill {
height: 100%;
background: #5ebd7a;
border-radius: 100px;
animation: fs02-grow 1.2s cubic-bezier(.4,0,.2,1) both;
animation-delay: var(--delay, 0s);
}
@keyframes fs02-grow { from { width: 0 } }
/* Metric in cell c */
.fs02__metric {
font-family: 'Fraunces', serif;
font-size: 64px;
font-weight: 800;
color: var(--ink);
line-height: 1;
margin: 20px 0 8px;
}
.fs02__metric-sub { font-size: 13px; color: var(--muted); }
/* Icon orbit cell e */
.fs02__orbit {
position: absolute;
right: 24px; bottom: 24px;
width: 80px; height: 80px;
}
.fs02__orbit-ring {
width: 80px; height: 80px;
border: 1.5px dashed rgba(255,255,255,0.2);
border-radius: 50%;
animation: fs02-spin 8s linear infinite;
}
.fs02__orbit-dot {
position: absolute;
top: -5px; left: 50%; transform: translateX(-50%);
width: 10px; height: 10px;
background: #8b82f0;
border-radius: 50%;
}
@keyframes fs02-spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
.fs02__cell--a, .fs02__cell--b,
.fs02__cell--c, .fs02__cell--d, .fs02__cell--e {
grid-column: span 12;
}
}
@media (prefers-reduced-motion: reduce) {
.fs02__bar-fill { animation: none; width: var(--w); }
.fs02__orbit-ring { animation: none; }
}
```
### 03. CSS Feature Section Dark Glassmorphism
**Type:** Pure CSS
**Description:** Three animated radial-blob ambients behind a six-card frosted-glass grid on deep `#04040a`. Each card has a per-color glow that intensifies on hover, numbered 01–06, with link arrows that widen on hover. Space Grotesk + Space Mono.
**HTML:**
```html
// PLATFORM_FEATURES v2.5
Craft experiences
that feel alive
Six core capabilities designed from the ground up for 2025 product teams. No bolt-ons, no legacy APIs — just clean, powerful primitives that do exactly what they say.
01 / 06
AI-Assisted Routing
Predict user intent and route requests to the optimal compute tier before they complete — reducing latency by up to 60%.
Explore →
02 / 06
Passkey Authentication
Native WebAuthn support with biometric fallback. Drop password forms entirely — your users deserve better UX.
Explore →
03 / 06
Real-Time Sync Engine
CRDTs under the hood. Collaborative editing, offline-first state, and live cursors with zero config on your part.
Explore →
04 / 06
Workflow Automation
Trigger-action pipelines with branching logic, retry policies, and a visual debugger that shows exactly what ran.
Explore →
05 / 06
Growth Analytics
Funnel analysis, cohort retention, and A/B test significance — all computed in-platform with no data leaving your region.
Explore →
06 / 06
Regional Compliance
GDPR, CCPA, and HIPAA data residency enforced at the storage layer. Compliance reports generated on demand.
Explore →
Trusted by 4,200+ product teams globally
```
**CSS:**
```css
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fs03 {
font-family: 'Space Grotesk', sans-serif;
min-height: 100vh;
padding: 80px 24px;
position: relative;
overflow: hidden;
background: #04040a;
color: #e2e0f0;
}
/* Ambient blobs */
.fs03__blob {
position: absolute;
border-radius: 50%;
filter: blur(90px);
pointer-events: none;
animation: fs03-pulse 8s ease-in-out infinite;
}
.fs03__blob--1 { width: 500px; height: 500px; background: #5b3cf7; opacity: .28; top: -100px; left: -100px; animation-delay: 0s; }
.fs03__blob--2 { width: 400px; height: 400px; background: #c73ef0; opacity: .22; top: 30%; right: -80px; animation-delay: -3s; }
.fs03__blob--3 { width: 350px; height: 350px; background: #1be8c8; opacity: .18; bottom: -60px; left: 30%; animation-delay: -5s; }
@keyframes fs03-pulse {
0%, 100% { transform: scale(1) translate(0,0); }
50% { transform: scale(1.12) translate(20px,-20px); }
}
.fs03__inner {
max-width: 1100px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.fs03__top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: end;
margin-bottom: 56px;
}
.fs03__badge {
display: inline-flex; align-items: center; gap: 6px;
font-family: 'Space Mono', monospace;
font-size: 10px;
color: #1be8c8;
background: rgba(27,232,200,0.08);
border: 1px solid rgba(27,232,200,0.2);
padding: 5px 12px;
border-radius: 6px;
margin-bottom: 20px;
letter-spacing: 0.08em;
}
.fs03__headline {
font-size: clamp(32px, 4.5vw, 58px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
}
.fs03__headline mark {
background: linear-gradient(90deg, #7b5cf7, #c73ef0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.fs03__right-text {
font-size: 16px;
line-height: 1.7;
color: rgba(226,224,240,0.55);
padding-bottom: 4px;
}
.fs03__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.fs03__card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 18px;
padding: 32px;
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
position: relative;
overflow: hidden;
transition: border-color 0.3s, transform 0.3s;
}
.fs03__card:hover {
border-color: rgba(255,255,255,0.2);
transform: translateY(-4px);
}
.fs03__card-glow {
position: absolute;
width: 180px; height: 180px;
border-radius: 50%;
filter: blur(50px);
pointer-events: none;
top: -60px; right: -40px;
opacity: 0.35;
transition: opacity 0.3s;
}
.fs03__card:hover .fs03__card-glow { opacity: 0.6; }
.fs03__card:nth-child(1) .fs03__card-glow { background: #7b5cf7; }
.fs03__card:nth-child(2) .fs03__card-glow { background: #c73ef0; }
.fs03__card:nth-child(3) .fs03__card-glow { background: #1be8c8; }
.fs03__card:nth-child(4) .fs03__card-glow { background: #f7a03c; }
.fs03__card:nth-child(5) .fs03__card-glow { background: #f74460; }
.fs03__card:nth-child(6) .fs03__card-glow { background: #3cb8f7; }
.fs03__card-num {
font-family: 'Space Mono', monospace;
font-size: 11px;
color: rgba(226,224,240,0.3);
margin-bottom: 20px;
letter-spacing: 0.1em;
}
.fs03__card-icon {
font-size: 32px;
margin-bottom: 16px;
display: block;
}
.fs03__card-title {
font-size: 17px;
font-weight: 700;
margin-bottom: 10px;
color: #fff;
}
.fs03__card-body {
font-size: 14px;
line-height: 1.65;
color: rgba(226,224,240,0.5);
}
.fs03__card-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 20px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: gap 0.2s;
}
.fs03__card:nth-child(1) .fs03__card-link { color: #9e85f9; }
.fs03__card:nth-child(2) .fs03__card-link { color: #db80f7; }
.fs03__card:nth-child(3) .fs03__card-link { color: #1be8c8; }
.fs03__card:nth-child(4) .fs03__card-link { color: #f7a03c; }
.fs03__card:nth-child(5) .fs03__card-link { color: #f74460; }
.fs03__card:nth-child(6) .fs03__card-link { color: #3cb8f7; }
.fs03__card-link:hover { gap: 10px; }
/* Separator line */
.fs03__sep {
width: 100%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
margin: 56px 0;
}
.fs03__bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px;
}
.fs03__trust {
display: flex; align-items: center; gap: 10px;
font-size: 13px;
color: rgba(226,224,240,0.45);
}
.fs03__dots {
display: flex; gap: 6px;
}
.fs03__dot {
width: 8px; height: 8px;
border-radius: 50%;
}
.fs03__dot:nth-child(1) { background: #7b5cf7; }
.fs03__dot:nth-child(2) { background: #c73ef0; }
.fs03__dot:nth-child(3) { background: #1be8c8; }
.fs03__cta-row { display: flex; gap: 12px; }
.fs03__btn {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 600;
padding: 12px 24px;
border-radius: 10px;
text-decoration: none;
transition: transform 0.2s, opacity 0.2s;
cursor: pointer;
}
.fs03__btn:hover { transform: translateY(-2px); opacity: 0.9; }
.fs03__btn--primary { background: linear-gradient(135deg, #7b5cf7, #c73ef0); color: #fff; }
.fs03__btn--ghost { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #e2e0f0; }
@media (max-width: 768px) {
.fs03__top { grid-template-columns: 1fr; }
.fs03__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
.fs03__grid { grid-template-columns: 1fr; }
.fs03__bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
.fs03__blob, .fs03__card, .fs03__card-link { animation: none; transition: none; }
}
```
### 04. CSS Animated Feature Cards Scroll Reveal
**Type:** CSS + JS
**Description:** A clean light-background feature section with four alternating left-right rows that fade-in via IntersectionObserver on scroll. Each row pairs long-form copy and pill tags with an abstract UI mockup illustration. Manrope.
**HTML:**
```html
How it works
Fewer tools.
Better results.
Four core capabilities that replace a whole stack of point solutions your team is already paying for.
CAPABILITY 01
Unified data pipeline with zero ETL
Stream events from any source directly into your warehouse or lakehouse. Schema inference, deduplication, and backfill handled automatically — no pipeline code required.
Firehose
Auto-schema
Backfill
CAPABILITY 02
Semantic search across all your content
Vector embeddings generated for every document, ticket, and message. Natural language queries return results ranked by meaning, not just keywords — in under 100ms.
Vector DB
RAG-ready
<100ms p99
CAPABILITY 03
Visual workflow builder, no code needed
Drag-and-drop automations that talk to your existing APIs. Built-in retry logic, dead-letter queues, and SLA alerts keep processes running without hand-holding.
No-code
API webhooks
SLA alerts
CAPABILITY 04
Role-aware access with fine-grained audit
Attribute-based permissions that follow your org chart. Every action logged to an immutable audit trail, queryable by time, user, resource, and outcome.
ABAC
Immutable logs
SOC 2 ready
```
**CSS:**
```css
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fs04 {
--bg: #fafafa;
--ink: #111;
--muted: #777;
--line: #e8e8e8;
font-family: 'Manrope', sans-serif;
background: var(--bg);
color: var(--ink);
padding: 100px 24px;
}
.fs04__inner { max-width: 1060px; margin: 0 auto; }
.fs04__head {
text-align: center;
margin-bottom: 80px;
}
.fs04__kicker {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 16px;
}
.fs04__h2 {
font-size: clamp(34px, 5vw, 60px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.07;
margin-bottom: 18px;
}
.fs04__h2 span {
position: relative;
display: inline-block;
}
.fs04__h2 span::after {
content: '';
position: absolute;
left: 0; bottom: 4px;
width: 100%; height: 8px;
background: #ffe045;
z-index: -1;
border-radius: 2px;
}
.fs04__desc {
font-size: 17px;
color: var(--muted);
max-width: 500px;
margin: 0 auto;
line-height: 1.7;
}
/* Cards list — alternating layout */
.fs04__list {
display: flex;
flex-direction: column;
gap: 0;
}
.fs04__item {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--line);
padding: 64px 0;
align-items: center;
opacity: 0;
transform: translateY(40px);
transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
}
.fs04__item.fs04--visible {
opacity: 1;
transform: none;
}
.fs04__item:nth-child(even) .fs04__item-visual { order: -1; }
.fs04__item-content { padding: 0 48px 0 0; }
.fs04__item:nth-child(even) .fs04__item-content { padding: 0 0 0 48px; }
.fs04__item-num {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
color: var(--muted);
margin-bottom: 20px;
}
.fs04__item-title {
font-size: clamp(22px, 2.5vw, 32px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
margin-bottom: 16px;
}
.fs04__item-body {
font-size: 15px;
line-height: 1.7;
color: var(--muted);
margin-bottom: 24px;
}
.fs04__item-pills {
display: flex; flex-wrap: wrap; gap: 8px;
}
.fs04__pill {
font-size: 12px;
font-weight: 600;
padding: 5px 12px;
border-radius: 100px;
background: #f0f0f0;
color: #444;
}
/* Visual areas */
.fs04__item-visual {
border-radius: 20px;
overflow: hidden;
aspect-ratio: 4/3;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.fs04__vis--a { background: linear-gradient(135deg, #e8f4ff 0%, #d5eaff 100%); }
.fs04__vis--b { background: linear-gradient(135deg, #fff4e0 0%, #ffe8cc 100%); }
.fs04__vis--c { background: linear-gradient(135deg, #f0ffe8 0%, #d8f5cc 100%); }
.fs04__vis--d { background: linear-gradient(135deg, #f8e8ff 0%, #eecefd 100%); }
/* Abstract UI mockup inside each */
.fs04__mockup {
width: 85%;
background: #fff;
border-radius: 14px;
box-shadow: 0 20px 60px rgba(0,0,0,0.12);
padding: 20px;
}
.fs04__mock-bar {
height: 8px;
border-radius: 4px;
margin-bottom: 10px;
background: #eee;
}
.fs04__mock-bar--accent { background: linear-gradient(90deg, #6c8ef7, #9c6cf7); width: 60%; }
.fs04__mock-bar--sm { width: 40%; }
.fs04__mock-bar--md { width: 70%; }
.fs04__mock-bar--lg { width: 90%; }
.fs04__mock-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;
}
.fs04__mock-block {
height: 48px;
border-radius: 8px;
background: #f5f5f5;
}
.fs04__mock-block--a { background: rgba(108,142,247,0.15); }
.fs04__mock-block--b { background: rgba(156,108,247,0.15); }
.fs04__mock-block--c { background: rgba(247,160,108,0.15); }
.fs04__mock-block--d { background: rgba(108,220,180,0.15); }
.fs04__mock-chart {
display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-top: 12px;
}
.fs04__mock-bar2 {
flex: 1; border-radius: 4px 4px 0 0;
background: linear-gradient(to top, #6c8ef7, #c8d8ff);
}
.fs04__last { border-bottom: 1px solid var(--line); }
@media (max-width: 700px) {
.fs04__item { grid-template-columns: 1fr; gap: 32px; }
.fs04__item:nth-child(even) .fs04__item-visual { order: 0; }
.fs04__item-content, .fs04__item:nth-child(even) .fs04__item-content { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
.fs04__item { opacity: 1; transform: none; transition: none; }
}
```
**JS:**
```js
const observer = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('fs04--visible');
observer.unobserve(e.target);
}
});
}, { threshold: 0.15 });
document.querySelectorAll('.fs04__item').forEach((el, i) => {
el.style.transitionDelay = `${i * 0.08}s`;
observer.observe(el);
});
```
### 05. CSS Feature Section with Code Preview
**Type:** Pure CSS
**Description:** A GitHub-dark developer SDK feature section: a tabbed code window with full JetBrains Mono syntax highlighting (keywords, strings, comments, numbers) and a four-column feature-tile grid below. Green “Install” CTA. JetBrains Mono + Inter.
**HTML:**
```html
$ npm install @platform/sdk
A developer API that
gets out of your way
Five lines to integrate. Full TypeScript types. Logs you can actually read. Built by engineers who've suffered through every other SDK so you don't have to.
1// Initialize the client with your API key
2import { Platform } from '@platform/sdk';
3
4const client = new Platform({
5 apiKey: process.env.PLATFORM_KEY,
6 region: 'us-east-1',
7 retries: 3,
8});
9
10// Stream events with full TypeScript types
11const stream = await client.events.stream({
12 source: 'production',
13 filter: { type: 'purchase' },
14});
15
16for await (const event of stream) {
17 console.log(event.data); // fully typed
18}
Full TypeScript support
Every method, event, and error is typed. IntelliSense autocompletes your way through the entire API surface.
types: strict
Idempotent retries
Automatic exponential backoff with jitter. Duplicate prevention guaranteed via idempotency keys.
retries: 3
Webhook validation
Verify every inbound payload with one helper. HMAC-SHA256 signature checking built into the SDK.
hmac-sha256
Structured logging
JSON logs with trace IDs and request context that pipe directly into Datadog, Grafana, or any OTEL collector.
otel-ready
```
**CSS:**
```css
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fs05 {
--bg: #0d1117;
--surface: #161b22;
--border: #30363d;
--text: #e6edf3;
--muted: #7d8590;
--green: #3fb950;
--blue: #79c0ff;
--purple: #d2a8ff;
--orange: #ffa657;
--red: #ff7b72;
--yellow: #e3b341;
font-family: 'Inter', sans-serif;
background: var(--bg);
color: var(--text);
padding: 80px 24px;
min-height: 100vh;
}
.fs05__inner { max-width: 1100px; margin: 0 auto; }
.fs05__top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin-bottom: 80px;
}
.fs05__label {
display: inline-flex; align-items: center; gap: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--green);
background: rgba(63,185,80,0.1);
border: 1px solid rgba(63,185,80,0.25);
padding: 4px 10px;
border-radius: 6px;
margin-bottom: 20px;
}
.fs05__h2 {
font-size: clamp(32px, 4vw, 50px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.025em;
margin-bottom: 18px;
}
.fs05__h2 em { font-style: normal; color: var(--blue); }
.fs05__p {
font-size: 16px;
line-height: 1.7;
color: var(--muted);
margin-bottom: 28px;
}
.fs05__cta-row { display: flex; gap: 10px; }
.fs05__btn {
display: inline-flex; align-items: center; gap: 8px;
font-size: 14px;
font-weight: 600;
padding: 10px 20px;
border-radius: 8px;
text-decoration: none;
transition: opacity 0.2s;
}
.fs05__btn:hover { opacity: 0.8; }
.fs05__btn--green { background: var(--green); color: #000; }
.fs05__btn--ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
/* Code window */
.fs05__window {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.fs05__win-bar {
display: flex;
align-items: center;
gap: 0;
padding: 0;
background: #1c2028;
border-bottom: 1px solid var(--border);
}
.fs05__win-tabs {
display: flex;
}
.fs05__tab {
padding: 10px 20px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--muted);
border-right: 1px solid var(--border);
cursor: pointer;
}
.fs05__tab--active {
background: var(--surface);
color: var(--text);
border-bottom: 2px solid var(--blue);
margin-bottom: -1px;
}
.fs05__win-dots {
margin-left: auto;
display: flex; gap: 6px;
padding: 0 16px;
}
.fs05__dot {
width: 10px; height: 10px; border-radius: 50%;
}
.fs05__dot:nth-child(1) { background: #ff5f57; }
.fs05__dot:nth-child(2) { background: #febc2e; }
.fs05__dot:nth-child(3) { background: #28c840; }
.fs05__code {
padding: 24px;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
line-height: 1.7;
overflow-x: auto;
}
.fs05__ln { color: #3d444d; user-select: none; margin-right: 20px; }
.kw { color: var(--purple); }
.fn { color: var(--blue); }
.str { color: var(--orange); }
.cm { color: #8b949e; font-style: italic; }
.num { color: var(--green); }
.prop { color: var(--blue); }
.var { color: var(--red); }
.obj { color: var(--yellow); }
/* Feature grid below */
.fs05__features {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.fs05__feat {
background: var(--surface);
padding: 28px;
transition: background 0.2s;
}
.fs05__feat:hover { background: #1c2028; }
.fs05__feat-icon {
width: 36px; height: 36px;
border-radius: 8px;
margin-bottom: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
}
.fs05__feat:nth-child(1) .fs05__feat-icon { background: rgba(63,185,80,0.15); }
.fs05__feat:nth-child(2) .fs05__feat-icon { background: rgba(121,192,255,0.15); }
.fs05__feat:nth-child(3) .fs05__feat-icon { background: rgba(210,168,255,0.15); }
.fs05__feat:nth-child(4) .fs05__feat-icon { background: rgba(255,166,87,0.15); }
.fs05__feat-title {
font-size: 14px;
font-weight: 700;
margin-bottom: 8px;
color: var(--text);
}
.fs05__feat-desc {
font-size: 12px;
line-height: 1.6;
color: var(--muted);
}
.fs05__feat-badge {
display: inline-block;
margin-top: 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
padding: 2px 8px;
border-radius: 4px;
}
.fs05__feat:nth-child(1) .fs05__feat-badge { background: rgba(63,185,80,0.15); color: var(--green); }
.fs05__feat:nth-child(2) .fs05__feat-badge { background: rgba(121,192,255,0.15); color: var(--blue); }
.fs05__feat:nth-child(3) .fs05__feat-badge { background: rgba(210,168,255,0.15); color: var(--purple); }
.fs05__feat:nth-child(4) .fs05__feat-badge { background: rgba(255,166,87,0.15); color: var(--orange); }
@media (max-width: 800px) {
.fs05__top { grid-template-columns: 1fr; }
.fs05__features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
.fs05__features { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.fs05__btn, .fs05__feat { transition: none; }
}
```
### 06. CSS Feature Comparison Section
**Type:** Pure CSS
**Description:** A side-by-side feature comparison table: “Typical SaaS” vs “Our Platform” with ✓/✕/~ check indicators, a purple recommended column with extra border+shadow, and two pricing cards at the bottom. Cabinet Grotesk + Plus Jakarta Sans.
**HTML:**
```html
Compare plans
Why teams switch
to our platform
Side-by-side, the difference is obvious. Here's what you get that the alternatives simply don't offer.
Features
vs Competitors
Typical SaaS
Others
✕Real-time collaborationAdd-on only
~Custom domain supportEnterprise tier
✕Automated backupsManual only
✕AI-assisted workflowsNot available
~API rate limits1k req/min
✕SSO included+$150/mo
✕SLA uptime guaranteeBest effort
~Audit logs30-day only
Our Platform
Recommended
✓Real-time collaborationAll plans
✓Custom domain supportAll plans
✓Automated backupsHourly, 90-day retention
✓AI-assisted workflowsBuilt-in
✓API rate limitsUnlimited
✓SSO includedFree on all plans
✓SLA uptime guarantee99.99% guaranteed
✓Audit logsUnlimited retention
```
**CSS:**
```css
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fs06 {
font-family: 'Plus Jakarta Sans', sans-serif;
background: #fff;
color: #111827;
padding: 100px 24px;
}
.fs06__inner { max-width: 1060px; margin: 0 auto; }
.fs06__header { text-align: center; margin-bottom: 64px; }
.fs06__chip {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #6d28d9;
background: #f3eeff;
padding: 5px 14px;
border-radius: 100px;
margin-bottom: 20px;
}
.fs06__h2 {
font-family: 'Cabinet Grotesk', sans-serif;
font-size: clamp(34px, 5vw, 58px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 16px;
}
.fs06__h2 span { color: #6d28d9; }
.fs06__sub {
font-size: 17px;
color: #6b7280;
max-width: 480px;
margin: 0 auto;
line-height: 1.65;
}
/* Toggle tabs */
.fs06__tabs {
display: flex;
justify-content: center;
gap: 4px;
background: #f3f4f6;
border-radius: 12px;
padding: 4px;
max-width: 320px;
margin: 0 auto 56px;
}
.fs06__tab {
flex: 1;
text-align: center;
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
border-radius: 9px;
cursor: pointer;
color: #6b7280;
transition: all 0.2s;
user-select: none;
}
.fs06__tab--on {
background: #fff;
color: #111827;
box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
/* Two-column comparison */
.fs06__compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: start;
}
.fs06__col {
border-radius: 20px;
overflow: hidden;
border: 2px solid transparent;
}
.fs06__col--them {
background: #f9fafb;
border-color: #e5e7eb;
}
.fs06__col--us {
background: #fff;
border-color: #6d28d9;
box-shadow: 0 0 0 1px #6d28d9, 0 20px 60px rgba(109,40,217,0.12);
}
.fs06__col-head {
padding: 28px 28px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.fs06__col-name {
font-family: 'Cabinet Grotesk', sans-serif;
font-size: 18px;
font-weight: 800;
color: #111827;
}
.fs06__col--them .fs06__col-name { color: #6b7280; }
.fs06__badge {
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 100px;
letter-spacing: 0.06em;
}
.fs06__badge--purple { background: #f3eeff; color: #6d28d9; }
.fs06__badge--gray { background: #e5e7eb; color: #9ca3af; }
.fs06__divider { height: 1px; background: #e5e7eb; margin: 0 0 4px; }
.fs06__row {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 28px;
font-size: 14px;
color: #374151;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.fs06__row:last-child { border-bottom: none; }
.fs06__check {
width: 20px; height: 20px;
border-radius: 50%;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 11px;
font-weight: 700;
}
.fs06__check--yes { background: #d1fae5; color: #059669; }
.fs06__check--no { background: #f3f4f6; color: #9ca3af; }
.fs06__check--part { background: #fef3c7; color: #d97706; }
.fs06__row-label { flex: 1; }
.fs06__row-note {
font-size: 12px;
color: #9ca3af;
}
.fs06__col--us .fs06__row-note { color: #6d28d9; }
/* Pricing footer */
.fs06__price-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 32px;
}
.fs06__price-card {
border-radius: 16px;
padding: 28px;
text-align: center;
}
.fs06__price-card--them {
background: #f9fafb;
border: 1px solid #e5e7eb;
}
.fs06__price-card--us {
background: linear-gradient(135deg, #6d28d9, #9b59f7);
color: #fff;
}
.fs06__price-num {
font-family: 'Cabinet Grotesk', sans-serif;
font-size: 40px;
font-weight: 800;
line-height: 1;
}
.fs06__price-card--them .fs06__price-num { color: #9ca3af; }
.fs06__price-period { font-size: 13px; opacity: 0.7; margin: 4px 0 16px; }
.fs06__price-btn {
display: inline-block;
font-size: 14px;
font-weight: 600;
padding: 10px 24px;
border-radius: 10px;
text-decoration: none;
transition: opacity 0.2s;
}
.fs06__price-btn:hover { opacity: 0.85; }
.fs06__price-btn--gray { background: #e5e7eb; color: #6b7280; }
.fs06__price-btn--white { background: #fff; color: #6d28d9; }
@media (max-width: 640px) {
.fs06__compare, .fs06__price-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.fs06__tab, .fs06__price-btn { transition: none; }
}
```
### 07. CSS SaaS Features Section 2025
**Type:** Pure CSS
**Description:** A full SaaS hero with animated mesh-gradient background, shimmer-gradient headline, live-pulse “Now in beta” ticker, G2/Capterra social proof strip, and three alternating feature rows with abstract stat mockups. Bricolage Grotesque + Inter.
**HTML:**
```html
Now in public beta · 2025
The SaaS platform
built for what's next
Stop stitching together tools. One platform to collect, analyze, automate, and act — engineered for the pace modern teams actually move at.
4.9 / 5 on G2
4.8 / 5 on Capterra
Trusted by 10,000+ teams
Feature highlights
Three things your current stack can't do
Automation
Workflows that write themselves from your data
Describe the outcome you want in plain English. The platform reads your event schema, maps triggers to actions, and suggests a fully-wired pipeline before you write a single line.
- Natural language workflow creation
- Auto-detected triggers from your event stream
- One-click deploy to production
94%
Faster setup
0
Lines of code
Analytics
Answers, not just charts. Ask any question.
No SQL. No BI tool. Type your question and get a chart, a number, or a ranked list — backed by the data in your warehouse, rendered in seconds.
- Natural language querying over your live data
- Drill-down filters surfaced automatically
- Shareable snapshots with one click
3s
Query time
∞
Data sources
Security
Enterprise-grade security without the enterprise price tag
SOC 2 Type II certified, GDPR-compliant data residency, and passkey-first authentication. No additional SKUs required for any of it.
- SOC 2 Type II, HIPAA, ISO 27001
- Hardware key + passkey MFA built-in
- Regional data residency on all plans
3
Certifications
$0
Add-on cost
```
**CSS:**
```css
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fs07 {
font-family: 'Inter', sans-serif;
background: #fff;
color: #0f0f14;
overflow: hidden;
}
/* Hero strip */
.fs07__hero {
position: relative;
padding: 100px 24px 80px;
text-align: center;
overflow: hidden;
}
.fs07__hero-mesh {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 50% at 20% 40%, rgba(139,92,246,0.12) 0%, transparent 60%),
radial-gradient(ellipse 60% 40% at 80% 60%, rgba(236,72,153,0.1) 0%, transparent 60%),
radial-gradient(ellipse 50% 60% at 50% 0%, rgba(59,130,246,0.08) 0%, transparent 60%);
pointer-events: none;
}
.fs07__ticker {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: #6b7280;
border: 1px solid #e5e7eb;
padding: 6px 16px;
border-radius: 100px;
margin-bottom: 32px;
}
.fs07__ticker-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 6px #22c55e;
animation: fs07-blink 2s ease-in-out infinite;
}
@keyframes fs07-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.fs07__h1 {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(40px, 6vw, 78px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.05;
margin-bottom: 24px;
position: relative;
}
.fs07__h1-word {
display: inline-block;
position: relative;
}
.fs07__h1-word--gradient {
background: linear-gradient(135deg, #8b5cf6, #ec4899, #3b82f6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200%;
animation: fs07-shift 4s ease-in-out infinite alternate;
}
@keyframes fs07-shift {
from { background-position: 0% 50%; }
to { background-position: 100% 50%; }
}
.fs07__hero-sub {
font-size: 18px;
color: #6b7280;
max-width: 520px;
margin: 0 auto 40px;
line-height: 1.65;
}
.fs07__cta-group {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.fs07__cta {
display: inline-flex; align-items: center; gap: 8px;
font-size: 15px;
font-weight: 600;
padding: 13px 28px;
border-radius: 12px;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
}
.fs07__cta:hover { transform: translateY(-2px); }
.fs07__cta--primary {
background: linear-gradient(135deg, #8b5cf6, #ec4899);
color: #fff;
box-shadow: 0 4px 20px rgba(139,92,246,0.35);
}
.fs07__cta--primary:hover {
box-shadow: 0 8px 30px rgba(139,92,246,0.45);
}
.fs07__cta--text { color: #6b7280; background: none; font-size: 14px; }
/* Social proof strip */
.fs07__proof {
padding: 20px 24px 0;
display: flex;
justify-content: center;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.fs07__proof-item {
font-size: 13px;
color: #9ca3af;
display: flex; align-items: center; gap: 6px;
}
.fs07__proof-item::before {
content: '★★★★★';
font-size: 11px;
color: #f59e0b;
}
/* Features section */
.fs07__section {
padding: 80px 24px;
max-width: 1100px;
margin: 0 auto;
}
.fs07__section-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #8b5cf6;
text-align: center;
margin-bottom: 12px;
}
.fs07__section-title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(28px, 4vw, 46px);
font-weight: 800;
letter-spacing: -0.02em;
text-align: center;
margin-bottom: 56px;
}
/* Alternating feature rows */
.fs07__feat-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin-bottom: 80px;
}
.fs07__feat-row:nth-child(even) .fs07__feat-vis { order: -1; }
.fs07__feat-eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 14px;
}
.fs07__feat-row:nth-child(1) .fs07__feat-eyebrow { color: #8b5cf6; }
.fs07__feat-row:nth-child(2) .fs07__feat-eyebrow { color: #ec4899; }
.fs07__feat-row:nth-child(3) .fs07__feat-eyebrow { color: #3b82f6; }
.fs07__feat-title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(22px, 2.5vw, 32px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: 14px;
}
.fs07__feat-body {
font-size: 15px;
line-height: 1.7;
color: #6b7280;
margin-bottom: 24px;
}
.fs07__feat-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.fs07__feat-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
color: #374151;
}
.fs07__feat-list li::before {
content: '→';
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
.fs07__feat-row:nth-child(1) .fs07__feat-list li::before { color: #8b5cf6; }
.fs07__feat-row:nth-child(2) .fs07__feat-list li::before { color: #ec4899; }
.fs07__feat-row:nth-child(3) .fs07__feat-list li::before { color: #3b82f6; }
/* Visual areas */
.fs07__feat-vis {
border-radius: 20px;
aspect-ratio: 4/3;
position: relative;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.fs07__feat-row:nth-child(1) .fs07__feat-vis { background: linear-gradient(135deg, #f5f0ff, #ede8ff); }
.fs07__feat-row:nth-child(2) .fs07__feat-vis { background: linear-gradient(135deg, #fff0f7, #ffe8f4); }
.fs07__feat-row:nth-child(3) .fs07__feat-vis { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
.fs07__vis-card {
background: #fff;
border-radius: 14px;
padding: 20px;
width: 82%;
box-shadow: 0 16px 48px rgba(0,0,0,0.1);
}
.fs07__vis-bar { height: 8px; border-radius: 4px; background: #eee; margin-bottom: 8px; }
.fs07__vis-bar--1 { width: 65%; background: linear-gradient(90deg, #8b5cf6, #c4b5fd); }
.fs07__vis-bar--2 { width: 80%; background: linear-gradient(90deg, #ec4899, #f9a8d4); }
.fs07__vis-bar--3 { width: 55%; background: linear-gradient(90deg, #3b82f6, #93c5fd); }
.fs07__vis-stat {
display: flex; gap: 12px; margin-top: 16px;
}
.fs07__vis-stat-box {
flex: 1; padding: 12px; background: #f9fafb; border-radius: 10px; text-align: center;
}
.fs07__vis-stat-num {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 22px;
font-weight: 800;
}
.fs07__vis-stat-lbl { font-size: 10px; color: #9ca3af; margin-top: 2px; }
@media (max-width: 700px) {
.fs07__feat-row { grid-template-columns: 1fr; gap: 32px; }
.fs07__feat-row:nth-child(even) .fs07__feat-vis { order: 0; }
.fs07__proof { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.fs07__ticker-dot, .fs07__h1-word--gradient { animation: none; }
.fs07__cta { transition: none; }
}
```
### 08. CSS Feature Section 3D Perspective Cards
**Type:** CSS + JS
**Description:** A deep-black 6-card feature section where each card tilts in 3D on mousemove via `rotateX/rotateY`. Per-card colour top-stripe, glow intensifies on hover, ghost number decorations, and metric + arrow footer. Outfit.
**HTML:**
```html
Core platform
Six pillars of a
faster product
Each capability was built to remove a specific category of friction. Together they compound into something much harder to replicate.
01
🚀
Instant Previews
Every branch gets a shareable URL the moment you push. Stakeholders review in production-identical environments, not screenshots.
02
🧩
Component Library
A living design system that syncs directly with your code. Designers and developers always reference the same source of truth.
03
♻️
Zero-Waste CI
Only re-run tests and builds for code that actually changed. Granular caching cuts your CI spend by up to 70% from day one.
04
🔮
Predictive Scaling
ML-forecasted traffic patterns scale your infra before demand spikes hit — not in response to them. Goodbye cold-start latency.
05
🗂️
Unified Observability
Traces, metrics, and logs correlated in a single view. Follow a user request from client to database with one click — no tab-switching.
06
🔑
Secrets Management
Environment variables scoped by branch, team, and service. Rotation policies, leak detection, and audit trails built in, not bolted on.
```
**CSS:**
```css
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fs08 {
font-family: 'Outfit', sans-serif;
background: #08080f;
color: #f0eeff;
padding: 100px 24px;
overflow: hidden;
min-height: 100vh;
}
.fs08__inner { max-width: 1060px; margin: 0 auto; }
.fs08__header { text-align: center; margin-bottom: 72px; }
.fs08__chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #a78bfa;
margin-bottom: 20px;
}
.fs08__chip-line { width: 24px; height: 1px; background: #a78bfa; }
.fs08__h2 {
font-size: clamp(36px, 5vw, 64px);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.07;
margin-bottom: 18px;
}
.fs08__h2 span {
color: transparent;
-webkit-text-stroke: 1.5px rgba(167,139,250,0.6);
}
.fs08__sub {
font-size: 17px;
color: rgba(240,238,255,0.45);
max-width: 480px;
margin: 0 auto;
line-height: 1.65;
}
/* 3D card grid */
.fs08__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
perspective: 1200px;
}
.fs08__card {
position: relative;
border-radius: 20px;
padding: 36px 28px;
overflow: hidden;
cursor: pointer;
transition: transform 0.4s cubic-bezier(.23,1,.32,1), box-shadow 0.4s;
transform-style: preserve-3d;
background: #12121e;
border: 1px solid rgba(255,255,255,0.07);
}
.fs08__card:hover {
box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}
/* Color stripe on top */
.fs08__card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
border-radius: 20px 20px 0 0;
}
.fs08__card:nth-child(1)::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.fs08__card:nth-child(2)::before { background: linear-gradient(90deg, #db2777, #f9a8d4); }
.fs08__card:nth-child(3)::before { background: linear-gradient(90deg, #059669, #6ee7b7); }
.fs08__card:nth-child(4)::before { background: linear-gradient(90deg, #d97706, #fde68a); }
.fs08__card:nth-child(5)::before { background: linear-gradient(90deg, #0284c7, #7dd3fc); }
.fs08__card:nth-child(6)::before { background: linear-gradient(90deg, #be123c, #fda4af); }
/* Glow behind card content */
.fs08__card-glow {
position: absolute;
width: 200px; height: 200px;
border-radius: 50%;
filter: blur(60px);
bottom: -80px; right: -60px;
opacity: 0.2;
transition: opacity 0.4s;
pointer-events: none;
}
.fs08__card:hover .fs08__card-glow { opacity: 0.4; }
.fs08__card:nth-child(1) .fs08__card-glow { background: #7c3aed; }
.fs08__card:nth-child(2) .fs08__card-glow { background: #db2777; }
.fs08__card:nth-child(3) .fs08__card-glow { background: #059669; }
.fs08__card:nth-child(4) .fs08__card-glow { background: #d97706; }
.fs08__card:nth-child(5) .fs08__card-glow { background: #0284c7; }
.fs08__card:nth-child(6) .fs08__card-glow { background: #be123c; }
.fs08__card-num {
font-size: 48px;
font-weight: 800;
opacity: 0.06;
position: absolute;
top: 16px; right: 20px;
line-height: 1;
pointer-events: none;
user-select: none;
}
.fs08__icon {
font-size: 30px;
margin-bottom: 20px;
display: block;
position: relative;
z-index: 1;
}
.fs08__card-title {
font-size: 20px;
font-weight: 800;
margin-bottom: 12px;
color: #fff;
letter-spacing: -0.01em;
position: relative;
z-index: 1;
}
.fs08__card-body {
font-size: 14px;
line-height: 1.65;
color: rgba(240,238,255,0.5);
position: relative;
z-index: 1;
}
.fs08__card-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 24px;
position: relative;
z-index: 1;
}
.fs08__card-metric {
font-size: 22px;
font-weight: 800;
}
.fs08__card:nth-child(1) .fs08__card-metric { color: #a78bfa; }
.fs08__card:nth-child(2) .fs08__card-metric { color: #f9a8d4; }
.fs08__card:nth-child(3) .fs08__card-metric { color: #6ee7b7; }
.fs08__card:nth-child(4) .fs08__card-metric { color: #fde68a; }
.fs08__card:nth-child(5) .fs08__card-metric { color: #7dd3fc; }
.fs08__card:nth-child(6) .fs08__card-metric { color: #fda4af; }
.fs08__card-metric-lbl {
font-size: 11px;
color: rgba(240,238,255,0.3);
margin-top: 2px;
}
.fs08__arrow {
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.12);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
color: rgba(255,255,255,0.4);
transition: border-color 0.2s, color 0.2s;
}
.fs08__card:hover .fs08__arrow {
border-color: rgba(255,255,255,0.3);
color: #fff;
}
@media (max-width: 768px) {
.fs08__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
.fs08__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.fs08__card { transition: none; }
}
```
**JS:**
```js
// 3D tilt on hover
const cards = document.querySelectorAll('.fs08__card');
cards.forEach(card => {
card.addEventListener('mousemove', e => {
const rect = card.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width - 0.5;
const y = (e.clientY - rect.top) / rect.height - 0.5;
card.style.transform = `perspective(800px) rotateY(${x * 12}deg) rotateX(${-y * 10}deg) translateZ(10px)`;
});
card.addEventListener('mouseleave', () => {
card.style.transform = '';
});
});
```
### 09. CSS Feature Section with Floating Mockup
**Type:** Pure CSS
**Description:** Warm parchment background with a CSS-animated floating phone mockup (bob keyframe), two counterphased floating metric cards, a serif italic headline, and a 4-tile bottom grid. Instrument Serif italic + Inter.
**HTML:**
```html
Mobile-first platform
Your entire business,
in the palm of your hand
A native-quality mobile experience for managing your operations, approving requests, and staying on top of what matters — wherever you are.
- ✓ Real-time notifications with one-tap approval
- ✓ Offline-capable sync for low-connectivity environments
- ✓ Biometric authentication and face unlock support
- ✓ Available on iOS and Android — same feature parity
99.9%
Offline reliability
4.9★
App Store rating
+$12,440
3 approvals
On track ↑
i.
Push Notifications
Smart alerts that know when to interrupt and when to queue — based on your calendar and work patterns.
ii.
Offline Mode
Full read and write access when you're on a plane or in a basement. Changes sync the moment you reconnect.
iii.
Widget Support
Key metrics on your home screen. See today's pipeline, pending approvals, or team pulse without opening the app.
iv.
Apple Watch / Wear OS
Approve requests, check alerts, and see summaries from your wrist. No phone required for common actions.
```
**CSS:**
```css
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fs09 {
font-family: 'Inter', sans-serif;
background: #f8f6f1;
color: #1a1814;
padding: 96px 24px;
overflow: hidden;
min-height: 100vh;
}
.fs09__inner { max-width: 1100px; margin: 0 auto; }
/* Split hero */
.fs09__split {
display: grid;
grid-template-columns: 5fr 6fr;
gap: 64px;
align-items: center;
margin-bottom: 96px;
}
.fs09__eyebrow {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #b45309;
margin-bottom: 20px;
}
.fs09__h2 {
font-family: 'Instrument Serif', serif;
font-size: clamp(38px, 5vw, 62px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.01em;
margin-bottom: 20px;
}
.fs09__h2 em {
font-style: italic;
color: #b45309;
}
.fs09__body {
font-size: 16px;
line-height: 1.75;
color: #5c5447;
margin-bottom: 32px;
}
.fs09__list {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 36px;
}
.fs09__list li {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
color: #2d2920;
}
.fs09__check {
width: 20px; height: 20px;
border-radius: 50%;
background: #fef3c7;
border: 1.5px solid #f59e0b;
display: flex; align-items: center; justify-content: center;
font-size: 10px;
color: #92400e;
flex-shrink: 0;
}
.fs09__cta-row { display: flex; gap: 12px; align-items: center; }
.fs09__btn-primary {
display: inline-flex; align-items: center; gap: 8px;
background: #1a1814;
color: #f8f6f1;
font-size: 15px;
font-weight: 600;
padding: 13px 26px;
border-radius: 100px;
text-decoration: none;
transition: background 0.2s;
}
.fs09__btn-primary:hover { background: #2d2920; }
.fs09__btn-link {
font-size: 14px;
color: #5c5447;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Floating mockup area */
.fs09__mockup-wrap {
position: relative;
height: 480px;
}
.fs09__phone {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 260px;
background: #1a1814;
border-radius: 36px;
padding: 16px;
box-shadow: 0 40px 100px rgba(0,0,0,0.25);
z-index: 2;
animation: fs09-float 5s ease-in-out infinite;
}
@keyframes fs09-float {
0%, 100% { transform: translateY(-50%) translateY(0); }
50% { transform: translateY(-50%) translateY(-14px); }
}
.fs09__phone-notch {
width: 80px; height: 22px;
background: #0a0908;
border-radius: 100px;
margin: 0 auto 14px;
}
.fs09__phone-screen {
background: #fff;
border-radius: 24px;
padding: 16px;
min-height: 340px;
}
.fs09__phone-bar { height: 6px; border-radius: 3px; background: #f0ece4; margin-bottom: 8px; }
.fs09__phone-bar--accent { background: linear-gradient(90deg, #b45309, #f59e0b); width: 70%; }
.fs09__phone-bar--sm { width: 45%; }
.fs09__phone-bar--md { width: 80%; }
.fs09__phone-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.fs09__phone-card {
background: #fafafa;
border: 1px solid #e8e4dc;
border-radius: 10px;
padding: 10px;
}
.fs09__phone-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fs09__phone-avatar { width: 20px; height: 20px; border-radius: 50%; }
.fs09__phone-avatar--a { background: linear-gradient(135deg, #b45309, #f59e0b); }
.fs09__phone-avatar--b { background: linear-gradient(135deg, #6d28d9, #a78bfa); }
.fs09__phone-card-line { height: 5px; flex: 1; border-radius: 3px; background: #e8e4dc; }
.fs09__phone-card-metric {
font-size: 13px;
font-weight: 700;
color: #b45309;
}
/* Floating mini cards */
.fs09__float-card {
position: absolute;
background: #fff;
border-radius: 14px;
padding: 14px 18px;
box-shadow: 0 12px 40px rgba(0,0,0,0.12);
z-index: 3;
border: 1px solid rgba(0,0,0,0.07);
}
.fs09__float-card--a {
left: 0; top: 40px;
animation: fs09-floatA 6s ease-in-out infinite;
}
.fs09__float-card--b {
left: 60px; bottom: 60px;
animation: fs09-floatB 7s ease-in-out infinite;
}
@keyframes fs09-floatA {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-10px) rotate(-1deg); }
}
@keyframes fs09-floatB {
0%, 100% { transform: translateY(0) rotate(1deg); }
50% { transform: translateY(10px) rotate(2deg); }
}
.fs09__fc-num {
font-family: 'Instrument Serif', serif;
font-size: 28px;
font-weight: 400;
color: #b45309;
line-height: 1;
}
.fs09__fc-label { font-size: 11px; color: #9c8f7e; margin-top: 2px; white-space: nowrap; }
/* Feature tiles below */
.fs09__tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
background: #e8e4dc;
border-radius: 20px;
overflow: hidden;
border: 1px solid #e8e4dc;
}
.fs09__tile {
background: #f8f6f1;
padding: 32px 24px;
transition: background 0.2s;
}
.fs09__tile:hover { background: #fff; }
.fs09__tile-num {
font-family: 'Instrument Serif', serif;
font-size: 14px;
font-style: italic;
color: #b45309;
margin-bottom: 12px;
}
.fs09__tile-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 8px;
color: #1a1814;
}
.fs09__tile-desc {
font-size: 13px;
line-height: 1.6;
color: #7a6e60;
}
@media (max-width: 780px) {
.fs09__split { grid-template-columns: 1fr; }
.fs09__mockup-wrap { height: 340px; }
.fs09__tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.fs09__tiles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.fs09__phone,
.fs09__float-card--a,
.fs09__float-card--b { animation: none !important; transform: translateY(-50%) !important; }
.fs09__float-card--a, .fs09__float-card--b { transform: none !important; }
}
```
### 10. CSS Feature Section Timeline Layout
**Type:** CSS + JS
**Description:** Midnight `#060612` background with a vertical timeline: an animated traveling-glow line, five staggered IntersectionObserver-reveal phase cards with status badges (Live/Active/New/Beta/Coming), JetBrains Mono labels, and per-phase accent colours. Sora + JetBrains Mono.
**HTML:**
```html
platform_roadmap.json
Built in layers.
Shipped with purpose.
Each capability unlocks the next. Here's how the platform was architected — and what it enables at every stage.
Core Event Ingestion
A durable, ordered event log that accepts data from any language via SDK or HTTP. The foundation everything else builds on — never lossy, never slow.
1B+
events / day
Stream Processing Engine
Stateful transformations, windowed aggregations, and joins run at the edge — milliseconds after events arrive, not hours later in a batch job.
48ms
p99 latency
Semantic Layer + Query API
Define your metrics once, query them everywhere. Consistent definitions across dashboards, alerts, and embedded analytics — no more metric drift across teams.
1 def
metric source
AI Anomaly Detection
Unsupervised models trained on your specific traffic fingerprint. Flags statistical outliers and surfaces likely root causes before your on-call engineer wakes up.
94%
detection rate
Automated Remediation
Close the loop between detection and resolution. Pre-approved runbooks execute automatically when a known issue is detected — human approval for anything novel.
0
manual pages
All five stages included in every plan. No roadmap upsells.
Explore the full platform →
```
**CSS:**
```css
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fs10 {
font-family: 'Sora', sans-serif;
background: #060612;
color: #e8e6f4;
padding: 100px 24px;
min-height: 100vh;
overflow: hidden;
}
.fs10__inner { max-width: 900px; margin: 0 auto; }
.fs10__header { text-align: center; margin-bottom: 80px; }
.fs10__pre {
display: inline-flex; align-items: center; gap: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: #64ffda;
border: 1px solid rgba(100,255,218,0.2);
background: rgba(100,255,218,0.05);
padding: 5px 12px;
border-radius: 6px;
margin-bottom: 24px;
}
.fs10__h2 {
font-size: clamp(34px, 5vw, 58px);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.1;
margin-bottom: 18px;
}
.fs10__h2 span {
background: linear-gradient(135deg, #64ffda, #00b4d8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.fs10__sub {
font-size: 17px;
color: rgba(232,230,244,0.45);
max-width: 460px;
margin: 0 auto;
line-height: 1.65;
}
/* Timeline */
.fs10__timeline {
position: relative;
padding-left: 60px;
}
/* Vertical line */
.fs10__timeline::before {
content: '';
position: absolute;
left: 20px;
top: 0; bottom: 0;
width: 1px;
background: linear-gradient(to bottom, transparent, rgba(100,255,218,0.3) 10%, rgba(100,255,218,0.3) 90%, transparent);
}
/* Moving glow on the line */
.fs10__line-glow {
position: absolute;
left: 16px; top: 0;
width: 9px;
height: 80px;
background: linear-gradient(to bottom, transparent, #64ffda, transparent);
border-radius: 100px;
animation: fs10-travel 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes fs10-travel {
0% { top: 0; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { top: calc(100% - 80px); opacity: 0; }
}
.fs10__item {
position: relative;
padding: 0 0 56px 0;
opacity: 0;
transform: translateX(-20px);
transition: opacity 0.6s cubic-bezier(.4,0,.2,1), transform 0.6s cubic-bezier(.4,0,.2,1);
}
.fs10__item.fs10--visible {
opacity: 1;
transform: none;
}
.fs10__item:last-child { padding-bottom: 0; }
/* Timeline node */
.fs10__node {
position: absolute;
left: -49px;
top: 4px;
width: 18px; height: 18px;
border-radius: 50%;
border: 2px solid rgba(100,255,218,0.3);
background: #060612;
display: flex; align-items: center; justify-content: center;
transition: border-color 0.3s, box-shadow 0.3s;
}
.fs10__item:hover .fs10__node {
border-color: #64ffda;
box-shadow: 0 0 12px rgba(100,255,218,0.4);
}
.fs10__node-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(100,255,218,0.4);
transition: background 0.3s;
}
.fs10__item:hover .fs10__node-dot { background: #64ffda; }
/* Card */
.fs10__card {
background: #0d0d20;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 18px;
padding: 28px 32px;
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: start;
transition: border-color 0.3s, background 0.3s;
position: relative;
overflow: hidden;
}
.fs10__card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
border-radius: 18px 0 0 18px;
opacity: 0;
transition: opacity 0.3s;
}
.fs10__item:nth-child(1) .fs10__card::before { background: #64ffda; }
.fs10__item:nth-child(2) .fs10__card::before { background: #00b4d8; }
.fs10__item:nth-child(3) .fs10__card::before { background: #a78bfa; }
.fs10__item:nth-child(4) .fs10__card::before { background: #fb923c; }
.fs10__item:nth-child(5) .fs10__card::before { background: #34d399; }
.fs10__item:hover .fs10__card {
border-color: rgba(255,255,255,0.14);
background: #10102a;
}
.fs10__item:hover .fs10__card::before { opacity: 1; }
.fs10__card-meta {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.fs10__card-phase {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: rgba(232,230,244,0.35);
letter-spacing: 0.08em;
}
.fs10__card-status {
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-radius: 100px;
}
.fs10__status--live { background: rgba(100,255,218,0.1); color: #64ffda; }
.fs10__status--active { background: rgba(0,180,216,0.1); color: #00b4d8; }
.fs10__status--new { background: rgba(167,139,250,0.1); color: #a78bfa; }
.fs10__status--beta { background: rgba(251,146,60,0.1); color: #fb923c; }
.fs10__status--soon { background: rgba(52,211,153,0.1); color: #34d399; }
.fs10__card-title {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.015em;
color: #fff;
margin-bottom: 10px;
}
.fs10__card-body {
font-size: 14px;
line-height: 1.7;
color: rgba(232,230,244,0.5);
margin-bottom: 18px;
}
.fs10__card-tags {
display: flex; flex-wrap: wrap; gap: 6px;
}
.fs10__tag {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
padding: 4px 10px;
border-radius: 6px;
background: rgba(255,255,255,0.05);
color: rgba(232,230,244,0.45);
}
/* Right column: metric */
.fs10__card-right { text-align: right; }
.fs10__metric-big {
font-size: 36px;
font-weight: 800;
line-height: 1;
margin-bottom: 4px;
}
.fs10__item:nth-child(1) .fs10__metric-big { color: #64ffda; }
.fs10__item:nth-child(2) .fs10__metric-big { color: #00b4d8; }
.fs10__item:nth-child(3) .fs10__metric-big { color: #a78bfa; }
.fs10__item:nth-child(4) .fs10__metric-big { color: #fb923c; }
.fs10__item:nth-child(5) .fs10__metric-big { color: #34d399; }
.fs10__metric-lbl {
font-size: 11px;
color: rgba(232,230,244,0.3);
white-space: nowrap;
}
/* CTA */
.fs10__cta-wrap {
text-align: center;
margin-top: 64px;
padding-top: 48px;
border-top: 1px solid rgba(255,255,255,0.07);
}
.fs10__cta-wrap p {
font-size: 16px;
color: rgba(232,230,244,0.45);
margin-bottom: 20px;
}
.fs10__btn {
display: inline-flex; align-items: center; gap: 10px;
background: rgba(100,255,218,0.1);
border: 1px solid rgba(100,255,218,0.3);
color: #64ffda;
font-family: 'Sora', sans-serif;
font-size: 15px;
font-weight: 600;
padding: 13px 28px;
border-radius: 100px;
text-decoration: none;
transition: background 0.2s, box-shadow 0.2s;
}
.fs10__btn:hover {
background: rgba(100,255,218,0.18);
box-shadow: 0 0 24px rgba(100,255,218,0.2);
}
@media (max-width: 600px) {
.fs10__timeline { padding-left: 40px; }
.fs10__node { left: -32px; }
.fs10__card { grid-template-columns: 1fr; }
.fs10__card-right { text-align: left; display: flex; gap: 12px; align-items: baseline; }
}
@media (prefers-reduced-motion: reduce) {
.fs10__line-glow { animation: none; }
.fs10__item { opacity: 1; transform: none; transition: none; }
.fs10__card, .fs10__node, .fs10__card::before { transition: none; }
}
```
**JS:**
```js
const observer = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('fs10--visible');
observer.unobserve(e.target);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.fs10__item').forEach((el, i) => {
el.style.transitionDelay = `${i * 0.12}s`;
observer.observe(el);
});
```
---
## 15 CSS Flexbox Layouts
URL: https://codefronts.com/layouts/css-flexbox-layouts/
Description: 15 production-ready CSS flexbox layouts with live demos and copy-paste code — holy grail page shell, responsive card grid, sticky navbar, masonry-style columns, sidebar dashboard, product cards, pricing table, magazine article, sticky footer with min-block-size: 100dvh, centered hero, vertical timeline, chat interface, mosaic gallery, two-column form, and kanban board. Every demo is mobile-first, WCAG-friendly, and works without a build step.
Demo count: 15
### 01. CSS Flexbox Holy Grail Layout
**Type:** Pure CSS
**Description:** A classic holy grail layout — fixed header, footer, left sidebar, right aside, and expanding main column — built entirely with nested flex containers and no CSS Grid.
**HTML:**
```html
HolyGrail
Holy Grail Layout
with CSS Flexbox
The Holy Grail layout — a full-height page with a header, sticky footer, left sidebar, right aside, and fluid centre — solved the hardest layout problem of the float era. Flexbox reduces it to two nested flex containers: an outer column wrapper and an inner row middle section.
The outer wrapper uses flex-direction: column and min-height: 100%. The middle row gets flex: 1 to fill remaining space, while sidebars use a fixed width with flex-shrink: 0 to resist compression.
flex: 1
Main
Fills remaining width
flex-shrink: 0
Sides
Fixed at 180px each
flex-direction
Column
Header stacks on footer
```
**CSS:**
```css
.fl-01, .fl-01 *, .fl-01 *::before, .fl-01 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.fl-01 ::selection { background: #6c63ff; color: #fff; }
.fl-01 {
--ink: #1a1a2e;
--muted: #6b7280;
--accent: #6c63ff;
--accent2: #f59e0b;
--surface: #f8f7ff;
--border: #e5e3ff;
--header-bg: #1a1a2e;
--sidebar-bg: #f0eeff;
--aside-bg: #fff8ed;
--content-bg: #ffffff;
--footer-bg: #1a1a2e;
font-family: 'Inter', sans-serif;
background: var(--surface);
min-height: 500px;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--border);
}
/* Holy Grail: column flex on outer, row flex on middle */
.fl-01__wrapper {
display: flex;
flex-direction: column;
min-height: 500px;
}
/* ── Header ── */
.fl-01__header {
background: var(--header-bg);
color: #fff;
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.fl-01__logo {
font-family: 'Playfair Display', serif;
font-size: 1.25rem;
letter-spacing: -0.02em;
}
.fl-01__logo span { color: var(--accent2); }
.fl-01__nav {
display: flex;
gap: 20px;
list-style: none;
}
.fl-01__nav li a {
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: color 0.2s;
}
.fl-01__nav li a:hover { color: #fff; }
/* ── Middle row: sidebar + main + aside ── */
.fl-01__body {
display: flex;
flex: 1;
min-height: 0;
}
/* ── Left Sidebar ── */
.fl-01__sidebar {
background: var(--sidebar-bg);
width: 180px;
flex-shrink: 0;
padding: 20px 16px;
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 4px;
}
.fl-01__sidebar-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
padding: 8px 8px 4px;
}
.fl-01__sidebar-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
font-size: 0.82rem;
font-weight: 500;
color: var(--ink);
cursor: pointer;
transition: background 0.15s;
}
.fl-01__sidebar-item:hover { background: rgba(108,99,255,0.1); }
.fl-01__sidebar-item.is-active {
background: var(--accent);
color: #fff;
}
.fl-01__sidebar-icon {
width: 18px;
height: 18px;
border-radius: 4px;
background: currentColor;
opacity: 0.25;
}
.fl-01__sidebar-item.is-active .fl-01__sidebar-icon { opacity: 0.6; background: #fff; }
/* ── Main Content ── */
.fl-01__main {
flex: 1;
background: var(--content-bg);
padding: 24px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.fl-01__breadcrumb {
font-size: 0.72rem;
color: var(--muted);
display: flex;
align-items: center;
gap: 6px;
}
.fl-01__breadcrumb span { color: var(--ink); font-weight: 600; }
.fl-01__main-title {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
color: var(--ink);
line-height: 1.3;
}
.fl-01__meta {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.75rem;
color: var(--muted);
}
.fl-01__tag {
background: rgba(108,99,255,0.1);
color: var(--accent);
font-weight: 600;
padding: 2px 8px;
border-radius: 20px;
font-size: 0.7rem;
}
.fl-01__content-body {
font-size: 0.85rem;
color: var(--muted);
line-height: 1.7;
}
.fl-01__content-body p + p { margin-top: 10px; }
.fl-01__divider {
height: 1px;
background: var(--border);
}
.fl-01__cards {
display: flex;
gap: 12px;
}
.fl-01__card {
flex: 1;
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px;
}
.fl-01__card-label {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 6px;
}
.fl-01__card-value {
font-size: 1.4rem;
font-weight: 700;
color: var(--ink);
}
.fl-01__card-delta {
font-size: 0.72rem;
color: #10b981;
font-weight: 600;
margin-top: 2px;
}
/* ── Right Aside ── */
.fl-01__aside {
background: var(--aside-bg);
width: 180px;
flex-shrink: 0;
padding: 20px 16px;
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 12px;
}
.fl-01__aside-title {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
}
.fl-01__aside-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px;
background: #fff;
border-radius: 8px;
border: 1px solid #fde68a;
}
.fl-01__aside-name {
font-size: 0.78rem;
font-weight: 600;
color: var(--ink);
}
.fl-01__aside-sub {
font-size: 0.7rem;
color: var(--muted);
}
.fl-01__aside-bar-wrap {
height: 4px;
background: #fde68a;
border-radius: 4px;
overflow: hidden;
margin-top: 2px;
}
.fl-01__aside-bar {
height: 100%;
background: var(--accent2);
border-radius: 4px;
animation: fl-01-bar-grow 1.2s ease both;
}
@keyframes fl-01-bar-grow {
from { width: 0; }
}
/* ── Footer ── */
.fl-01__footer {
background: var(--footer-bg);
color: rgba(255,255,255,0.5);
padding: 12px 24px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.72rem;
flex-shrink: 0;
}
.fl-01__footer-links {
display: flex;
gap: 16px;
list-style: none;
}
.fl-01__footer-links a {
color: rgba(255,255,255,0.4);
text-decoration: none;
}
.fl-01__footer-links a:hover { color: #fff; }
/* Label overlay */
.fl-01__zone-label {
display: inline-block;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
background: rgba(108,99,255,0.12);
color: var(--accent);
padding: 2px 7px;
border-radius: 4px;
margin-bottom: 6px;
}
@media (prefers-reduced-motion: reduce) {
.fl-01__aside-bar { animation: none; }
}
```
### 02. CSS Flexbox Card Grid Layout
**Type:** Pure CSS
**Description:** A responsive flex card grid with a featured wide card and uniform standard cards that wrap automatically — no media queries required for the basic reflow.
**HTML:**
```html
Flex Card Grid
flex-wrap row layout with featured & standard cards
All
Design
Dev
Motion
Featured
Design System
Flexbox Grid Patterns for Modern UIs
Master flex-wrap, flex-basis, and gap to build fluid, responsive card grids without a single media query. Featured items use flex: 2 for visual hierarchy.
New
CSS Layout
Auto Sizing with flex-basis
Use flex: 1 1 200px for columns that grow and wrap naturally.
Guide
Performance
Gap vs Margin in Flex Rows
The gap property skips edge gutters. No negative-margin hacks needed.
Pro
Advanced
Order & Reordering Flex Items
The order property reshuffles DOM order visually, ideal for mobile-first designs.
```
**CSS:**
```css
.fl-02, .fl-02 *, .fl-02 *::before, .fl-02 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.fl-02 ::selection { background: #ff6b6b; color: #fff; }
.fl-02 {
--ink: #1c1c1e;
--muted: #8e8e93;
--accent: #ff6b6b;
--accent2: #ffd93d;
--green: #6bcb77;
--blue: #4d96ff;
--surface: #0f0f13;
--card: #1c1c24;
--card-border: rgba(255,255,255,0.07);
font-family: 'DM Sans', sans-serif;
background: var(--surface);
padding: 28px;
min-height: 500px;
border-radius: 16px;
}
.fl-02__header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 6px;
}
.fl-02__title {
font-family: 'DM Serif Display', serif;
font-size: 1.5rem;
color: #fff;
}
.fl-02__subtitle {
font-size: 0.78rem;
color: var(--muted);
margin-bottom: 20px;
}
.fl-02__filter-tabs {
display: flex;
gap: 8px;
margin-bottom: 20px;
}
.fl-02__tab {
padding: 6px 14px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
background: var(--card);
color: var(--muted);
border: 1px solid var(--card-border);
transition: all 0.2s;
}
.fl-02__tab.is-active {
background: var(--accent);
color: #fff;
border-color: transparent;
}
/* Card grid: flex-wrap row */
.fl-02__grid {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
/* Featured: 2/3 width */
.fl-02__card {
background: var(--card);
border: 1px solid var(--card-border);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
flex: 1 1 calc(33% - 14px);
min-width: 160px;
transition: transform 0.2s, box-shadow 0.2s;
cursor: pointer;
}
.fl-02__card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.fl-02__card--featured {
flex: 2 1 calc(66% - 7px);
flex-direction: row;
}
.fl-02__card-thumb {
height: 120px;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.fl-02__card--featured .fl-02__card-thumb {
width: 200px;
height: auto;
}
.fl-02__card-thumb-bg {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.fl-02__card-thumb-shape {
width: 60px;
height: 60px;
border-radius: 50%;
opacity: 0.3;
animation: fl-02-pulse 3s ease-in-out infinite;
}
@keyframes fl-02-pulse {
0%,100% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(1.15); opacity: 0.5; }
}
.fl-02__card-badge {
position: absolute;
top: 10px;
left: 10px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 4px;
color: #fff;
}
.fl-02__card-body {
padding: 14px;
display: flex;
flex-direction: column;
flex: 1;
gap: 6px;
}
.fl-02__card-category {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.fl-02__card-name {
font-size: 0.92rem;
font-weight: 700;
color: #fff;
line-height: 1.3;
}
.fl-02__card--featured .fl-02__card-name { font-size: 1.1rem; }
.fl-02__card-desc {
font-size: 0.75rem;
color: var(--muted);
line-height: 1.6;
flex: 1;
}
.fl-02__card-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 4px;
padding-top: 10px;
border-top: 1px solid var(--card-border);
}
.fl-02__card-price {
font-size: 1rem;
font-weight: 700;
color: #fff;
}
.fl-02__card-cta {
font-size: 0.72rem;
font-weight: 700;
padding: 5px 12px;
border-radius: 6px;
color: #fff;
letter-spacing: 0.04em;
}
@media (prefers-reduced-motion: reduce) {
.fl-02__card-thumb-shape { animation: none; }
.fl-02__card { transition: none; }
}
```
### 03. CSS Flexbox Navigation Bar
**Type:** Pure CSS
**Description:** Three navigation bar variants — space-between spread, absolutely centered links with flex spacers, and a pill-style active-highlight nav — all built with flex alignment tricks.
**HTML:**
```html
space-between
centered links
pill nav
PillUI
- Home
- Features
- Docs
- Community
Get started →
Logo Left · Links Center
justify-content: space-between
flex: 1 spacers push links
Two invisible flex: 1 spacers flank the link list, centering it between logo and actions.
Absolute Center Trick
position: absolute
left: 50%; translateX(-50%)
Links use absolute positioning on the nav container to achieve pixel-perfect centering independent of logo width.
Pill Nav Pattern
border-radius: 40px
align-items: center
Wrapping the entire flex row in a pill border-radius creates a floating nav aesthetic popular in SaaS landing pages.
```
**CSS:**
```css
.fl-03, .fl-03 *, .fl-03 *::before, .fl-03 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.fl-03 ::selection { background: #00f5c4; color: #000; }
.fl-03 {
--bg: #0b0c10;
--surface: #13151a;
--border: rgba(255,255,255,0.08);
--accent: #00f5c4;
--accent2: #ff5c87;
--muted: rgba(255,255,255,0.45);
--text: #fff;
font-family: 'Syne', sans-serif;
background: var(--bg);
padding: 12px 0 20px;
min-height: 500px;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Variant row — wraps the variant tag + the nav itself.
Tag sits ABOVE the nav as a non-overlapping caption so it never
conflicts with the actions group on narrow viewports. */
.fl-03__nav-row {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 24px 0;
}
.fl-03__nav-tag {
align-self: flex-start;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
opacity: 0.75;
padding: 2px 8px;
background: rgba(0,245,196,0.08);
border: 1px solid rgba(0,245,196,0.2);
border-radius: 4px;
}
.fl-03__nav-tag--pink {
color: var(--accent2);
background: rgba(255,92,135,0.08);
border-color: rgba(255,92,135,0.2);
}
/* ── Navbar 1: Space-between classic ── */
.fl-03__nav {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0 16px;
height: 56px;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
/* Logo */
.fl-03__logo {
font-size: 1.1rem;
font-weight: 800;
color: var(--text);
letter-spacing: -0.03em;
flex-shrink: 0;
}
.fl-03__logo em { color: var(--accent); font-style: normal; }
/* Nav links group (center or left) */
.fl-03__links {
display: flex;
align-items: center;
gap: 2px;
list-style: none;
}
.fl-03__link {
padding: 7px 14px;
border-radius: 8px;
font-size: 0.8rem;
font-weight: 600;
color: var(--muted);
cursor: pointer;
position: relative;
transition: color 0.2s, background 0.2s;
}
.fl-03__link:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.fl-03__link.is-active { color: var(--text); }
.fl-03__link.is-active::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 2px;
background: var(--accent);
border-radius: 2px;
}
.fl-03__link-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--accent2);
color: #fff;
font-size: 0.6rem;
font-weight: 800;
margin-left: 4px;
}
/* Actions group */
.fl-03__actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.fl-03__btn {
padding: 6px 16px;
border-radius: 8px;
font-size: 0.78rem;
font-weight: 700;
font-family: 'Syne', sans-serif;
cursor: pointer;
border: none;
transition: opacity 0.2s, transform 0.15s;
}
.fl-03__btn:hover { opacity: 0.85; transform: translateY(-1px); }
.fl-03__btn--ghost {
background: transparent;
color: var(--muted);
border: 1px solid var(--border);
}
.fl-03__btn--ghost:hover { color: var(--text); }
.fl-03__btn--primary {
background: var(--accent);
color: #000;
}
.fl-03__avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #ff5c87, #6c63ff);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 800;
color: #fff;
cursor: pointer;
flex-shrink: 0;
}
.fl-03__icon-btn {
width: 34px;
height: 34px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--muted);
font-size: 0.9rem;
transition: background 0.2s, color 0.2s;
}
.fl-03__icon-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); }
/* Spacer utility */
.fl-03__spacer { flex: 1; }
/* ── Variant descriptor cards ── */
.fl-03__variants {
display: flex;
flex: 1;
padding: 20px 24px;
gap: 14px;
flex-wrap: wrap;
align-content: flex-start;
}
.fl-03__variant-card {
flex: 1 1 200px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.fl-03__variant-title {
font-size: 0.78rem;
font-weight: 700;
color: var(--accent);
letter-spacing: 0.05em;
}
.fl-03__variant-code {
font-family: 'Courier New', monospace;
font-size: 0.72rem;
color: rgba(255,255,255,0.5);
background: rgba(255,255,255,0.04);
padding: 6px 10px;
border-radius: 6px;
line-height: 1.7;
}
.fl-03__variant-desc {
font-size: 0.75rem;
color: var(--muted);
line-height: 1.6;
}
/* Nav variant 2: centered links */
.fl-03__nav--centered .fl-03__links {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* Nav variant 3: pill style */
.fl-03__nav--pill {
background: transparent;
height: auto;
}
.fl-03__pill-wrap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 40px;
padding: 6px 8px 6px 16px;
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-width: 0;
}
.fl-03__pill-logo {
font-size: 0.9rem;
font-weight: 800;
color: var(--text);
letter-spacing: -0.03em;
margin-right: 8px;
}
.fl-03__pill-logo em { color: var(--accent2); font-style: normal; }
.fl-03__pill-links {
display: flex;
align-items: center;
gap: 2px;
list-style: none;
flex: 1;
}
.fl-03__pill-link {
padding: 5px 12px;
border-radius: 20px;
font-size: 0.76rem;
font-weight: 600;
color: var(--muted);
cursor: pointer;
transition: all 0.2s;
}
.fl-03__pill-link:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.fl-03__pill-link.is-active { background: var(--accent2); color: #fff; }
.fl-03__pill-cta {
padding: 7px 16px;
border-radius: 20px;
background: var(--accent);
color: #000;
font-size: 0.76rem;
font-weight: 800;
cursor: pointer;
flex-shrink: 0;
transition: opacity 0.2s;
}
.fl-03__pill-cta:hover { opacity: 0.85; }
/* Responsive defenses: hide low-priority items so the actions group
fits and nothing overflows. The "centered links" trick relies on the
absolutely-positioned link group — on narrow viewports it would
collide with the logo, so re-anchor it inline. */
@media (max-width: 640px) {
.fl-03__nav-row { padding: 10px 12px 0; }
.fl-03__nav { padding: 0 10px; }
.fl-03__icon-btn,
.fl-03__avatar { display: none; }
.fl-03__link[data-priority="low"] { display: none; }
.fl-03__nav--centered .fl-03__links {
position: static;
transform: none;
}
.fl-03__pill-logo { font-size: 0.8rem; }
.fl-03__pill-link { padding: 5px 8px; font-size: 0.7rem; }
}
@media (max-width: 480px) {
.fl-03__btn--ghost { display: none; }
.fl-03__links .fl-03__link:nth-child(n+3) { display: none; }
.fl-03__pill-links .fl-03__pill-link:nth-child(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.fl-03__btn, .fl-03__icon-btn { transition: none; }
}
```
### 04. CSS Flexbox Masonry-Style Layout
**Type:** Pure CSS
**Description:** A multi-column masonry-style card waterfall using flex-direction: column and flex-wrap: wrap with a fixed container height — no JavaScript required.
**HTML:**
```html
CSS Flexbox Masonry-Style Layout
flex-direction: column + flex-wrap
Layout
Column-Wrap Masonry
Set flex-direction: column and flex-wrap: wrap with a fixed container height to make items flow into natural columns.
Sizing
Item Width
Items need a fixed width (e.g. 33%) — not flex shorthand — so each column stays the same width.
Container
The Height Constraint Controls Column Count
The container's fixed height determines when items wrap to a new column. Taller height = fewer columns. This is the key insight for this technique.
Gap
Gutters with gap
The gap shorthand sets row and column gutters uniformly without margin edge-cases.
Caveat
Reading Order Is Top-Down
Items flow column-first, not row-first. For strict row order, use CSS Grid instead.
Responsive
Dynamic Column Count via Container Height
Use a CSS custom property for container height and update it via JS or @media queries to control how many columns appear at each breakpoint.
```
**CSS:**
```css
.fl-04, .fl-04 *, .fl-04 *::before, .fl-04 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.fl-04 ::selection { background: #e040fb; color: #fff; }
.fl-04 {
--bg: #f4f0ff;
--surface: #fff;
--ink: #1a0a2e;
--muted: #8a7fa8;
--accent: #7c3aed;
--accent2: #e040fb;
--accent3: #06b6d4;
--accent4: #f59e0b;
--border: rgba(124,58,237,0.12);
font-family: 'Space Grotesk', sans-serif;
background: var(--bg);
padding: 24px;
border-radius: 16px;
min-height: 500px;
}
.fl-04__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.fl-04__title {
font-size: 1.2rem;
font-weight: 700;
color: var(--ink);
}
.fl-04__badge {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--accent);
color: #fff;
padding: 4px 10px;
border-radius: 20px;
}
/*
Flexbox masonry: flex-direction column + flex-wrap wrap
Height of container controls how many items per column.
Items flow top→bottom then start a new column.
Defensive overflow:hidden prevents excess columns from bleeding past
the parent width at narrow viewports — the masonry algorithm doesn't
shrink column count on its own, it just keeps packing.
*/
.fl-04__masonry {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 12px;
height: 760px; /* controls column count at desktop width */
overflow: hidden;
}
.fl-04__item {
width: calc(33.33% - 8px);
background: var(--surface);
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border);
break-inside: avoid;
display: flex;
flex-direction: column;
flex-shrink: 0;
transition: transform 0.2s, box-shadow 0.2s;
}
.fl-04__item:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(124,58,237,0.15);
}
.fl-04__item-visual {
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.fl-04__item-visual-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.fl-04__shape {
border-radius: 50%;
animation: fl-04-float 4s ease-in-out infinite;
}
@keyframes fl-04-float {
0%,100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-6px) rotate(8deg); }
}
.fl-04__item:nth-child(3n+2) .fl-04__shape { animation-delay: -1.5s; }
.fl-04__item:nth-child(3n+3) .fl-04__shape { animation-delay: -3s; }
.fl-04__item-body {
padding: 14px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.fl-04__item-cat {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.fl-04__item-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--ink);
line-height: 1.3;
}
.fl-04__item-text {
font-size: 0.77rem;
color: var(--muted);
line-height: 1.6;
}
.fl-04__item-tags {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-top: 4px;
}
.fl-04__tag {
font-size: 0.65rem;
font-weight: 600;
padding: 3px 8px;
border-radius: 20px;
background: rgba(124,58,237,0.1);
color: var(--accent);
}
/* Responsive masonry. The flex-direction:column masonry algorithm
doesn't auto-reduce column count when items get narrow — we have to
adjust the container height + item width per breakpoint or items
keep wrapping into more columns. */
@media (max-width: 760px) {
.fl-04__masonry { height: 1100px; }
.fl-04__item { width: calc(50% - 6px); }
}
@media (max-width: 520px) {
.fl-04__masonry {
flex-wrap: nowrap;
height: auto;
overflow: visible;
}
.fl-04__item { width: 100%; }
.fl-04__header { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.fl-04__shape { animation: none; }
.fl-04__item { transition: none; }
}
```
### 05. CSS Flexbox Sidebar Dashboard Layout
**Type:** Pure CSS
**Description:** A full app-shell dashboard with a fixed-width flex sidebar, collapsible nav groups, top header bar, stat cards row, and a main content area — all wired with flexbox.
**HTML:**
```html
Total Revenue
$48.2k
↑ 12.5% this month
Active Users
2,841
↑ 8.1% this week
Open Tasks
34
↓ 3 from yesterday
Recent Activity
View all
Deployment to production succeeded
2m ago
New member @alex joined the workspace
14m ago
Task "CSS Flexbox docs" moved to Review
1h ago
Build #142 failed — check logs
3h ago
```
**CSS:**
```css
.fl-05, .fl-05 *, .fl-05 *::before, .fl-05 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.fl-05 ::selection { background: #3b82f6; color: #fff; }
.fl-05 {
--bg: #0d1117;
--sidebar: #161b22;
--surface: #1c2128;
--border: #30363d;
--accent: #3b82f6;
--accent2: #8b5cf6;
--green: #22c55e;
--orange: #f97316;
--red: #ef4444;
--text: #e6edf3;
--muted: #7d8590;
font-family: 'Plus Jakarta Sans', sans-serif;
background: var(--bg);
border-radius: 16px;
overflow: hidden;
min-height: 500px;
}
/* Outer flex row: sidebar + main */
.fl-05__shell {
display: flex;
height: 500px;
}
/* ── Sidebar ── */
.fl-05__sidebar {
width: 220px;
flex-shrink: 0;
background: var(--sidebar);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
padding: 0;
}
.fl-05__sidebar-top {
padding: 20px 16px 12px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 10px;
}
.fl-05__workspace-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 800;
color: #fff;
flex-shrink: 0;
}
.fl-05__workspace-name {
font-size: 0.82rem;
font-weight: 700;
color: var(--text);
}
.fl-05__workspace-plan {
font-size: 0.65rem;
color: var(--accent);
font-weight: 600;
}
.fl-05__sidebar-nav {
flex: 1;
padding: 12px 8px;
display: flex;
flex-direction: column;
gap: 2px;
overflow-y: auto;
}
.fl-05__nav-section {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
padding: 10px 8px 4px;
}
.fl-05__nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
border-radius: 6px;
cursor: pointer;
font-size: 0.8rem;
font-weight: 500;
color: var(--muted);
transition: all 0.15s;
position: relative;
}
.fl-05__nav-item:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.fl-05__nav-item.is-active {
background: rgba(59,130,246,0.15);
color: var(--accent);
font-weight: 600;
}
.fl-05__nav-item.is-active::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 60%;
background: var(--accent);
border-radius: 0 2px 2px 0;
}
.fl-05__nav-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.fl-05__nav-count {
margin-left: auto;
font-size: 0.65rem;
font-weight: 700;
background: rgba(255,255,255,0.08);
padding: 1px 6px;
border-radius: 10px;
color: var(--muted);
}
.fl-05__nav-count.is-hot { background: var(--red); color: #fff; }
.fl-05__sidebar-bottom {
padding: 12px 8px;
border-top: 1px solid var(--border);
}
.fl-05__user-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s;
}
.fl-05__user-row:hover { background: rgba(255,255,255,0.06); }
.fl-05__user-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #f97316, #ef4444);
font-size: 0.7rem;
font-weight: 800;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fl-05__user-name {
font-size: 0.78rem;
font-weight: 600;
color: var(--text);
}
.fl-05__user-role {
font-size: 0.65rem;
color: var(--muted);
}
/* ── Main panel ── */
.fl-05__main {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.fl-05__topbar {
height: 52px;
background: var(--sidebar);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
padding: 0 20px;
gap: 12px;
flex-shrink: 0;
}
.fl-05__topbar-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--text);
flex: 1;
}
.fl-05__topbar-action {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
}
.fl-05__topbar-action--primary {
background: var(--accent);
color: #fff;
}
.fl-05__topbar-action--ghost {
background: rgba(255,255,255,0.06);
color: var(--muted);
border: 1px solid var(--border);
}
.fl-05__content {
flex: 1;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 16px;
}
/* Stats row */
.fl-05__stats {
display: flex;
gap: 12px;
}
.fl-05__stat {
flex: 1;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px;
}
.fl-05__stat-label {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 8px;
}
.fl-05__stat-value {
font-size: 1.4rem;
font-weight: 800;
color: var(--text);
}
.fl-05__stat-delta {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.72rem;
font-weight: 600;
margin-top: 4px;
}
.fl-05__stat-delta.up { color: var(--green); }
.fl-05__stat-delta.down { color: var(--red); }
/* Activity list */
.fl-05__activity {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
.fl-05__activity-head {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
font-size: 0.8rem;
font-weight: 700;
color: var(--text);
display: flex;
justify-content: space-between;
align-items: center;
}
.fl-05__activity-view {
font-size: 0.7rem;
color: var(--accent);
font-weight: 600;
cursor: pointer;
}
.fl-05__activity-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
border-bottom: 1px solid rgba(48,54,61,0.5);
}
.fl-05__activity-row:last-child { border-bottom: none; }
.fl-05__activity-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.fl-05__activity-text {
flex: 1;
font-size: 0.78rem;
color: var(--text);
}
.fl-05__activity-time {
font-size: 0.68rem;
color: var(--muted);
flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
.fl-05__nav-item, .fl-05__user-row { transition: none; }
}
```
### 06. CSS Flexbox Responsive Product Cards
**Type:** Pure CSS
**Description:** An e-commerce product card grid using flex: 1 1 180px with a max-width cap — cards reflow from four columns to one with no JavaScript or media queries.
**HTML:**
```html
Product Collection
Sort: Popular ▾
flex: 1 1 180px — naturally wraps to 4, 3, 2, or 1 column at any width
Sale
♡
Gear
Thermal Flask Pro
★★
★★
★
New
♡
Audio
Studio Buds X
★★
★★
★
Eco
♡
Home
Bamboo Notebook Set
★★
★★
★
♡
Tech
Wireless Charger Pad
★★
★★
★
```
**CSS:**
```css
.fl-06, .fl-06 *, .fl-06 *::before, .fl-06 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.fl-06 ::selection { background: #fb923c; color: #fff; }
.fl-06 {
--bg: #fff8f4;
--surface: #fff;
--ink: #1a0a00;
--muted: #9a7a65;
--accent: #ea580c;
--accent2: #fb923c;
--border: rgba(234,88,12,0.12);
--star: #fbbf24;
font-family: 'Outfit', sans-serif;
background: var(--bg);
padding: 24px;
border-radius: 16px;
min-height: 500px;
}
.fl-06__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.fl-06__title {
font-size: 1.2rem;
font-weight: 800;
color: var(--ink);
}
.fl-06__sort {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
font-weight: 600;
color: var(--muted);
cursor: pointer;
}
.fl-06__subtitle {
font-size: 0.78rem;
color: var(--muted);
margin-bottom: 18px;
}
/* Product grid: flex-wrap + flex-basis for fluid columns */
.fl-06__grid {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.fl-06__card {
flex: 1 1 180px; /* grow, shrink, min-basis = fluid cols */
max-width: calc(25% - 11px); /* max 4 per row */
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.fl-06__card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 40px rgba(234,88,12,0.12);
}
.fl-06__thumb {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.fl-06__thumb-bg {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.fl-06__product-shape {
transition: transform 0.3s;
}
.fl-06__card:hover .fl-06__product-shape {
transform: scale(1.08) rotate(3deg);
}
.fl-06__badge {
position: absolute;
top: 10px;
left: 10px;
font-size: 0.62rem;
font-weight: 800;
padding: 3px 8px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.fl-06__wishlist {
position: absolute;
top: 10px;
right: 10px;
width: 28px;
height: 28px;
background: rgba(255,255,255,0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
cursor: pointer;
}
.fl-06__body {
padding: 12px;
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.fl-06__cat {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.fl-06__name {
font-size: 0.88rem;
font-weight: 700;
color: var(--ink);
line-height: 1.3;
}
.fl-06__stars {
display: flex;
align-items: center;
gap: 2px;
font-size: 0.7rem;
}
.fl-06__star { color: var(--star); }
.fl-06__rating-count {
font-size: 0.65rem;
color: var(--muted);
margin-left: 4px;
}
.fl-06__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.fl-06__price {
display: flex;
align-items: baseline;
gap: 5px;
}
.fl-06__price-now {
font-size: 1rem;
font-weight: 800;
color: var(--accent);
}
.fl-06__price-was {
font-size: 0.75rem;
text-decoration: line-through;
color: var(--muted);
}
.fl-06__add-btn {
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: background 0.2s, transform 0.15s;
flex-shrink: 0;
}
.fl-06__add-btn:hover { background: #c2410c; transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) {
.fl-06__card, .fl-06__product-shape, .fl-06__add-btn { transition: none; }
}
```
### 07. CSS Flexbox Pricing Table Layout
**Type:** Pure CSS
**Description:** A three-tier pricing table with equal-height columns, a scaled featured plan, and flex-driven feature lists — all columns stretch to identical height without JavaScript.
**HTML:**
```html
Pricing
Simple, Transparent Plans
Monthly
Annual
Save 20%
Starter
Free
Perfect for side projects and learning CSS flexbox layouts.
$
0
/mo
No credit card needed
✓3 projects
✓Basic flex layouts
✓Community support
–Team collaboration
–Priority export
Most Popular
Pro
For professionals who need advanced layouts and team features.
$
29
/mo
Billed $279/yr — save $69
✓Unlimited projects
✓All flex layout patterns
✓Priority support
✓Team collaboration (5 seats)
–White-label export
Enterprise
Scale
For large teams building complex flexbox design systems at scale.
$
99
/mo
Billed $950/yr — save $238
✓Unlimited everything
✓Custom flex components
✓Dedicated support
✓Unlimited team seats
✓White-label export
```
**CSS:**
```css
.fl-07, .fl-07 *, .fl-07 *::before, .fl-07 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.fl-07 ::selection { background: #0ea5e9; color: #fff; }
.fl-07 {
--bg: #f0f9ff;
--surface: #fff;
--ink: #0c1a2e;
--muted: #64748b;
--accent: #0ea5e9;
--accent-dark: #0284c7;
--featured: #0f172a;
--border: rgba(14,165,233,0.15);
--check: #22c55e;
font-family: 'Nunito', sans-serif;
background: var(--bg);
padding: 28px 20px;
border-radius: 16px;
min-height: 500px;
}
.fl-07__head {
text-align: center;
margin-bottom: 24px;
}
.fl-07__eyebrow {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 6px;
}
.fl-07__title {
font-size: 1.4rem;
font-weight: 900;
color: var(--ink);
margin-bottom: 6px;
}
.fl-07__toggle {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(14,165,233,0.08);
border-radius: 20px;
padding: 4px 8px;
font-size: 0.75rem;
font-weight: 700;
color: var(--muted);
cursor: pointer;
}
.fl-07__toggle-pill {
background: var(--accent);
color: #fff;
padding: 3px 10px;
border-radius: 12px;
font-size: 0.72rem;
}
.fl-07__save-badge {
background: #dcfce7;
color: #16a34a;
font-size: 0.65rem;
font-weight: 800;
padding: 2px 6px;
border-radius: 6px;
}
/* Pricing row: flex with stretch alignment so cards equal height */
.fl-07__plans {
display: flex;
gap: 16px;
align-items: stretch;
}
.fl-07__plan {
flex: 1;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px 20px;
display: flex;
flex-direction: column;
gap: 0;
transition: box-shadow 0.2s;
}
.fl-07__plan:hover { box-shadow: 0 10px 40px rgba(14,165,233,0.1); }
.fl-07__plan--featured {
background: var(--featured);
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent), 0 20px 60px rgba(14,165,233,0.2);
position: relative;
transform: scale(1.03);
z-index: 1;
}
.fl-07__plan-tag {
display: inline-block;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 4px;
margin-bottom: 12px;
align-self: flex-start;
}
.fl-07__plan--featured .fl-07__plan-tag {
background: var(--accent);
color: #fff;
}
.fl-07__plan:not(.fl-07__plan--featured) .fl-07__plan-tag {
background: rgba(14,165,233,0.1);
color: var(--accent);
}
.fl-07__plan-name {
font-size: 1rem;
font-weight: 900;
color: var(--ink);
margin-bottom: 4px;
}
.fl-07__plan--featured .fl-07__plan-name { color: #fff; }
.fl-07__plan-desc {
font-size: 0.75rem;
color: var(--muted);
margin-bottom: 16px;
line-height: 1.5;
}
.fl-07__plan--featured .fl-07__plan-desc { color: rgba(255,255,255,0.55); }
.fl-07__price-row {
display: flex;
align-items: baseline;
gap: 2px;
margin-bottom: 4px;
}
.fl-07__price-currency {
font-size: 1.1rem;
font-weight: 800;
color: var(--ink);
align-self: flex-start;
padding-top: 4px;
}
.fl-07__plan--featured .fl-07__price-currency { color: #fff; }
.fl-07__price-value {
font-size: 2.4rem;
font-weight: 900;
color: var(--ink);
line-height: 1;
}
.fl-07__plan--featured .fl-07__price-value { color: #fff; }
.fl-07__price-period {
font-size: 0.78rem;
color: var(--muted);
padding-bottom: 4px;
}
.fl-07__plan--featured .fl-07__price-period { color: rgba(255,255,255,0.45); }
.fl-07__price-annual {
font-size: 0.7rem;
color: var(--muted);
margin-bottom: 20px;
}
.fl-07__plan--featured .fl-07__price-annual { color: rgba(255,255,255,0.4); }
.fl-07__cta {
padding: 10px;
border-radius: 10px;
font-family: 'Nunito', sans-serif;
font-size: 0.85rem;
font-weight: 800;
cursor: pointer;
text-align: center;
margin-bottom: 20px;
transition: all 0.2s;
border: none;
}
.fl-07__cta--outline {
background: transparent;
border: 2px solid var(--border);
color: var(--ink);
}
.fl-07__cta--outline:hover { border-color: var(--accent); color: var(--accent); }
.fl-07__cta--primary {
background: var(--accent);
color: #fff;
}
.fl-07__cta--primary:hover { background: var(--accent-dark); }
.fl-07__divider {
height: 1px;
background: var(--border);
margin-bottom: 16px;
}
.fl-07__plan--featured .fl-07__divider { background: rgba(255,255,255,0.1); }
.fl-07__features {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.fl-07__feature {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.78rem;
color: var(--muted);
line-height: 1.4;
}
.fl-07__plan--featured .fl-07__feature { color: rgba(255,255,255,0.65); }
.fl-07__feature-check {
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(34,197,94,0.15);
color: var(--check);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6rem;
font-weight: 800;
flex-shrink: 0;
margin-top: 1px;
}
.fl-07__feature-check--muted {
background: rgba(100,116,139,0.1);
color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
.fl-07__plan, .fl-07__cta { transition: none; }
}
```
### 08. CSS Flexbox Magazine Article Layout
**Type:** Pure CSS
**Description:** A classic editorial magazine layout with a two-thirds article column, one-third sidebar, drop cap, pull quotes, and a multi-column body text — built with flex and CSS columns.
**HTML:**
```html
FlexMag
June 2025 · Issue 47
Cover Story
The Flexbox Layout Technique That Changed Everything
How a single CSS property — flex — replaced decades of float hacks, table tricks, and inline-block nightmares to give designers true layout superpowers.
flex
Illustration: FlexMag / CSS Visual Studio
Before flexbox arrived in browsers, building a simple three-column layout with equal-height columns was a multi-hack ordeal — you needed faux backgrounds, table-cell hacks, or JavaScript height equalisers. The magazine layout you are reading now is achieved with two flex containers, two lines of alignment CSS, and nothing else.
The key insight of flexbox is that it separates the axis of layout from the axis of alignment. The main axis — controlled by flex-direction — decides how items are placed. The cross axis — governed by align-items and align-self — decides how they stretch or anchor within their row or column.
```
**CSS:**
```css
.fl-08, .fl-08 *, .fl-08 *::before, .fl-08 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.fl-08 ::selection { background: #e11d48; color: #fff; }
.fl-08 {
--bg: #fffdf9;
--surface: #fff;
--ink: #1a1008;
--muted: #78716c;
--accent: #e11d48;
--accent2: #d97706;
--border: #e8e0d5;
font-family: 'DM Sans', sans-serif;
background: var(--bg);
padding: 0;
border-radius: 16px;
overflow: hidden;
min-height: 500px;
border: 1px solid var(--border);
}
/* Magazine masthead */
.fl-08__masthead {
background: var(--ink);
padding: 14px 28px;
display: flex;
align-items: center;
justify-content: space-between;
}
.fl-08__masthead-name {
font-family: 'Fraunces', serif;
font-size: 1.4rem;
font-weight: 900;
color: #fff;
letter-spacing: -0.02em;
}
.fl-08__masthead-name em { color: var(--accent); font-style: normal; }
.fl-08__masthead-date {
font-size: 0.72rem;
color: rgba(255,255,255,0.45);
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Category banner */
.fl-08__category-bar {
display: flex;
align-items: center;
gap: 0;
border-bottom: 1px solid var(--border);
padding: 0 28px;
overflow-x: auto;
}
.fl-08__cat-tab {
padding: 8px 14px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.fl-08__cat-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.fl-08__cat-tab:hover { color: var(--ink); }
/* Main layout: flex row — body col (2/3) + sidebar (1/3) */
.fl-08__body {
display: flex;
min-height: 0;
}
/* Left body: flex column */
.fl-08__article-col {
flex: 2;
min-width: 0;
padding: 28px;
display: flex;
flex-direction: column;
gap: 16px;
border-right: 1px solid var(--border);
}
.fl-08__kicker {
display: flex;
align-items: center;
gap: 10px;
}
.fl-08__kicker-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
}
.fl-08__kicker-line {
flex: 1;
height: 1px;
background: var(--border);
}
.fl-08__headline {
font-family: 'Fraunces', serif;
font-size: 1.7rem;
font-weight: 900;
color: var(--ink);
line-height: 1.15;
letter-spacing: -0.02em;
}
.fl-08__headline em { color: var(--accent); font-style: italic; }
.fl-08__standfirst {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 0.95rem;
color: var(--muted);
line-height: 1.6;
border-left: 3px solid var(--accent);
padding-left: 14px;
}
.fl-08__byline {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.fl-08__author-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #e11d48, #9f1239);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 800;
color: #fff;
flex-shrink: 0;
}
.fl-08__author-name { font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.fl-08__author-role { font-size: 0.68rem; color: var(--muted); }
.fl-08__meta {
margin-left: auto;
font-size: 0.68rem;
color: var(--muted);
text-align: right;
}
/* Hero image placeholder */
.fl-08__hero {
border-radius: 10px;
overflow: hidden;
height: 130px;
background: linear-gradient(135deg, #1a0510, #5a0f2e);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.fl-08__hero-text {
font-family: 'Fraunces', serif;
font-size: 2rem;
font-weight: 900;
font-style: italic;
color: rgba(255,255,255,0.12);
letter-spacing: -0.04em;
user-select: none;
}
.fl-08__hero-label {
position: absolute;
bottom: 10px;
left: 10px;
font-size: 0.62rem;
color: rgba(255,255,255,0.4);
font-weight: 600;
}
/* Drop cap + body text */
.fl-08__body-text {
font-size: 0.82rem;
color: var(--muted);
line-height: 1.8;
columns: 2;
column-gap: 20px;
}
.fl-08__drop-cap::first-letter {
font-family: 'Fraunces', serif;
font-size: 3.2em;
font-weight: 900;
color: var(--accent);
float: left;
line-height: 0.75;
margin: 0.08em 0.06em 0 0;
}
/* Right sidebar */
.fl-08__sidebar {
flex: 1;
min-width: 0;
padding: 24px 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
.fl-08__sidebar-section-title {
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent2);
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.fl-08__related-item {
display: flex;
gap: 10px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
cursor: pointer;
}
.fl-08__related-item:last-child { border-bottom: none; }
.fl-08__related-thumb {
width: 50px;
height: 50px;
border-radius: 6px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.fl-08__related-title {
font-size: 0.78rem;
font-weight: 600;
color: var(--ink);
line-height: 1.3;
margin-bottom: 4px;
}
.fl-08__related-meta {
font-size: 0.65rem;
color: var(--muted);
}
.fl-08__tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.fl-08__tag {
font-size: 0.68rem;
font-weight: 600;
padding: 4px 10px;
border-radius: 4px;
background: rgba(225,29,72,0.06);
color: var(--accent);
cursor: pointer;
transition: background 0.2s;
}
.fl-08__tag:hover { background: rgba(225,29,72,0.15); }
@media (prefers-reduced-motion: reduce) {
.fl-08__tag, .fl-08__cat-tab { transition: none; }
}
```
### 09. CSS Flexbox Sticky Footer Layout
**Type:** Pure CSS
**Description:** The definitive flexbox sticky footer pattern — a column flex wrapper with min-height: 100% and flex: 1 on the main content pushes the footer to the bottom on any page length.
**HTML:**
```html
StickyFoot
- Home
- Docs
- Examples
- Blog
Header flex-shrink: 0
Main Content flex: 1
CSS Technique
Sticky Footer with Flexbox
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main { flex: 1; } /* grows */
.footer { flex-shrink: 0; } /* fixed */
Footer sticks to the bottom even when content is short — no JS or absolute positioning needed.
flex: 1 on main is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0, making it absorb all remaining vertical space.
```
**CSS:**
```css
.fl-09, .fl-09 *, .fl-09 *::before, .fl-09 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.fl-09 ::selection { background: #0891b2; color: #fff; }
.fl-09 {
--bg: #f0f4f8;
--surface: #fff;
--ink: #0f2139;
--muted: #64748b;
--accent: #0891b2;
--accent2: #0e7490;
--footer-bg: #0f2139;
--border: #dde4ec;
--green: #059669;
font-family: 'Manrope', sans-serif;
background: var(--bg);
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--border);
}
/*
STICKY FOOTER TECHNIQUE:
Outer wrapper = flex column, min-height set.
Main content = flex: 1 (grows to fill space).
Footer = flex-shrink: 0 (never collapses).
This pushes the footer to the bottom even when content is short.
*/
.fl-09__page {
display: flex;
flex-direction: column;
min-height: 500px;
}
/* ── Header ── */
.fl-09__header {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 0 28px;
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.fl-09__logo {
font-size: 1rem;
font-weight: 800;
color: var(--ink);
display: flex;
align-items: center;
gap: 8px;
}
.fl-09__logo-icon {
width: 28px;
height: 28px;
background: var(--accent);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
color: #fff;
}
.fl-09__header-nav {
display: flex;
gap: 4px;
list-style: none;
}
.fl-09__header-link {
padding: 6px 12px;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 600;
color: var(--muted);
cursor: pointer;
transition: all 0.15s;
}
.fl-09__header-link:hover { color: var(--ink); background: var(--bg); }
.fl-09__header-link.is-active { color: var(--accent); }
/* ── Main content (grows with flex: 1) ── */
.fl-09__main {
flex: 1; /* ← this is the sticky footer magic */
padding: 36px 28px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
}
/* Technique explainer card */
.fl-09__explainer {
max-width: 560px;
width: 100%;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
}
.fl-09__explainer-header {
background: linear-gradient(135deg, #0e4f6e, #0891b2);
padding: 20px 24px;
}
.fl-09__explainer-tag {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
margin-bottom: 6px;
}
.fl-09__explainer-title {
font-size: 1.1rem;
font-weight: 800;
color: #fff;
}
.fl-09__explainer-body {
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 14px;
}
.fl-09__code-block {
background: #0f2139;
border-radius: 8px;
padding: 14px 16px;
font-family: 'Courier New', monospace;
font-size: 0.75rem;
line-height: 1.8;
color: #94a3b8;
}
.fl-09__code-comment { color: #475569; }
.fl-09__code-prop { color: #7dd3fc; }
.fl-09__code-val { color: #86efac; }
.fl-09__code-selector { color: #c084fc; }
.fl-09__explainer-desc {
font-size: 0.8rem;
color: var(--muted);
line-height: 1.7;
}
.fl-09__explainer-check {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.78rem;
color: var(--ink);
font-weight: 500;
}
.fl-09__check-icon {
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(5,150,105,0.12);
color: var(--green);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.62rem;
font-weight: 800;
flex-shrink: 0;
margin-top: 1px;
}
/* Diagram showing layout zones */
.fl-09__diagram {
max-width: 560px;
width: 100%;
display: flex;
flex-direction: column;
gap: 4px;
}
.fl-09__zone {
border-radius: 8px;
padding: 10px 14px;
font-size: 0.72rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: space-between;
}
.fl-09__zone-code {
font-family: 'Courier New', monospace;
font-size: 0.68rem;
opacity: 0.7;
}
.fl-09__zone--header { background: rgba(8,145,178,0.15); color: var(--accent2); }
.fl-09__zone--main { background: rgba(8,145,178,0.06); color: var(--muted); border: 1px dashed rgba(8,145,178,0.2); flex: 1; min-height: 36px; }
.fl-09__zone--footer { background: rgba(15,33,57,0.08); color: var(--ink); }
/* ── Footer (flex-shrink: 0) ── */
.fl-09__footer {
background: var(--footer-bg);
padding: 24px 28px;
flex-shrink: 0; /* ← never shrinks; stays at bottom */
}
.fl-09__footer-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
margin-bottom: 20px;
}
.fl-09__footer-brand {
font-size: 0.92rem;
font-weight: 800;
color: #fff;
margin-bottom: 6px;
}
.fl-09__footer-tagline {
font-size: 0.72rem;
color: rgba(255,255,255,0.35);
line-height: 1.5;
}
.fl-09__footer-col-title {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
margin-bottom: 8px;
}
.fl-09__footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.fl-09__footer-links li {
font-size: 0.76rem;
color: rgba(255,255,255,0.5);
cursor: pointer;
transition: color 0.15s;
}
.fl-09__footer-links li:hover { color: #fff; }
.fl-09__footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.08);
font-size: 0.7rem;
color: rgba(255,255,255,0.3);
}
.fl-09__footer-socials {
display: flex;
gap: 8px;
}
.fl-09__social-btn {
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(255,255,255,0.06);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
cursor: pointer;
transition: background 0.15s;
}
.fl-09__social-btn:hover { background: rgba(255,255,255,0.12); }
@media (prefers-reduced-motion: reduce) {
.fl-09__header-link, .fl-09__footer-links li,
.fl-09__social-btn { transition: none; }
}
```
### 10. CSS Flexbox Centered Hero Section
**Type:** Pure CSS
**Description:** A full-bleed hero section with perfect flex centering, animated gradient orbs, a headline group, subtext, and a CTA button row — demonstrating multi-axis flex alignment.
**HTML:**
```html
CSS Flexbox · Perfect Centering
Center anything with
two lines of CSS
The oldest CSS challenge — centering an element both horizontally and vertically — solved at last. display: flex + align-items: center + justify-content: center.
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
```
**CSS:**
```css
.fl-10, .fl-10 *, .fl-10 *::before, .fl-10 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.fl-10 ::selection { background: #a855f7; color: #fff; }
.fl-10 {
--bg: #08000f;
--accent: #a855f7;
--accent2: #38bdf8;
--accent3: #f472b6;
--text: #fff;
--muted: rgba(255,255,255,0.5);
font-family: 'Bricolage Grotesque', sans-serif;
background: var(--bg);
min-height: 500px;
border-radius: 16px;
overflow: hidden;
position: relative;
}
/* Background glow orbs */
.fl-10__bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
animation: fl-10-drift 8s ease-in-out infinite;
}
.fl-10__bg-orb--1 {
width: 300px; height: 300px;
background: rgba(168,85,247,0.25);
top: -80px; left: 30%;
animation-delay: 0s;
}
.fl-10__bg-orb--2 {
width: 250px; height: 250px;
background: rgba(56,189,248,0.15);
bottom: -60px; right: 20%;
animation-delay: -4s;
}
.fl-10__bg-orb--3 {
width: 200px; height: 200px;
background: rgba(244,114,182,0.15);
top: 40%; left: 5%;
animation-delay: -2s;
}
@keyframes fl-10-drift {
0%,100% { transform: translate(0,0) scale(1); }
33% { transform: translate(20px,-15px) scale(1.05); }
66% { transform: translate(-10px,10px) scale(0.98); }
}
/* Grid-noise texture via SVG */
.fl-10__noise {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
pointer-events: none;
opacity: 0.5;
}
/* ── THE FLEX CENTERING PATTERN ── */
.fl-10__hero {
display: flex;
flex-direction: column;
align-items: center; /* horizontal center */
justify-content: center; /* vertical center */
min-height: 500px;
padding: 48px 24px;
position: relative;
z-index: 1;
text-align: center;
gap: 24px;
}
.fl-10__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(168,85,247,0.12);
border: 1px solid rgba(168,85,247,0.25);
border-radius: 20px;
padding: 5px 14px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--accent);
}
.fl-10__eyebrow-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
animation: fl-10-pulse-dot 1.5s ease-in-out infinite;
}
@keyframes fl-10-pulse-dot {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
.fl-10__headline {
font-size: clamp(1.8rem, 5vw, 3.2rem);
font-weight: 800;
color: var(--text);
line-height: 1.1;
letter-spacing: -0.03em;
max-width: 600px;
}
.fl-10__headline .fl-10__hl-italic {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.fl-10__headline .fl-10__hl-gradient {
background: linear-gradient(90deg, var(--accent2), var(--accent3));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.fl-10__subhead {
font-size: 0.92rem;
color: var(--muted);
line-height: 1.7;
max-width: 440px;
font-weight: 400;
}
.fl-10__ctas {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.fl-10__cta {
padding: 11px 24px;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
font-family: 'Bricolage Grotesque', sans-serif;
border: none;
transition: transform 0.2s, box-shadow 0.2s;
}
.fl-10__cta:hover { transform: translateY(-2px); }
.fl-10__cta--primary {
background: var(--accent);
color: #fff;
box-shadow: 0 0 30px rgba(168,85,247,0.3);
}
.fl-10__cta--primary:hover { box-shadow: 0 6px 40px rgba(168,85,247,0.5); }
.fl-10__cta--ghost {
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.7);
border: 1px solid rgba(255,255,255,0.1);
}
.fl-10__cta--ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }
.fl-10__social-proof {
display: flex;
align-items: center;
gap: 12px;
}
.fl-10__avatars {
display: flex;
}
.fl-10__avatar {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid var(--bg);
margin-left: -8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6rem;
font-weight: 800;
color: #fff;
}
.fl-10__avatars .fl-10__avatar:first-child { margin-left: 0; }
.fl-10__proof-text {
font-size: 0.72rem;
color: var(--muted);
font-weight: 500;
}
.fl-10__proof-text strong { color: var(--text); }
/* Flex annotation overlay */
.fl-10__annotation {
position: absolute;
bottom: 14px;
right: 16px;
font-size: 0.62rem;
font-family: 'Courier New', monospace;
color: rgba(168,85,247,0.4);
text-align: right;
line-height: 1.8;
pointer-events: none;
}
/* Responsive stars decoration */
.fl-10__stars {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.fl-10__star {
position: absolute;
width: 2px;
height: 2px;
border-radius: 50%;
background: rgba(255,255,255,0.6);
animation: fl-10-twinkle 3s ease-in-out infinite;
}
@keyframes fl-10-twinkle {
0%,100% { opacity: 0.6; }
50% { opacity: 0.1; }
}
@media (prefers-reduced-motion: reduce) {
.fl-10__bg-orb, .fl-10__eyebrow-dot, .fl-10__star { animation: none; }
.fl-10__cta { transition: none; }
}
```
### 11. CSS Flexbox Timeline Layout
**Type:** Pure CSS
**Description:** A vertical event timeline where each entry is a flex row — a narrow connector column with a dot and line, and an expanding content card — creating a clean left-rail chronology.
**HTML:**
```html
Flexbox Pattern
CSS Flexbox Timeline Layout
Each row is a flex container: connector column + content area
🚀
Project Kickoff
Initial CSS Flexbox design system established. Team aligned on layout patterns and naming conventions for all 15 demo types.
Team onboarded
8 contributors
8 devs
⚡
v1.0 Layout System Released
First stable release of the flexbox layout library. Included holy grail, sidebar dashboard, and card grid patterns.
Components shipped
npm install flexlayout
24 patterns
Today
✓
Flexbox Gallery Collection
15 production-grade CSS Flexbox demos published. Covers every major layout pattern from holy grail to kanban board.
Demos live
All SEO-targeted
15 demos
→
Grid + Subgrid Expansion
Next phase: 15 CSS Grid layout demos with subgrid, named areas, and masonry support.
```
**CSS:**
```css
.fl-11, .fl-11 *, .fl-11 *::before, .fl-11 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.fl-11 ::selection { background: #059669; color: #fff; }
.fl-11 {
--bg: #fafdf9;
--surface: #fff;
--ink: #0a1f13;
--muted: #6b7c74;
--accent: #059669;
--accent-light: #d1fae5;
--accent2: #0284c7;
--accent3: #d97706;
--accent4: #7c3aed;
--timeline-line: #d1fae5;
--border: #e2f0ea;
font-family: 'IBM Plex Sans', sans-serif;
background: var(--bg);
padding: 28px;
border-radius: 16px;
min-height: 500px;
}
.fl-11__header {
margin-bottom: 28px;
}
.fl-11__eyebrow {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 4px;
}
.fl-11__title {
font-size: 1.2rem;
font-weight: 700;
color: var(--ink);
}
.fl-11__sub {
font-size: 0.78rem;
color: var(--muted);
margin-top: 4px;
}
/*
TIMELINE TECHNIQUE:
Each event = flex row with:
- connector column (dot + line): flex-shrink: 0
- content card: flex: 1
The vertical line is a ::before pseudo on the connector
that grows to fill the item height.
*/
.fl-11__timeline {
display: flex;
flex-direction: column;
gap: 0;
}
.fl-11__event {
display: flex;
gap: 16px;
position: relative;
}
/* Connector column */
.fl-11__connector {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
width: 32px;
}
.fl-11__dot {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
flex-shrink: 0;
z-index: 1;
border: 3px solid var(--bg);
transition: transform 0.2s;
}
.fl-11__event:hover .fl-11__dot { transform: scale(1.15); }
.fl-11__line {
flex: 1;
width: 2px;
background: var(--timeline-line);
margin-top: 4px;
margin-bottom: 0;
min-height: 16px;
}
.fl-11__event:last-child .fl-11__line { display: none; }
/* Content */
.fl-11__content {
flex: 1;
padding-bottom: 24px;
}
.fl-11__event-meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.fl-11__date {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.fl-11__event-tag {
font-size: 0.62rem;
font-weight: 700;
padding: 2px 7px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.fl-11__event-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--ink);
margin-bottom: 4px;
}
.fl-11__event-desc {
font-size: 0.78rem;
color: var(--muted);
line-height: 1.6;
margin-bottom: 8px;
}
.fl-11__event-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
}
.fl-11__card-row {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.78rem;
}
.fl-11__card-icon {
width: 28px;
height: 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
flex-shrink: 0;
}
.fl-11__card-text { color: var(--ink); font-weight: 500; flex: 1; }
.fl-11__card-sub { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
.fl-11__card-value { font-weight: 700; color: var(--accent); font-size: 0.82rem; }
/* Today marker */
.fl-11__today {
display: flex;
align-items: center;
gap: 10px;
margin: 4px 0 0 0;
}
.fl-11__today-line {
flex: 1;
height: 1px;
background: repeating-linear-gradient(90deg, var(--accent) 0, var(--accent) 5px, transparent 5px, transparent 10px);
}
.fl-11__today-label {
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
background: var(--accent-light);
padding: 3px 8px;
border-radius: 4px;
flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
.fl-11__dot { transition: none; }
}
```
### 12. CSS Flexbox Chat Interface Layout
**Type:** Pure CSS
**Description:** A messaging UI with a flex-row shell (contacts sidebar + message pane), scrollable message thread with pinned input bar, and live send interaction — all flex-driven.
**HTML:**
```html
FlexChat
🔍 Search...
AI
Alice Indigo
flex: 1 is so clean
BK
Bob Kira
checked the PR
CW
CSS Weekly
New issue is out
AI
Alice Indigo
● Online
📞
🎥
⋯
```
**CSS:**
```css
.fl-12, .fl-12 *, .fl-12 *::before, .fl-12 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.fl-12 ::selection { background: #6366f1; color: #fff; }
.fl-12 {
--bg: #18181b;
--sidebar: #111113;
--surface: #1c1c1f;
--border: rgba(255,255,255,0.07);
--accent: #6366f1;
--accent2: #f43f5e;
--text: #e4e4e7;
--muted: #71717a;
--bubble-in: #27272a;
--bubble-out: #4f46e5;
font-family: 'Inter', sans-serif;
background: var(--bg);
border-radius: 16px;
overflow: hidden;
min-height: 500px;
}
/* Outer flex row: chat list + message pane */
.fl-12__shell {
display: flex;
height: 500px;
}
/* ── Contacts sidebar ── */
.fl-12__contacts {
width: 220px;
flex-shrink: 0;
background: var(--sidebar);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
}
.fl-12__contacts-top {
padding: 14px 14px 8px;
border-bottom: 1px solid var(--border);
}
.fl-12__app-name {
font-size: 0.82rem;
font-weight: 700;
color: var(--text);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.fl-12__app-icon {
width: 22px;
height: 22px;
border-radius: 6px;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
}
.fl-12__search {
background: rgba(255,255,255,0.06);
border: 1px solid var(--border);
border-radius: 8px;
padding: 6px 10px;
font-size: 0.75rem;
color: var(--muted);
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.fl-12__contacts-list {
flex: 1;
overflow-y: auto;
padding: 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.fl-12__contact {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s;
}
.fl-12__contact:hover { background: rgba(255,255,255,0.05); }
.fl-12__contact.is-active { background: rgba(99,102,241,0.15); }
.fl-12__contact-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 700;
color: #fff;
flex-shrink: 0;
position: relative;
}
.fl-12__contact-online {
position: absolute;
bottom: 1px;
right: 1px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
border: 2px solid var(--sidebar);
}
.fl-12__contact-info { flex: 1; min-width: 0; }
.fl-12__contact-name {
font-size: 0.78rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fl-12__contact-preview {
font-size: 0.68rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fl-12__contact-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
}
.fl-12__contact-time { font-size: 0.62rem; color: var(--muted); }
.fl-12__unread {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 0.58rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
/* ── Message pane ── */
.fl-12__pane {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
/* Chat header */
.fl-12__chat-header {
height: 52px;
background: var(--surface);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
padding: 0 16px;
gap: 10px;
flex-shrink: 0;
}
.fl-12__chat-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #4f46e5);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 700;
color: #fff;
flex-shrink: 0;
}
.fl-12__chat-name {
font-size: 0.85rem;
font-weight: 700;
color: var(--text);
}
.fl-12__chat-status {
font-size: 0.65rem;
color: #22c55e;
font-weight: 500;
}
.fl-12__spacer { flex: 1; }
.fl-12__header-actions {
display: flex;
gap: 4px;
}
.fl-12__hbtn {
width: 30px;
height: 30px;
border-radius: 6px;
background: rgba(255,255,255,0.05);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
cursor: pointer;
color: var(--muted);
transition: background 0.15s, color 0.15s;
}
.fl-12__hbtn:hover { background: rgba(255,255,255,0.1); color: var(--text); }
/* Messages area: flex column, flex: 1 */
.fl-12__messages {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* Date divider */
.fl-12__date-divider {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.65rem;
font-weight: 600;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.fl-12__date-divider::before,
.fl-12__date-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
/* Message row */
.fl-12__msg {
display: flex;
gap: 8px;
max-width: 85%;
}
.fl-12__msg--out {
flex-direction: row-reverse; /* bubble right, avatar right */
align-self: flex-end;
}
.fl-12__msg--in { align-self: flex-start; }
.fl-12__msg-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.65rem;
font-weight: 700;
color: #fff;
align-self: flex-end;
}
.fl-12__msg-body { display: flex; flex-direction: column; gap: 4px; }
.fl-12__msg--out .fl-12__msg-body { align-items: flex-end; }
.fl-12__bubble {
padding: 9px 13px;
border-radius: 16px;
font-size: 0.8rem;
line-height: 1.5;
color: var(--text);
max-width: 260px;
}
.fl-12__msg--in .fl-12__bubble {
background: var(--bubble-in);
border-bottom-left-radius: 4px;
}
.fl-12__msg--out .fl-12__bubble {
background: var(--bubble-out);
border-bottom-right-radius: 4px;
}
.fl-12__msg-time {
font-size: 0.62rem;
color: var(--muted);
padding: 0 4px;
}
/* Typing indicator */
.fl-12__typing {
display: flex;
gap: 4px;
padding: 10px 14px;
background: var(--bubble-in);
border-radius: 16px;
border-bottom-left-radius: 4px;
align-items: center;
align-self: flex-start;
}
.fl-12__typing-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--muted);
animation: fl-12-bounce 1.2s ease-in-out infinite;
}
.fl-12__typing-dot:nth-child(2) { animation-delay: 0.2s; }
.fl-12__typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes fl-12-bounce {
0%,80%,100% { transform: translateY(0); opacity: 0.5; }
40% { transform: translateY(-4px); opacity: 1; }
}
/* Input bar */
.fl-12__input-bar {
background: var(--surface);
border-top: 1px solid var(--border);
padding: 10px 14px;
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.fl-12__input {
flex: 1;
background: rgba(255,255,255,0.06);
border: 1px solid var(--border);
border-radius: 20px;
padding: 8px 14px;
font-size: 0.78rem;
color: var(--muted);
display: flex;
align-items: center;
}
.fl-12__send-btn {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s, transform 0.15s;
}
.fl-12__send-btn:hover { background: #4f46e5; transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) {
.fl-12__typing-dot { animation: none; }
.fl-12__contact, .fl-12__hbtn, .fl-12__send-btn { transition: none; }
}
```
### 13. CSS Flexbox Mosaic Image Gallery
**Type:** Pure CSS
**Description:** A photo mosaic gallery with three flex columns of varying weights (flex: 2, flex: 1, flex: 1.5) and variable-height tiles, each captioned with a category tag and title — creating an asymmetric editorial grid like Unsplash or Pinterest.
**HTML:**
```html
Editorial Gallery
126 photos
```
**CSS:**
```css
.fl-13, .fl-13 *, .fl-13 *::before, .fl-13 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.fl-13 ::selection { background: #ec4899; color: #fff; }
.fl-13 {
--bg: #0c0a0e;
--surface: #16131a;
--ink: #fff;
--muted: rgba(255,255,255,0.55);
--accent: #ec4899;
--border: rgba(255,255,255,0.08);
font-family: 'Barlow', system-ui, sans-serif;
background: var(--bg);
padding: 20px;
border-radius: 16px;
min-height: 500px;
}
.fl-13__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.fl-13__heading {
display: flex;
align-items: baseline;
gap: 12px;
min-width: 0;
}
.fl-13__title {
font-size: 1.15rem;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.02em;
}
.fl-13__count {
font-size: 0.72rem;
font-weight: 600;
color: var(--muted);
letter-spacing: 0.04em;
}
.fl-13__view-toggle {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.fl-13__view-btn {
width: 30px;
height: 30px;
border-radius: 6px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--muted);
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fl-13__view-btn:hover { color: var(--ink); background: rgba(255,255,255,0.08); }
.fl-13__view-btn.is-active {
background: rgba(236,72,153,0.12);
color: var(--accent);
border-color: rgba(236,72,153,0.45);
}
/*
MOSAIC LAYOUT
Outer container: flex row (3 columns) with proportional flex weights.
Each column: flex column with two tiles of variable flex weight.
Result: an asymmetric Pinterest-style grid where the LEFT column
is widest (flex: 2), the MIDDLE narrowest (flex: 1), and the
RIGHT in between (flex: 1.5).
*/
.fl-13__mosaic {
display: flex;
gap: 12px;
height: 440px;
}
.fl-13__col {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.fl-13__col--wide { flex: 2; }
.fl-13__col--narrow { flex: 1; }
.fl-13__col--mid { flex: 1.5; }
.fl-13__tile {
flex: 1;
border-radius: 12px;
overflow: hidden;
position: relative;
cursor: pointer;
isolation: isolate;
background: var(--surface);
}
.fl-13__tile--tall { flex: 1.8; }
.fl-13__tile--short { flex: 1; }
/* The "image": a gradient stand-in for a real photo. In production,
replace .fl-13__tile-bg with
at the same size + an
object-fit: cover rule. The scale-on-hover effect still works. */
.fl-13__tile-bg {
position: absolute;
inset: 0;
background: var(--tile-grad, linear-gradient(135deg, #6366f1, #1e1b4b));
transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
z-index: 0;
}
.fl-13__tile:hover .fl-13__tile-bg { transform: scale(1.05); }
/* Caption scrim — sits above the image, persistent (not hover-only).
Linear gradient fades the bottom of the image so white text reads
cleanly without darkening the whole image. */
.fl-13__tile::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 65%;
background: linear-gradient(to top,
rgba(0,0,0,0.78) 0%,
rgba(0,0,0,0.45) 35%,
transparent 100%);
z-index: 1;
pointer-events: none;
}
.fl-13__tile-meta {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
z-index: 2;
pointer-events: none;
}
.fl-13__tile-tag {
display: inline-block;
background: rgba(255,255,255,0.18);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
padding: 3px 10px;
border-radius: 999px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
}
.fl-13__tile-title {
font-size: 0.92rem;
font-weight: 700;
color: #fff;
line-height: 1.25;
letter-spacing: -0.01em;
text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.fl-13__tile-sub {
font-size: 0.7rem;
color: rgba(255,255,255,0.78);
font-weight: 500;
}
.fl-13__tile-more {
display: inline-block;
margin-top: 2px;
padding: 3px 9px;
border-radius: 999px;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.25);
font-size: 0.65rem;
font-weight: 700;
color: #fff;
}
/* Smaller tiles need lighter caption so we don't drown the image */
.fl-13__col--narrow .fl-13__tile-title { font-size: 0.78rem; }
.fl-13__col--narrow .fl-13__tile-meta { left: 10px; right: 10px; bottom: 10px; gap: 4px; }
@media (max-width: 720px) {
.fl-13 { padding: 14px; }
.fl-13__mosaic { height: 520px; }
}
@media (max-width: 520px) {
/* Below 520px the three-column row gets too cramped. Stack the
columns vertically — still a flexbox layout, just flipped axis. */
.fl-13__mosaic {
flex-direction: column;
height: auto;
}
.fl-13__col { flex-direction: row; flex: none; min-height: 180px; }
.fl-13__col--wide .fl-13__tile--tall { flex: 1.6; }
.fl-13__title { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
.fl-13__tile-bg, .fl-13__view-btn { transition: none; }
.fl-13__tile:hover .fl-13__tile-bg { transform: none; }
}
```
### 14. CSS Flexbox Form Layout
**Type:** Pure CSS
**Description:** A structured form layout using flex for single-column fields, inline multi-column field rows, and input groups with prefix/suffix addons — all without tables or floats.
**HTML:**
```html
Flexbox Form Layout
Create Your Account
All field rows and input groups use CSS Flexbox
✉
Please enter a valid email address
👁
✓ Password strength: Strong
0 / 200 characters
✓
Send me weekly CSS layout tips and pattern updates
I agree to the Terms of Service and Privacy Policy
Step 2 of 3
```
**CSS:**
```css
.fl-14, .fl-14 *, .fl-14 *::before, .fl-14 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.fl-14 ::selection { background: #2563eb; color: #fff; }
.fl-14 {
--bg: #f8fafc;
--surface: #fff;
--ink: #0f172a;
--muted: #64748b;
--accent: #2563eb;
--accent-light: #dbeafe;
--border: #cbd5e1;
--border-focus: #2563eb;
--error: #ef4444;
--success: #22c55e;
font-family: 'Lato', sans-serif;
background: var(--bg);
padding: 28px;
border-radius: 16px;
min-height: 500px;
display: flex;
align-items: flex-start;
justify-content: center;
}
.fl-14__card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
width: 100%;
max-width: 560px;
}
.fl-14__card-header {
background: linear-gradient(135deg, #1e3a5f, #2563eb);
padding: 20px 24px;
}
.fl-14__card-eyebrow {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
margin-bottom: 4px;
}
.fl-14__card-title {
font-size: 1.1rem;
font-weight: 900;
color: #fff;
}
.fl-14__card-sub {
font-size: 0.75rem;
color: rgba(255,255,255,0.55);
margin-top: 4px;
}
.fl-14__form {
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* ── Row patterns ── */
/* Single full-width field */
.fl-14__field {
display: flex;
flex-direction: column;
gap: 5px;
}
/* Two-col row: flex row with gap */
.fl-14__row {
display: flex;
gap: 12px;
}
.fl-14__row .fl-14__field { flex: 1; }
.fl-14__row .fl-14__field--narrow { flex: 0 0 100px; }
.fl-14__row .fl-14__field--wide { flex: 2; }
/* Input group: icon + input side by side */
.fl-14__input-group {
display: flex;
align-items: stretch;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
}
.fl-14__input-group:focus-within {
border-color: var(--border-focus);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.fl-14__input-prefix {
background: #f8fafc;
border-right: 1px solid var(--border);
padding: 0 10px;
display: flex;
align-items: center;
font-size: 0.78rem;
color: var(--muted);
flex-shrink: 0;
white-space: nowrap;
}
.fl-14__input-suffix {
background: #f8fafc;
border-left: 1px solid var(--border);
padding: 0 10px;
display: flex;
align-items: center;
font-size: 0.78rem;
color: var(--muted);
flex-shrink: 0;
}
.fl-14__input {
flex: 1;
border: none;
outline: none;
padding: 9px 12px;
font-size: 0.82rem;
font-family: 'Lato', sans-serif;
color: var(--ink);
background: transparent;
min-width: 0;
}
.fl-14__input::placeholder { color: #94a3b8; }
/* Plain input (no group) */
.fl-14__plain-input {
border: 1px solid var(--border);
border-radius: 8px;
padding: 9px 12px;
font-size: 0.82rem;
font-family: 'Lato', sans-serif;
color: var(--ink);
outline: none;
width: 100%;
transition: border-color 0.2s, box-shadow 0.2s;
}
.fl-14__plain-input:focus {
border-color: var(--border-focus);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.fl-14__plain-input::placeholder { color: #94a3b8; }
/* Select */
.fl-14__select {
border: 1px solid var(--border);
border-radius: 8px;
padding: 9px 12px;
font-size: 0.82rem;
font-family: 'Lato', sans-serif;
color: var(--ink);
outline: none;
width: 100%;
background: var(--surface);
cursor: pointer;
transition: border-color 0.2s;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
.fl-14__select:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
/* Textarea */
.fl-14__textarea {
border: 1px solid var(--border);
border-radius: 8px;
padding: 9px 12px;
font-size: 0.82rem;
font-family: 'Lato', sans-serif;
color: var(--ink);
outline: none;
width: 100%;
resize: vertical;
min-height: 80px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.fl-14__textarea:focus {
border-color: var(--border-focus);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.fl-14__label {
font-size: 0.75rem;
font-weight: 700;
color: var(--ink);
display: flex;
align-items: center;
gap: 4px;
}
.fl-14__required { color: var(--error); }
.fl-14__hint {
font-size: 0.68rem;
color: var(--muted);
}
.fl-14__hint.is-error { color: var(--error); }
.fl-14__hint.is-success { color: var(--success); }
/* Checkbox row */
.fl-14__check-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.fl-14__check-item {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.fl-14__checkbox {
width: 16px;
height: 16px;
border: 2px solid var(--border);
border-radius: 4px;
flex-shrink: 0;
margin-top: 1px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, border-color 0.15s;
}
.fl-14__checkbox.is-checked {
background: var(--accent);
border-color: var(--accent);
color: #fff;
font-size: 0.6rem;
font-weight: 800;
}
.fl-14__check-text {
font-size: 0.78rem;
color: var(--muted);
line-height: 1.4;
}
/* Divider */
.fl-14__divider {
height: 1px;
background: #f1f5f9;
margin: 4px 0;
}
/* Submit row */
.fl-14__submit-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 4px;
}
.fl-14__submit-btn {
padding: 10px 24px;
border-radius: 8px;
background: var(--accent);
color: #fff;
font-size: 0.82rem;
font-weight: 700;
font-family: 'Lato', sans-serif;
border: none;
cursor: pointer;
transition: background 0.2s, transform 0.15s;
display: flex;
align-items: center;
gap: 6px;
}
.fl-14__submit-btn:hover { background: #1d4ed8; transform: translateY(-1px); }
.fl-14__cancel-btn {
padding: 10px 16px;
border-radius: 8px;
background: transparent;
color: var(--muted);
font-size: 0.82rem;
font-weight: 600;
font-family: 'Lato', sans-serif;
border: 1px solid var(--border);
cursor: pointer;
transition: all 0.15s;
}
.fl-14__cancel-btn:hover { background: #f8fafc; color: var(--ink); }
.fl-14__step-indicator {
font-size: 0.7rem;
color: var(--muted);
}
.fl-14__step-indicator strong { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
.fl-14__input-group, .fl-14__plain-input,
.fl-14__select, .fl-14__textarea,
.fl-14__submit-btn, .fl-14__cancel-btn { transition: none; }
}
```
### 15. CSS Flexbox Kanban Board Layout
**Type:** CSS + JS
**Description:** A dark-themed Kanban board with five status columns, draggable task cards, color-coded priority badges, avatar assignments, and a progress bar — built with a horizontal flex shell.
**HTML:**
```html
Backlog
3
UX
Redesign onboarding flow for new users
Backend
Add Redis caching for API responses
Frontend
Implement dark mode toggle
Add card
To Do
3
Frontend
Build flexbox grid component library
Backend
Migrate auth service to JWT tokens
QA
Write E2E tests for checkout flow
Add card
In Progress
3
Frontend
Implement responsive nav with flex
Backend
Set up CI/CD pipeline for staging
Bug
Fix overflow scroll on mobile sidebar
Add card
Review
2
Frontend
Pricing table with flex equal heights
QA
Cross-browser accessibility audit
Add card
Done
2
Frontend
Holy grail layout with flex columns
Backend
Database schema migrations v2.1
Add card
+
Add column
```
**CSS:**
```css
.fl-15, .fl-15 *, .fl-15 *::before, .fl-15 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.fl-15 ::selection { background: #7c3aed; color: #fff; }
.fl-15 {
--bg: #0f0f13;
--panel: #1a1a24;
--col: #1e1e2a;
--col-hover: #252533;
--border: #2e2e40;
--accent: #7c3aed;
--accent2: #06b6d4;
--accent3: #f59e0b;
--accent4: #10b981;
--danger: #ef4444;
--ink: #e8e8f0;
--muted: #6b6b80;
--card-bg: #252535;
--card-hover: #2d2d40;
font-family: 'DM Sans', sans-serif;
background: var(--bg);
min-height: 520px;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--border);
display: flex;
flex-direction: column;
}
/* ── Top Bar ── */
.fl-15__topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
background: var(--panel);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
gap: 12px;
}
.fl-15__logo {
display: flex;
align-items: center;
gap: 8px;
}
.fl-15__logo-icon {
width: 28px; height: 28px;
background: var(--accent);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
}
.fl-15__logo-icon svg { width: 16px; height: 16px; fill: #fff; }
.fl-15__logo-name {
font-family: 'Space Mono', monospace;
font-size: 0.85rem;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.02em;
}
.fl-15__logo-name span { color: var(--accent); }
.fl-15__project {
font-size: 0.75rem;
color: var(--muted);
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.fl-15__topbar-actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.fl-15__avatar {
width: 28px; height: 28px;
border-radius: 50%;
font-size: 0.65rem;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
color: #fff;
flex-shrink: 0;
}
.fl-15__avatar--a { background: #7c3aed; }
.fl-15__avatar--b { background: #06b6d4; }
.fl-15__avatar--c { background: #f59e0b; }
.fl-15__btn {
padding: 5px 12px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
border: none;
font-family: 'DM Sans', sans-serif;
transition: opacity 0.2s;
}
.fl-15__btn:hover { opacity: 0.85; }
.fl-15__btn--primary {
background: var(--accent);
color: #fff;
}
.fl-15__btn--ghost {
background: transparent;
color: var(--muted);
border: 1px solid var(--border);
}
/* ── Board ── */
.fl-15__board {
display: flex;
flex: 1;
gap: 10px;
padding: 14px;
overflow-x: auto;
align-items: flex-start;
min-height: 0;
position: relative;
}
.fl-15__board::-webkit-scrollbar { height: 6px; }
.fl-15__board::-webkit-scrollbar-track { background: transparent; }
.fl-15__board::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.fl-15__board::-webkit-scrollbar-thumb:hover { background: var(--accent); }
/* ── Column ── */
.fl-15__col {
display: flex;
flex-direction: column;
flex: 0 0 192px;
min-width: 0;
background: var(--col);
border-radius: 10px;
border: 1px solid var(--border);
overflow: hidden;
}
.fl-15__col-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
flex-shrink: 0;
border-bottom: 2px solid transparent;
}
.fl-15__col--backlog .fl-15__col-head { border-color: var(--muted); }
.fl-15__col--todo .fl-15__col-head { border-color: var(--accent2); }
.fl-15__col--doing .fl-15__col-head { border-color: var(--accent); }
.fl-15__col--review .fl-15__col-head { border-color: var(--accent3); }
.fl-15__col--done .fl-15__col-head { border-color: var(--accent4); }
.fl-15__col-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.fl-15__col--backlog .fl-15__col-label { color: var(--muted); }
.fl-15__col--todo .fl-15__col-label { color: var(--accent2); }
.fl-15__col--doing .fl-15__col-label { color: var(--accent); }
.fl-15__col--review .fl-15__col-label { color: var(--accent3); }
.fl-15__col--done .fl-15__col-label { color: var(--accent4); }
.fl-15__col-dot {
width: 7px; height: 7px; border-radius: 50%;
}
.fl-15__col--backlog .fl-15__col-dot { background: var(--muted); }
.fl-15__col--todo .fl-15__col-dot { background: var(--accent2); }
.fl-15__col--doing .fl-15__col-dot { background: var(--accent); }
.fl-15__col--review .fl-15__col-dot { background: var(--accent3); }
.fl-15__col--done .fl-15__col-dot { background: var(--accent4); }
.fl-15__col-count {
font-size: 0.68rem;
background: var(--border);
color: var(--muted);
border-radius: 20px;
padding: 1px 7px;
font-weight: 700;
}
/* ── Cards area ── */
.fl-15__cards {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
flex: 1;
overflow-y: auto;
min-height: 80px;
max-height: 360px;
}
.fl-15__cards::-webkit-scrollbar { width: 3px; }
.fl-15__cards::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
/* ── Card ── */
.fl-15__card {
background: var(--card-bg);
border-radius: 7px;
border: 1px solid var(--border);
padding: 10px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.15s;
display: flex;
flex-direction: column;
gap: 7px;
}
.fl-15__card:hover {
background: var(--card-hover);
border-color: #3a3a50;
transform: translateY(-1px);
}
.fl-15__card--highlighted {
border-color: var(--accent);
}
.fl-15__card-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 2px 7px;
border-radius: 4px;
align-self: flex-start;
}
.fl-15__card-tag--fe { background: rgba(124,58,237,0.2); color: #a78bfa; }
.fl-15__card-tag--be { background: rgba(6,182,212,0.2); color: #67e8f9; }
.fl-15__card-tag--bug { background: rgba(239,68,68,0.2); color: #fca5a5; }
.fl-15__card-tag--ux { background: rgba(245,158,11,0.2); color: #fcd34d; }
.fl-15__card-tag--qa { background: rgba(16,185,129,0.2); color: #6ee7b7; }
.fl-15__card-title {
font-size: 0.78rem;
font-weight: 500;
color: var(--ink);
line-height: 1.4;
}
.fl-15__card-meta {
display: flex;
align-items: center;
justify-content: space-between;
}
.fl-15__card-id {
font-family: 'Space Mono', monospace;
font-size: 0.6rem;
color: var(--muted);
}
.fl-15__card-foot {
display: flex;
align-items: center;
gap: 5px;
}
.fl-15__card-prio {
font-size: 0.6rem;
font-weight: 600;
}
.fl-15__card-prio--high { color: var(--danger); }
.fl-15__card-prio--medium { color: var(--accent3); }
.fl-15__card-prio--low { color: var(--accent4); }
.fl-15__card-avatar {
width: 18px; height: 18px;
border-radius: 50%;
font-size: 0.5rem;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
color: #fff;
margin-left: auto;
}
.fl-15__card-avatar--a { background: #7c3aed; }
.fl-15__card-avatar--b { background: #06b6d4; }
.fl-15__card-avatar--c { background: #f59e0b; }
/* ── Progress bar on doing cards ── */
.fl-15__card-progress {
height: 3px;
background: var(--border);
border-radius: 2px;
overflow: hidden;
}
.fl-15__card-progress-fill {
height: 100%;
border-radius: 2px;
background: var(--accent);
animation: fl-15-pulse 2.5s ease-in-out infinite;
}
@keyframes fl-15-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* ── Add card button ── */
.fl-15__col-add {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
font-size: 0.72rem;
color: var(--muted);
cursor: pointer;
border-top: 1px solid var(--border);
flex-shrink: 0;
transition: color 0.15s, background 0.15s;
}
.fl-15__col-add:hover {
color: var(--ink);
background: var(--col-hover);
}
.fl-15__col-add-icon {
width: 16px; height: 16px;
border: 1.5px solid currentColor;
border-radius: 4px;
display: flex; align-items: center; justify-content: center;
font-size: 0.9rem;
line-height: 1;
}
/* ── Add column ── */
.fl-15__col--add {
flex: 0 0 140px;
border: 1.5px dashed var(--border);
background: transparent;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
align-self: stretch;
min-height: 120px;
}
.fl-15__col--add:hover {
border-color: var(--accent);
background: rgba(124,58,237,0.05);
}
.fl-15__col-add-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: var(--muted);
font-size: 0.72rem;
font-weight: 500;
}
.fl-15__col-add-label span {
font-size: 1.2rem;
line-height: 1;
}
/* ── Drag ghost (visual only) ── */
.fl-15__card.is-dragging {
opacity: 0.4;
transform: rotate(2deg) scale(0.97);
}
/* ── Responsive: narrow viewports ── */
@media (max-width: 520px) {
.fl-15__project { display: none; }
.fl-15__topbar { padding: 10px 14px; gap: 8px; }
.fl-15__topbar-actions { gap: 6px; }
.fl-15__btn--ghost { display: none; }
.fl-15__avatar { width: 24px; height: 24px; font-size: 0.6rem; }
}
@media (max-width: 380px) {
.fl-15__avatar { display: none; }
.fl-15__avatar:last-of-type { display: flex; }
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
.fl-15__card { transition: none; }
.fl-15__card-progress-fill { animation: none; }
}
```
**JS:**
```js
(function() {
const board = document.getElementById('fl-15-board');
if (!board) return;
let dragCard = null;
let dragSource = null;
board.querySelectorAll('.fl-15__card[draggable]').forEach(card => {
// Enable drag on all cards
card.setAttribute('draggable', 'true');
});
// Enable drag on ALL cards
board.querySelectorAll('.fl-15__card').forEach(card => {
card.setAttribute('draggable', 'true');
card.addEventListener('dragstart', e => {
dragCard = card;
dragSource = card.closest('.fl-15__cards');
setTimeout(() => card.classList.add('is-dragging'), 0);
e.dataTransfer.effectAllowed = 'move';
});
card.addEventListener('dragend', () => {
card.classList.remove('is-dragging');
board.querySelectorAll('.fl-15__cards').forEach(z => z.classList.remove('fl-15__drop-zone'));
dragCard = null;
});
});
board.querySelectorAll('.fl-15__cards').forEach(zone => {
zone.addEventListener('dragover', e => {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
});
zone.addEventListener('drop', e => {
e.preventDefault();
if (dragCard && zone !== dragSource) {
zone.appendChild(dragCard);
// Update counts
updateCounts();
}
});
});
function updateCounts() {
board.querySelectorAll('.fl-15__col').forEach(col => {
const count = col.querySelectorAll('.fl-15__card').length;
const badge = col.querySelector('.fl-15__col-count');
if (badge) badge.textContent = count;
});
}
// Add card buttons — append a placeholder card
board.querySelectorAll('.fl-15__col-add').forEach(btn => {
btn.addEventListener('click', () => {
const col = btn.closest('.fl-15__col');
const cardsZone = col.querySelector('.fl-15__cards');
if (!cardsZone) return;
const card = document.createElement('div');
card.className = 'fl-15__card';
card.setAttribute('draggable', 'true');
card.innerHTML = `
Frontend
New task…
`;
cardsZone.appendChild(card);
card.querySelector('[contenteditable]').focus();
updateCounts();
// Re-attach drag events
card.addEventListener('dragstart', e => {
dragCard = card;
dragSource = card.closest('.fl-15__cards');
setTimeout(() => card.classList.add('is-dragging'), 0);
e.dataTransfer.effectAllowed = 'move';
});
card.addEventListener('dragend', () => {
card.classList.remove('is-dragging');
dragCard = null;
});
});
});
})();
```
---
## 32 CSS Floating Action Button Designs
URL: https://codefronts.com/components/css-floating-buttons/
Description: 32 hand-coded CSS floating action button templates covering every FAB pattern production apps actually ship in 2026 — Material Design gradient FAB with ripple, speed dial fan-out menu, morph-expand FAB, scroll-to-top with progress ring, floating chat widget, fan arc menu, squircle FAB, social share FAB, glassmorphism FAB, neon glow, compose+tooltip, draggable FAB, notification bell with badge, floating cart with item counter, magnetic hover FAB, theme toggle, classic plus, pulse ring, morphing FAB, labeled pill, neon cyber, brutalist stamp, loading spinner, drag handle, voice action, premium aurora, quick reply, square modern, and more. All use semantic