Staggered zigzag layouts usually turn into brittle flexbox hacks that wreck DOM order. Here is how CSS Grid plus a translateY transform gives you a stable waterfall effect, including the gap math and the overflow fix.
A look at the experimental CSS corner-shape property for building folded-corner effects without clip-path polygons or gradient hacks, including how to add the bevel, shape the crease, and fall back gracefully in Firefox and Safari.
A leaner way to build scrollytelling: the scrollsnapchange and scrollsnapchanging events, the CSS and JS behind a Mother’s Day 2026 experiment, and where browser support stands.
Scroll-driven animation APIs now cover most of what GSAP used to do. This walks through the Vision Pro scroll effect in plain CSS: grid stacking, a sticky container, view-timeline ranges, and where Firefox still leaves you stuck.
Saturation is a correction tool, not a volume knob. How CSS saturate() actually paints, why the order you chain filters in changes the result, and the stacking context backdrop-filter quietly creates.
Notes on using the CSS contrast() filter in WordPress themes: how the RGB math works, why it beats a black overlay on hero images, a 125% hover fix for washed out product cards, and where filters get expensive.
CSS has a hypot() function that does Pythagorean distance math and, unlike pow(), accepts units like px and rem. I cover what it returns, a cursor-proximity example using container style queries, and the edge cases worth knowing.
Fixed-height cards look tidy in a mockup and fall apart when an editor doubles the copy or a translation runs long. I go through what breaks, and how Flexbox and intrinsic sizing hold the same grid together without hard-coded heights.
Appending text to a container is the easy part. This post covers the scroll flag that stops snap-back, batching renders to keep layout shift down, ARIA live regions for screen readers, and cleaning up after a broken stream.
Notes on the newer platform features: HTML-in-Canvas behind a Chrome flag, the CSS content property for swapping an image source, sizes=auto for lazy-loaded images, and why e-ink browsers still lag behind.