CSS goodness
While browsing Idiot on a Stick which I found yesterday, I stumbled across a nice CSS snippet at the IOAS forums. It’s a transparency effect that works on more browsers than just IE (it has the alpha filter):
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: .5;
-khtml-opacity: .5;
opacity: .5;
I tried it on the menu here but noticed it slows down the scrolling noticeably. So, I’m not implementing it here but on the up-coming site about Amadeus
I also found a way (which was adapted from this) to make rounded corners in pure CSS, without images. Can’t remember if it was also via IOAS…
I’m making use of opacity at my site, however, I found that I could use semi-transparent PNG files that most browsers interpret and only use the opacity filter settings for IE. If you browse to my site via FireFox, Opera, or Safari, they ignore the opacity filter settings in my CSS while displaying the PNG’s as semi-transparent. IE on the other hand can’t display semi-transparent PNG’s, so I have it set to load the opacity filter.
For some strange reason the opacity code I posted doesn’t work on IE anymore. It might be because of the DTD declaration which stops things like scrollbar colours from working…
I probably wouldn’t even know *how* to make semitransparent png files But thanks for the tip