css + js
All collections tagged with "css + js"
15 CSS Aspect Ratio Demos
15 hand-coded CSS aspect-ratio demos for video embeds, product galleries, IAB ad slots, native dialogs, and CLS-safe placeholders: 16:9 iframe YouTube embed with click-to-load facade + up-next rail, 21:9 full-screen hero video with min-height/max-height:100svh guardrails + Ken Burns drift, 1:1 Instagram-style square grid with 2×2 feature tile, 4:3 magazine card image cover, 9:16 vertical stories rail (TikTok/Reels/Shorts pattern) with scroll-snap + segment bars, 4:5 apparel product image gallery with radio-driven state + 1:1 thumbnails, 1:1 zoom thumbnail carousel with pointer-tracked --zx/--zy magnifier, prevent-layout-shift placeholder with live PerformanceObserver CLS meter (before/after side-by-side lab), dynamic content fallback with three policies (bend/strict/auto) via :has() toggle, IAB ad banner slots (728×90 leaderboard, 300×250 medium rectangle, 300×600 half-page, 320×50 mobile) with skeletons + container-query mobile swap, responsive modal dialog sized min(92vw, 88svh×16/9, 1080px) with @starting-style animation, responsive OpenStreetMap iframe wrapper with 16:9 → 1:1 container-query narrow swap, media query orientation live HUD + resize:both container-ratio playground, object-fit logo cloud with contain/cover/fill switcher via :has(), and side-by-side padding-top hack (height:0 + padding-top:56.25%) → modern aspect-ratio migration comparison with live ratio picker. 11 truly Pure CSS + 4 with a tiny optional vanilla JS snippet (facade swap, pointer magnifier, CLS meter, native dialog). Every demo is scoped under a unique .car-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
6 CSS Bento Grid Layouts
6 production CSS bento grid layouts with 12 hand-coded designs — Apple-style product showcase, SaaS feature value-prop matrix, analytics dashboard overview, creative portfolio, e-commerce category hub, and link-in-bio social hub. Each topic ships 2 sub-variants side-by-side so visitors see both a keynote aesthetic and a paper-doc variant at once. Container queries, CSS Grid, zero dependencies, copy-paste ready.
25 CSS Button Groups
25 hand-coded CSS button groups: segmented controls, split buttons, pill radios, toggle groups, filter chips, floating action buttons, pricing toggles, Web3 wallet-connect grids, AI model pickers, icon toolbars — with Popover API, offset-path, View Transitions, @property, :has(), and every modern CSS primitive. Zero dependencies vs Radix/shadcn/Aceternity, WCAG 2.2 AA accessible, MIT licensed.
6 CSS Custom Cursor Styles
6 hand-coded CSS custom cursors: pure-CSS SVG brand pointer with cursor: url() and keyword fallback, smooth glowing follower on requestAnimationFrame lerp, magnetic blend cursor with :has() + mix-blend-mode, custom grab/grabbing cursors for drag carousels, dynamic 'View' badge that follows the mouse, and a magnifier zoom lens. Touch-guarded, prefers-reduced-motion respected, WCAG-safe, MIT licensed.
17 CSS Dashboard Layouts
17 hand-coded CSS dashboard layouts covering the exact patterns SaaS builders, admin-panel devs, fintech UI teams and analytics-tool designers actually ship: modern CSS Grid bento dashboards, collapsible-sidebar admin shells, auto-fit KPI card grids, split-pane master-detail views, fixed-header independent-scroll panels, grid-template-areas boilerplates, off-canvas drawer dashboards, container-query responsive widgets, e-commerce merchant control panels, dark-mode CSS-variable systems, multi-level nested sidebars, zero-dependency vanilla shells, AI copilot split layouts, sticky-header + sticky-column data grids, modular masonry boards, 100vh no-scroll command centers, and horizontal top-nav app frames. 14 truly Pure CSS + 3 with a tiny optional vanilla JS snippet. Every dashboard is scoped under a unique .cdl-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards on every animation, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
11 CSS Glassmorphic Sticky Navbars
11 hand-coded CSS glassmorphic sticky navbars using backdrop-filter blur + saturate: SaaS landing header, scroll-triggered frost, dark cyberpunk, floating pill, glass mega menu, mobile drawer, Core Web Vitals baseline, animated conic border, WCAG-AA accessible, React + Framer Motion, minimalist portfolio. Every navbar is position:sticky with proper scroll containers. Zero dependencies, framework-agnostic, MIT licensed.
18 CSS Gradient UI
18 hand-coded CSS gradient UI demos covering the full design-system surface where tier-1 SaaS, Web3, AI, and premium fintech products reach for gradients in 2026: 6-variant gradient button hover lab (shift/sweep/ring/glow/ghost/hue), gradient feature cards with hover lift + shared --tint token, three gradient border techniques compared side-by-side (double-background layering / mask-composite ring / conic-gradient orbit with @property --angle), gradient badges + release-dashboard status pills (PRO/BETA/NEW), gradient search bar + command palette + form inputs with animated underlines, gradient progress bars + barber-pole stripes + conic-gradient loading rings, animated mesh / aurora background with 4 radial blobs + grain overlay, glassmorphism sign-in card over gradient with backdrop-filter, full-page animated linear gradient pan, hero banner with gradient overlay + Patagonia photo, neon / dark-mode glow cards with flickering OPEN sign, gradient text clipping type specimen (aurora/flow/conic numeral), gradient text hover-reveal editorial menu, gradient link underline animation with 4 styles, metallic / gold / chrome / rose-gold gradient text with panning shine (awards invitation aesthetic), radial spotlight cursor-tracking AI console cards (delegated pointermove + rAF throttling), conic-gradient avatar border rings (Instagram story / live / segment / seen / group presence states), and gradient scroll mask fade for horizontal chip rails + vertical changelog. 16 truly Pure CSS + 2 with a tiny optional vanilla JS snippet (progress ticker + cursor coord writer). Every gradient UI is scoped under a unique .cgu-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
20 CSS Liquid Glass Effects
20 hand-coded CSS Liquid Glass effects inspired by Apple's iOS 26 / macOS Tahoe / iPadOS 26 / watchOS 26 / tvOS 26 / visionOS design language (WWDC 2025) — the fastest-rising design search cluster for US / UK / CA / AU / DE front-end developers. Refractive cards with SVG feDisplacementMap, glossy capsule buttons with specular sweeps, glassmorphic navigation bars, gooey toggles via feGaussianBlur + feColorMatrix, modal dialogs, theme switchers, input fields, SVG feTurbulence displacement backgrounds, dropdowns, pricing tables, tooltips, audio players, range sliders, toast notifications, sidebars, accordions, login cards, floating action buttons, loading skeletons, and multi-step form wizards. Zero-bundle copy-paste HTML + CSS, Tailwind-compatible (backdrop-blur-xl / bg-white/10 / rounded-full utilities map 1:1), Core Web Vitals safe (CLS 0, INP-friendly, compositor-only transforms), WCAG 2.2 accessible with prefers-reduced-motion and prefers-reduced-transparency fallbacks, MIT licensed.
21 CSS Liquid Glass Cards
21 hand-coded CSS Liquid Glass cards inspired by Apple's WWDC 2025 design language (iOS 26 / macOS Tahoe / visionOS). Dashboard analytics widgets, draggable kanban cards, glassmorphic product feature cards, interactive pricing matrices, profile cards, horizontal case-study scrollers, music player widgets, weather cards, secure login forms, payment checkout cards, NFT collectibles, crypto wallet balance widgets, game inventory cards, analytics chart cards with warped grid refraction, digital coupon discount cards, hover-reactive profile bio cards, team member spotlight cards, media slider knob cards, smart home thermostat cards, multi-step wizard progress cards, and RPG game inventory HUD cards. Zero dependencies vs Aceternity UI, Magic UI, shadcn glass. Core Web Vitals safe (CLS 0, INP-friendly), WCAG 2.2 AA accessible, MIT licensed.
24 CSS Liquid Glass Navbars
24 hand-coded CSS Liquid Glass navbars inspired by Apple's WWDC 2025 design language (iOS 26 / macOS Tahoe / visionOS). Floating tab bars, sticky glass headers, Dynamic Island navigation, capsule active tabs, cursor-warp menus, mega dropdowns, and responsive sidebar-to-bottom-tab reflows. Zero dependencies vs Aceternity UI, Magic UI, shadcn glass. Core Web Vitals safe (CLS 0, INP-friendly, compositor-only motion), WCAG 2.2 AA accessible with prefers-reduced-motion + prefers-reduced-transparency + focus-visible on every interactive, MIT licensed.
12 CSS Masonry Layouts
12 hand-coded CSS masonry layouts covering the three canonical engines (multi-column `columns:` walls, CSS Grid row-span lattices, CSS Grid dense auto-flow packing, flex column-wrap boards) plus the W3C native masonry spec with layered @supports fallbacks. Every real-world masonry use case: Pinterest-style image walls, `<dialog>`-element lightbox galleries, responsive photo grids with grid-row spans preserving reading order, blog card walls with column-span editor's-pick spans, e-commerce product listings with dense packing + feature tiles, flex column-wrap horizontally-scrolling social feeds, art-directed portfolio showcases with :has() spotlight, testimonial walls with mask-image fade + scroll-driven reveal, mixed-ratio video thumbnail galleries, quantized dashboard widget grids on 108px lattices, IntersectionObserver-append infinite scroll walls with aria-live, and the modern @supports (grid-template-rows:masonry) / display:masonry cascade with live badge showing engine status. 10 truly Pure CSS + 2 with a tiny optional vanilla JS snippet (lightbox dialog + infinite-scroll append). Every wall is scoped under a unique .msn-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
16 CSS Portfolio Layouts
16 hand-coded CSS portfolio layouts covering the exact patterns freelance developers, UX/UI designers, product designers, illustrators, photographers and agency teams actually ship for their own portfolio sites: responsive CSS-Grid galleries with fr tracks and auto-fit minmax, Apple-style bento grids, no-JS native masonry walls, sticky-sidebar flexbox splits, hover-overlay project grids with staggered scrims, scroll-snap horizontal showcases, 50/50 split-screen heroes with :has() accent recoloring, dark-mode CSS-variable token systems, single-page developer portfolios with anchor navigation and scroll-timeline progress rails, UX case-study articles with 1fr/62ch/1fr content grids, ultra-minimalist graphic-design indexes with clip-path thumb reveals, freelancer layouts with testimonials plus 3-tier pricing, beginner-friendly auto-fit card grids, 3D card-flip project tiles, full-screen 100svh hero openers with view()-timeline parallax and sticky header+sidebar app-shell templates. 14 truly Pure CSS + 2 with a tiny optional vanilla JS snippet. Every portfolio is scoped under a unique .cpl-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards on every animation, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
24 CSS Radio Buttons
24 hand-coded CSS radio button designs covering every real-world use case tier-1 SaaS, e-commerce, fintech, and healthcare products reach for radio inputs in 2026: full selectable cards (:has()-driven with icon + title + meta + price), iOS-style pill segmented control (billing period toggle), radio row with icon tile + title + description subtext (settings-page pattern), dark-mode glowing radio with 3-layer box-shadow breathing pulse, pure-CSS accessible radio using appearance:none (WCAG 1.3.1 canonical reference — no wrapper), plan picker rows with 'Most popular' + 'Best value' gradient badges, concentric ripple animation on check, sliding pill toggle switch (2-seg thumb), interactive 3D sphere radio with orb highlight tracking, ink splash animation on select, rating star radio group (reverse-flex flip pattern), 3D tilt card option selector with cursor-tracked perspective, minimal checkmark radio, product color swatch selector (Shopify/Amazon variant picker), segmented control bar, cyberpunk neon ring radio, subscription pricing plan cards (Stripe/Vercel/Linear billing tier pattern), liquid wave fill on select, image clip-mask option selector (Airbnb/Booking destination picker), gradient border card radio, user profile avatar selector (Netflix who's-watching pattern), stacked vertical radio list, tactile 3D push button radio (skeuomorphic keycap depress), and outer glow pulse radio with dual sonar-ping keyframes. 22 truly Pure CSS + 2 with a tiny optional vanilla JS snippet (Demo 09 orb highlight tracking + Demo 12 3D tilt cursor perspective). Every radio group uses real <input type='radio'> inside <fieldset> + <legend> semantic wrappers so screen readers announce the question before the options, keyboard arrow keys move selection natively, and form-post semantics work zero-config. Every visual is scoped under a unique .crb-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
17 CSS Sticky Elements
17 hand-coded CSS position:sticky demos covering every real-world sticky use case: sticky header on scroll, sticky header that changes background when scrolled (via scroll-state() container queries), sticky shrinking navbar with animation-timeline: scroll(), stacked sticky header + secondary tabs with :has(:target) scrollspy, sticky sidebar inside flexbox with align-self:flex-start, sticky Table of Contents with IntersectionObserver scrollspy + scroll-driven progress bar, iOS-contacts sticky section headers with alphabet rail, sticky chapter card stack with view() timeline entrances, sticky table header inside scrollable div, sticky first column + header with correct z-index corner cell (Airtable/Retool/Metabase pattern), mobile sticky add-to-cart bottom bar with safe-area-inset, sticky floating promo banner with :has(:checked) dismiss, sticky checkout order summary sidebar, sticky footer to bottom of short pages via grid auto/1fr/auto, sticky social share rail (desktop-left / mobile-bottom via container query), a debug lab showing why sticky breaks when an ancestor has overflow:hidden (vs overflow:clip), and a stuck-state detection sensor using both scroll-state(stuck: top) AND IntersectionObserver sentinel fallback. 15 truly Pure CSS + 2 with a tiny optional vanilla JS snippet. Every sticky is scoped under a unique .cst-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
24 CSS Tags & Chips
24 hand-coded CSS tag and chip designs for marketplace filter chips, tag-input fields, presence status dots, and category pill badges: multi-select filter chips with :has() live-count, interactive tag-input field with Enter/comma commit + Backspace pop + duplicate-shake + aria-live announcements, badge with online status indicator dot (online/away/busy/offline/typing), category pill badge with icon and single-hue oklch() theming, dismissible pill with close button, hover-scale interaction, animated border outline, liquid-fill hover, stacked cluster, notched-corner cyberpunk, glassmorphism, aurora gradient border, retro pixel-art, neo-brutalist stamp, animated gradient border, live pulsing status badge, draggable reorder list with pointer events, pure-CSS checkbox-driven tag selector, dismissible with undo toast, notification-count label, scrolling text marquee, expandable content on click, connected radio-button segment, and workflow state process badge. 22 truly Pure CSS + 2 with a tiny optional vanilla JS snippet. Every chip is scoped under a unique .ctc-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
30 CSS Text Hover Effects
30 hand-coded CSS text hover effect demos covering the full HOVER-triggered text-interaction surface tier-1 SaaS marketing (Stripe / Linear / Vercel / Framer / Cursor / v0), editorial (NYT / Kinfolk / Substack), portfolio + agency creative (Awwwards SOTD), luxury e-commerce (Farfetch / MatchesFashion), premium fintech dashboards, and gaming / Web3 hover states reach for in 2026: 4-variant animated underlines (LTR / center-out / slide-thru / native text-decoration), text fill + liquid fill with @property fill %, text color reveal via background-clip crossfade, strike-through hover with e-commerce + todo + sold-out nav variants, text swap / flip up (2-storey elevator + 3D rolodex prism), glitch RGB-split with attr(data-text) clones + clip-path steps() slices, neon glow / flicker with 5-layer text-shadow ignition, shimmer / metallic gold gradient sweep, 3D pop / lift with 7-layer text-shadow staircase, split-letter staggered wave with calc(var(--i)*45ms) delay, mask / spotlight cursor-tracked photo-in-text with radial mask, reveal hidden text / spoiler with filter:blur + :has(:checked), blur to focus with row-hover defocus + focus-visible mirror, magnetic cursor-tracking with elastic snap-back, letter-spacing expansion with margin-right phantom-space fix, typography outline / stroke → fill pour, scramble / matrix with setInterval + ch min-width lock, animated border / encased text with corner trace + conic-gradient orbit, elastic / rubber-band squash-stretch bounce, variable font weight morph with bold-ghost width reservation, rainbow oklch longer-hue gradient flow with seamless -300% loop, rotational / perspective tilt driven by 4 quadrant sibling zones, smoke / dissolve particle per-letter drift, fire / heat wave upward text-shadow + skew haze, text-shadow direction driven by cursor vector math, marquee text speed-up on hover with WAAPI updatePlaybackRate, duotone / riso split with two attr(data-text) clones + complementary inset() clips, tooltip reveal with attr(data-tip) + intent delay + aria-describedby, SVG distorted wave / ripple via feTurbulence + feDisplacementMap + SMIL, mask clip-path reveal with diagonal wipe polygon + circle bloom + 12-point blinds. 25 truly Pure CSS + 5 with a tiny optional vanilla JS snippet (spotlight cursor, magnetic cursor, scramble ticker, text-shadow vector, marquee playback rate). Every text-hover effect is scoped under a unique .cth-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, mirrors every :hover with :focus-visible for keyboard users (WCAG 2.1.1), and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
5 CSS Variable Dark Mode Systems
5 hand-coded CSS dark-mode implementations built on the 5-variable custom-property pattern (--bg, --surface, --text, --border, --accent). Pure CSS OS sync with prefers-color-scheme, data-theme toggle + localStorage, anti-FOUC blocking head script, 3-way System/Light/Dark switcher, and the native light-dark() function. Zero-flicker, WCAG-AA accessible, framework-agnostic, MIT licensed.