Occasionally we’ll be publishing polls on how best to represent ideas within CSS syntax. What we need here is something that’s
- easy to understand
- as much as possible, in the spirit of standard webpage CSS
- what someone who knows basic CSS would expect
Here’s our first question. In standard Metacity themes, you can include pixmaps. These pixmaps can then be recoloured: in other words, they are set to greyscale, and then the hue is modified to match the requested colour. This means that a pixmap theme can match the system colour scheme. Crux works like this.
How should we best express this in CSS? Here are two options, but feel free to present your own ideas. Our choice may be constrained by what libcroco is capable of, but we can also work around that in various ways.
Option A:
button.close {
background-image: -cowbell-recolor(url(“close.png”), green);
}
Option B:
button.close {
background-image: url(“close.png”);
-cowbell-background-recolor: green;
}
What do you think?
The latter (Option B) is much more favourable to me! It keeps it concise and non-nested. Good work!
Just simply background: color url(“image.png”);
In a web browser an alpha channel background image will show over the background colour. So convert the images to fully white images with their alpha channel set to the greyscale.
@Dannii:
I think that’s a perfect solution! Thank you!
I don’t think alpha-masking the background-colour would really work as expected, although I don’t actually have any hard evidence to that effect. I seem to recall that blending white (or black, or grey) with a colour is different from tinting to a colour.
I’d like to see a gradient of opaque white -> transparent -> opaque black composited over, say, bright red, compared to a white -> black gradient recoloured to red. If they look the same, or at least fairly similar, then hooray, problem solved! If they look sufficiently different, Cowbell probably needs a different solution.
For what it’s worth, I vote for a -cowbell-recolour() function; if only so that theme authors can recolour a foreground image with an alpha channel, and put it on top of a different background colour. 🙂
Option B
For exactly the same reasons Matthew states.