Archive by Author

Solved With CSS! Dropdown Menus

A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites.

Let’s see if we can make one of these menus with CSS alone.

The post Solved With CSS! Dropdown Menus appeared first on CSS-Tricks.

Solved With CSS! Colorizing SVG Backgrounds

CSS is getting increasingly powerful, and with features like CSS grid and custom properties (also known as CSS variables), we’re seeing some really creative solutions emerging. The possibilities are still being explored on what CSS can do to make writing UI’s simpler, and that’s exciting!

One of those is now one of my favorite CSS features: filters. Let’s look at how we can use filters to solve a problem you may have encountered when working with SVG as a …

The post Solved With CSS! Colorizing SVG Backgrounds appeared first on CSS-Tricks.

The Contrast Swap Technique: Improved Image Performance with CSS Filters

With CSS filter effects and blend modes, we can now leverage various techniques for styling images directly in the browser. However, creating aesthetic theming isn’t all that filter effects are good for. You can use filters to indicate hover state, hide passwords, and now—for web performance.

While playing with profiling performance wins of using blend modes for duotone image effects (I’ll write up an article on this soon), I discovered something even more exciting. A major image optimization win! …


The Contrast Swap Technique: Improved Image Performance with CSS Filters is a post from CSS-Tricks