CSS-Tricks·51wRevisiting Image Maps
The post explores the use of image maps, an older web design tool, and discusses their advantages, challenges, and alternatives. It highlights a project for Mike Worth that required blending expressive '90s design with modern techniques. While discovering image maps weren't the right fit, the effort led to finding modern solutions by leveraging SVG and anchoring paths for clickable areas, emphasizing accessibility and responsiveness.
CSS-Tricks·1yCSS Carousels
Chrome 135 introduces new features for creating carousel UI patterns, including scroll buttons and scroll markers as defined in the CSS Overflow Module Level 5 specification. This post provides step-by-step notes on implementing these features using CSS Grid and Scroll Snapping. It also covers adding scroll buttons and markers, their styling using pseudo-elements, and the functionality they bring for free, such as improved user experience and accessibility.
CSS-Tricks·1yUsing CSS backdrop-filter for UI Effects
Learn how to use the CSS backdrop-filter property to create sophisticated UI effects. This guide covers layering backdrop filters, combining them with other CSS effects, and crafting designs with various filters such as blur, brightness, and contrast. Examples include applying these techniques to textured backdrops and integrating them with CSS properties like mask and mix-blend-mode.