CSS: shades darker and lighter

Question

Hi there

I'm trying to use some sort of "darker than" or "lighter than" tag in my CSS page definitions... Is there any such a thing, or do people have a suggestion of a way that one could do this?

Thanks, jml

Answer 1

Technically, no...

No, you'll have to explicitly declare a color. You could jump into photoshop and copy the hex of your favorite color from the color-palette.

But if you're really smooth, you can...

One other option to simulate shades is to use transparent png files, and setting them as the background image over the top of a background color.

.red       { background-color:red; }
.darkerRed { background:red url("fiftyPercentOpaqueBlack.png"); }

And now for an example...

For example, the .png below is actually solid black, with an opacity of 50% which creates a shade of grey when viewed on top of white, or #ffffff.