ui design
All collections tagged with "ui design"
9 CSS 3D Designs
9 hand-coded CSS 3D scenes built with real transforms, perspective, and preserve-3d — iridescent flip cards, a midnight coverflow carousel, kinetic tilt pricing cards, a page-turn flipbook, a Bauhaus drag-cube navigator, a modular synth control panel, a luxury hover-flip product showcase, a 5×5 spinning cube matrix, and a 60-orb DNA double helix. No WebGL, no libraries.
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).
28 CSS Hamburger Menus
28 hand-coded CSS hamburger menus covering the exact patterns SaaS builders, e-commerce teams, mobile-app designers, and marketing sites actually ship: clip-path circle expand, ARIA-audited keyboard-navigable, animated 3-line to X icon morphs, off-canvas drawers with dimmed backdrops, pure CSS checkbox-hack (zero JavaScript), integrated search + social drawers, glassmorphism backdrop-blur overlays, push-canvas content shifts, full-screen mobile takeovers, slide-out sidebars, responsive navbar toggles with media queries, minimalist floating buttons, Tailwind CSS component recipes, Bootstrap 5 navbar toggler setups, WCAG 2.2 AA dialogs with focus trap + Escape, grid-template-rows slide-down dropdowns, mobile bottom nav bars with floating FAB, multi-level accordion nested menus with <details>, flexbox right-aligned patterns, radial ripple expansions, sticky shrinking icons on scroll, neumorphic soft-UI toggles, brutalist bordered icons, and 3D flip canvas transforms. 11 truly Pure CSS + 17 with a tiny optional vanilla JS snippet + 1 Tailwind + 1 Bootstrap 5 wiring. Every menu is scoped under a unique .chm-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).
6 CSS Minimalist UI Designs
6 hand-coded CSS minimalist UI screen mocks covering the surfaces minimalist design has to win — a dark SaaS dashboard, a Florentine luxury e-commerce storefront, a brutalist-white creative portfolio, a broadsheet editorial layout, a fintech mobile app inside a realistic phone frame, and a high-impact single-product SaaS landing page. Built on strategic whitespace, crisp typography hierarchy, and disciplined colour systems. Pure CSS plus scoped JS — no UI framework, no images.
8 CSS Navbar Designs
8 hand-coded CSS navbar patterns covering the surfaces every site needs to handle — a responsive hamburger drawer, a mega menu with hover panels, a floating glassmorphism nav, a collapsible vertical sidebar, a sticky scroll-transforming bar, a full-screen overlay menu, a navbar with a dark-mode toggle, and a minimalist navbar with underline hover animations. Pure CSS plus scoped JS — no UI framework, semantic HTML, accessibility-first.
12 CSS Neon Designs
12 hand-coded CSS neon designs covering the full vocabulary of the aesthetic — glowing buttons, retro signage, rotating-border pricing cards, an 80s synthwave scene, futuristic controls, three nav patterns, broken/flickering signs, a cyberpunk palette token showcase, a Tailwind theme.extend neon config, drop-shadow SVG icon glows, an infinite seamless 3D perspective grid, and five rainbow text cycling techniques. Pure CSS plus scoped JS — no images, no SVG filters, every glow is layered shadow.
13 CSS Neumorphism & Soft UI Designs
13 hand-coded CSS neumorphism (soft-UI) widgets — meditation timer, vinyl music player, smart-home panel, button anatomy lab, audio mixing console, form studio, dark teal IoT hub, champagne finance dashboard with animated credit card, ripple-animated calculator, asymmetric weather grid with live clock, pure-CSS form controls showcase, rose parchment profile + testimonial layout, and a dark-mode neon system hub with glowing neumorphism. Fully interactive, palette-scoped, accessible.
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).
17 CSS Side Menu Designs
17 hand-coded CSS side menu designs with live demos — slide-in checkbox-hack drawer, smooth-overlay panel, off-canvas push sidebar, expandable icon-only rail, responsive hidden-to-visible menu, sticky fixed vertical nav, multi-level accordion, full-height flexbox, neumorphic inset, glassmorphism blurred, dark-mode cyberpunk neon, brutalist left-hand border, hamburger checkbox-hack, hover-triggered drawer, collapsible width-transition, CSS-only accordion side navigation, and a macOS Tahoe Liquid Glass sidebar dock that fluidly expands to reveal labels on hover with a sliding specular highlight (Apple iOS 26 / macOS Tahoe aesthetic). 16 Pure CSS + 1 CSS+JS. WCAG 2.2 friendly with prefers-reduced-motion on every animation, MIT licensed, copy-paste ready.
10 CSS Sidebar Navigation Designs
Hand-coded CSS sidebar navigation patterns — collapsible rails, drawer menus with text and icons, nested vertical navigation, sidebar dropdowns, sticky full-height layouts, glassmorphic blur, mobile slide-out overlays, and bottom-pinned profile sidebars. Pure CSS, no framework, copy-paste ready.