Building Flexible Components With Transparency
Good thinking from Paul Herbert on the Cloudfour blog about colorizing a component. You might look at a design comp and see a card component with a header background of #dddddd, content background of #ffffff, on an overall background of #eeeeee. OK, easy enough. But what if the overall background becomes #dddddd? Now your header looks lost within it.
That darker header? Design-wise, it’s not being exactly #dddddd that’s important; it’s about looking slightly darker than the background. When that’s the case, a background of, say rgba(0, 0, 0, 0.135) is more resiliant.
That will then remain resilient against backgrounds of any kind.
Direct Link to Article — Permalink
The post Building Flexible Components With Transparency appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
