buttons
By using partially transparent images, it's easy to create re-usable
graphics whose colours can be modified using CSS; fill areas of the
image with transparency, and then dynamically dictate their colour
using the image's background-color property.
Some examples, in a rainbow-tinted gallery of experimentation...
gif with transparency
A technique recently demonstrated at Simplebits; use the background colour of the containing box to mask any invisible areas.
inverted gif
Using the image's background-color as the effective
foreground colour.
png with alpha transparency
Things get a little more interesting when we begin to make use of PNG's wonderful variable alpha; in essence, we can create greyscale images including low-opacity dark and light regions, which shade and highlight the background colour correspondingly.
Note that this will not work in Internet Explorer, due to its inexplicable lack of support for PNG transparency. IE users will instead see the plain greyscale image.
Using Photoshop, any areas with opacity below 100% that are backed by transparency will remain as such by saving as PNG-24.
png aqua buttons with alpha
Applying the concept to the ubiquitous aqua buttons, we can achieve some rather more interesting results.
The rollover effect is achieved by using the DOM to set the onmouseover
event handler of the <IMG> tags. The color property
is used as an ever-so-slightly kludgy method of storing the original background,
and the background-color is set to white.
If IE supported this, the web would be a better place.
inline elements
Finally, we abandon graphics entirely, with a shaded button constructed from an
<A> tag with border-style: outset, embedded
in a black-bordered <SPAN>.
Again, rollovers were created using the DOM, this time setting
border-style: inset. Text-tastic.