Friday, August 7, 2009

Transparency with CSS and GWT

It's simple to make transparent elements in HTML. Just use CSS. Even IE6 supports it.

Say we want an image to have 25% transparency...

The standard CSS property is

opacity: 0.25;

but IE and some older browsers have different ways of specifying it, so you probably want to use them all to cover your bases

opacity: 0.25; //css standard
filter:alpha(opacity=25); //ie (note that 50% is 25 here, not .25)
-moz-opacity:0.25; //very old mozilla/netscape browsers
-khtml-opacity: 0.25; //very old safari browsers

Here is what it might look like in GWT

public void setOpacity(Element element, double opacity) {
if (opacity > .995) {
element.getStyle().setProperty("opacity", "");
element.getStyle().setProperty("filter", "");
element.getStyle().setProperty("-moz-opacity", "");
element.getStyle().setProperty("-khtml-opacity", "");
} else {
String s = Integer.toString((int) Math.round(opacity * 100));
String sDecimal = (s.length() == 1 ? ".0" : ".") + s;
element.getStyle().setProperty("opacity", sDecimal);
element.getStyle().setProperty("filter", "alpha(opacity=" + s + ")");
element.getStyle().setProperty("-moz-opacity", sDecimal);
element.getStyle().setProperty("-khtml-opacity", sDecimal);
}
}