Building Flexible Components With Transparency

Chris Coyier on Jan 12, 2021

Good thinking from Paul Hebert 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.

Comments

Robs

# January 21, 2021

Nice! You could also move more things to variables if you wanted to, say, have a lighter panel header background in “dark mode”:

:root {
  --panel-red: 0;
  --panel-blue: 0;
  --panel-green: 0;
  --panel-color: rgba(
    var(--panel-red),
    var(--panel-green),
    var(--panel-blue),
    0.135
  );
  --panel-border-width: 0.1em;
  --panel-padding: 0.75em;
}
@media (prefers-color-scheme: dark) {
  :root {
    --panel-red: 255;
    --panel-blue: 255;
    --panel-green: 255;
  }
}

Comments

Leave a Reply Cancel reply