CSS & HTML
Parallax Gallery With CSS Scroll-Driven Animations
Layered parallax and a scroll-reveal gallery built with animation-timeline, scroll() and view(). No Flash, no jQuery, with accessible fallbacks.
Tag: CSS
CSS & HTML
jQuery Effects for Designers, Rebuilt with Modern CSS and JavaScript
Ten classic jQuery designer effects rebuilt with details, CSS transitions, the Web Animations API and View Transitions, with tested code and support…
CSS & HTML
Chroma Wallpapers: Make Glowing Gradient Wallpapers with CSS and SVG
Recreate the classic Chroma wallpaper look with modern CSS and SVG: mesh-style OKLCH gradients, glowing line ribbons, subtle animation and 4K export.
CSS & HTML
CSS Gradient Text Effect
Create gradient headings with three lines of CSS: background-clip text, OKLCH colour blending, animation with @property, safe fallbacks and accessibility checks.
Typography
Typographic Contrast and Flow in Modern CSS
Seven ways to build typographic contrast and reading flow, rewritten with fluid type, variable fonts, OKLCH color and text-wrap, plus copyable CSS.
UI Components
CSS Expandable Box: Fluid Cards That Grow With Their Content
The classic all-expandable box rebuilt with modern CSS: em-based sizing, shadows, native resize and border-image frames, with no extra markup or sliced…
UI Components
Advanced CSS Menu: Free-Positioned Links with Modern CSS
Rebuild the classic image-based advanced CSS menu with real text, custom-property coordinates, container queries, matching keyboard states and anchor-positioned captions.
CSS & HTML
Design a Watercolor Effect Menu With CSS and SVG Filters
Recreate the hand-painted watercolor menu in pure CSS: a torn paper card, handwritten links and a bleeding wash on hover, built with…
CSS & HTML
Deep and Moody: Dark, Atmospheric Web Design with CSS
Recreate the classic moody Photoshop look in CSS with color-scheme, light-dark(), layered radial gradients, blend modes, a vignette and SVG grain.
UI Components
Mac-Style Cover Flow Photo Gallery with CSS Scroll Snap
Recreate the classic Apple cover flow gallery with modern CSS: scroll snap, 3D perspective and a scroll-driven tilt animation, with accessible fallbacks…
Typography
Simple Double Quotes with CSS
Style blockquotes with real typographic double quotes using the CSS quotes property and pseudo-elements, plus rule, card and accessible pull quote variations.
CSS & HTML
Style Your Ordered List With CSS Counters and ::marker
Restyle the numbers in an ordered list with ::marker, CSS counters, counters() and @counter-style, without extra markup and without losing accessibility.