Composable Scroll-Aware Edge Fades
A set of composable CSS utilities for creating dynamic, scroll-aware edge fades with smooth eased gradients.
CSS
Cascading Style Sheets — the styling language of the web, including layout systems, selectors, color functions, animations, and the evolution of CSS specifications.
Reading List
cssQuake: Bringing the Classic 3D Shooter to the Browser
538
A browser-based recreation of Quake using the PolyCSS renderer with full multiplayer and debug features.
Native Accessibility: Building Self-Correcting Themes with CSS contrast-color()
The CSS contrast-color() function provides a native, performant way to automate text accessibility by letting the browser calculate the best contrast color at runtime.
Mastering CSS-Native Parallax
145
Create performant, JavaScript-free parallax effects using CSS Scroll-driven animations and view timelines.
Beyond Tailwind: Structuring Modern Vanilla CSS
697
The author is moving from Tailwind to vanilla CSS to leverage modern web standards and gain more creative control over their site's architecture.
Multi-stroke text effect in CSS
Creating complex retro text outlines by stacking CSS elements with varying stroke widths, despite performance limitations.
Modern CSS: Replacing Old Hacks with Native Power
708
Native CSS now provides clean, performant replacements for the complex hacks, JavaScript libraries, and preprocessors that were once essential for web development.
Grid Lanes: Native Masonry Layouts with CSS Grid
754
Native masonry arrives in CSS: Grid Lanes uses standard Grid syntax to pack items into flexible lanes, with automatic orientation and tunable placement sensitivity.
Modern CSS, No Build: How 37signals Ships Complex Apps with Vanilla Styles
126
Modern CSS is powerful enough to build complex, maintainable apps without Tailwind or preprocessors—keep it simple and semantic.
Drunk CSS: An Empathy Nudge, Not Accessibility
A deliberately inaccessible “Drunk” CSS mode is an empathy nudge—not a substitute—for real accessibility testing with disabled users.
A Classless CSS Experiment: Components via Custom Tags and Attributes
A classless site using custom tags and attributes delivers lean, accessible CSS—but demands more thoughtful authorship and isn’t universally practical.
Liquid Glass on the Web with SVG Displacement Maps
495
Use physics-driven SVG displacement maps and a rim-light overlay to approximate Apple’s Liquid Glass in Chrome as a backdrop-filter.