Question

I’m designing a website that is going to have multiple nested divs for the side menu. Each div’s background is a darker shade of blue than that of the div which surrounds it.

I’d like for each div to have a gradient effect in the background, where it goes from a slightly darker blue to the background color of the div.

I know CSS3 has built-in support for gradients, but older browsers wouldn’t be able to display them, so that’s not an option. Instead, what I’ve been doing is creating a PNG background for each individual div.

However, this PNG background option is not super sustainable. If I decide that I want a slightly different color as the background, I have to go create a new PNG with that new color. Annoying.

I wish that I could use a single semi-transparent grey to transparent PNG image in ALL of the divs so that I could freely change the background colors. But the problem with using such a PNG is that it kind of desaturates and dulls rather than darkens…

Is there any way to manipulate such a PNG to darken whatever it overlays WITHOUT desaturating???

Answer 1

There you go:

your-element{
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  background-image:    -moz-linear-gradient(top, #444444, #999999);
  background-image:     -ms-linear-gradient(top, #444444, #999999);
  background-image:      -o-linear-gradient(top, #444444, #999999);
  background-image:         linear-gradient(to bottom, #444444, #999999);
}

and your rule for IE:

your-element{
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490);
        zoom: 1;
}

Easy-peasy cross-browser compatible for say 99% of your browsers.