January 2026 wallpapers: a clean desktop to start the year
A new year is a decent excuse to refactor your desktop. Three picks from the January 2026 wallpaper collection, plus the CSS I use when an image like that becomes a hero background.
Tag: Block Styles
CSS container queries after size: scroll-state and style
Container queries began as a way to check a parent’s width. They now read scroll state, custom property values and anchor flips, which removes a lot of the JavaScript that used to handle sticky headers and tooltips.
Ambient animations that don’t tank your LCP
A client’s landing page felt dead and my first instinct was to import GSAP. Here is what I did instead: staggered CSS timings on a few SVG groups, transforms only, and a reduced-motion check.
Component variants beat a pile of CSS variables
Twenty near-identical buttons in one design file cost me three hours per border-radius tweak. Component variants in Penpot fixed that, and DTCG tokens made the handoff to CSS boring, which is exactly what you want.
Animate SVG symbols with CSS custom properties
Seven avatars from one SVG symbol, each with its own animation. The CSS cascade dies at the Shadow DOM, but custom properties pass straight through it, which is how one symbol ends up blinking and tapping at a different rate per instance.
Winter wallpapers without the performance hit
A client dropped 8MB 4K PNGs into the media library for holiday backgrounds and the LCP went red within the hour. Here is what fixed it: a 200KB cap on hero images, one file per breakpoint, and WebP.
Adaptive SVGs with symbols instead of duplicate files
A hero illustration that looked right at 16:9 and collapsed on mobile. Instead of shipping two SVG files, I moved the artwork into a hidden symbol library and referenced it from two wrappers with different viewBox values, then animated the use elements.
Using CSS cascade layers on a legacy stylesheet
I inherited a landing page with 450 lines of IDs, duplicate selectors and !important flags everywhere. Notes on moving it onto cascade layers: the five-layer order I settled on, where media queries belong, and why !important inverts layer priority.
The SVG animation workflow that fixed my stiff UI
I spent three hours hand-coding cubic-bezier keyframes for a WooCommerce build and the bounce still felt stiff. A spring-based SVG animation workflow with SMIL exports got it right and kept the animation inside the asset.
Toon text typography in CSS instead of 4MB PNGs
A client was shipping a 4MB transparent PNG for every header to get a 1950s cartoon look, which killed load time and left the page with no real headings. Layered text-shadows, paint-order and a small jiggle animation do the same job in CSS.