Building Flexible Components With Transparency
Publikováno: 12.1.2021
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 …
The post Building Flexible Components With Transparency appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
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.