CSS & HTML
5 Simple but Useful CSS Properties Every Designer Should Know
aspect-ratio, gap, clamp(), accent-color and text-wrap: balance each replace a classic CSS hack. Copy-ready code, plus what to check before you ship.
Tag: CSS
CSS & HTML
CSS Design Out Of The Box: Break Free of the Rectangle
Slanted heroes, overlapping cards, text that wraps around circles and full-bleed bands: modern CSS techniques for layouts that escape the rectangle, with…
CSS & HTML
Maximize the Use of Hover in Modern CSS
Use hover to beautify links, hide clutter and show extra information, with matching focus states, touch-device fallbacks and reduced-motion support, all in…
Design
Minimal Website Design: 10 Examples and the CSS Behind Them
Ten live minimal websites across portfolios, blogs, products and shops, each with one technique you can copy and the modern CSS demo…
CSS & HTML
Sequential Lists Without jQuery: CSS Counters and sibling-index()
Replace the old jQuery sequential list with CSS counters for numbering, sibling-index() for staggered animation, and IntersectionObserver for scroll triggers.
CSS & HTML
Photo Strip Effect in CSS (No Photoshop Required)
Recreate the classic curved photo film strip with modern CSS: SVG clip-paths, drop-shadow, perspective transforms and gradient highlights, in a responsive component.
Layout
How to Make a Full-Width CSS Background That Fits Any Screen
Use background-size: cover, svh heights, focal points and matched edge colours to build large website backgrounds that never show seams, crop badly…
Design
Large Background Websites: 13 Examples and How to Build One
Thirteen real websites with full-screen photo, illustration and video backgrounds, and the modern code to build one that is fast, readable and…
CSS & HTML
JavaScript in Modern Web Design: What the Browser Now Does for You
Lightboxes, accordions, tooltips, carousels and validation no longer need plugins. Here is what replaces each one, with code, and where JavaScript still…
Design
Single-Page Portfolio Sites: 8 Examples and How to Build One
Eight live single-page portfolios worth studying, and the structure, CSS scrolling and navigation patterns that make a one-page site work.
Design
Web Design Trends With Live Examples
Ten web design trends with real, live examples and the modern CSS behind them, from bento grids and light-dark() to container queries,…
CSS & HTML
CSS Decorative Image Gallery: Frames, Tape and Gloss
Style photo galleries with polaroid cards, tape, metallic frames, gloss and masked edges using plain CSS and a clean figure and figcaption…