So I've been researching and trying to find what the best option is and what works best in all browsers. So the three options I've come up with are Transparent PNG, CSS Opacity, or jQuery fadeTo();.
Any thoughts on what's the best way to go? Thanks!
+1
A:
Any "transition" fading that you are going to do is absolutely going to require JavaScript. So stick with jQuery. If you are needing something to be permanently translucent, then you probably want to avoid JavaScript all together (to please the non JS users).
Now it comes down to implementation.
If you're fading an image into the background, using a shadow on a logo, etc.. go with PNG.
If you're doing anything with text or style (html elements).. go with CSS. This is things like a modal window that is semi-see-through, etc.
rockinthesixstring
2010-10-14 15:50:21
A:
As meder implies it could be different for different appications.
Transparent PNGs will be best for anything that you need a realistic shadow for, or if you need "complicated" transparency - like, for instance, a logo.
CSS transparency should be used for easy/"block" transparency. eg: if you want to make a "popup" window that is slightly transparent. Because the whole block just needs to show some of the background through its fine. It can also be used to animate a fading effect...
But... all animation should use jquery to be honest. You're going to have to use javascript anyway, and things like jquery's fade functions are cross-browser compatible and proven/solid code.
It does just depend on your own specific needs.
Thomas Clayson
2010-10-14 15:53:36
Sounds good. Thanks so much. I've seen quite a few people use a 1px by 1px transparent color png for backgrounds. Rather than that should I use CSS?
Marc
2010-10-14 16:15:18
the reason they will be doing that is because not all colours are "web colours". Its probably a good idea. Some of the HEX codes you will use won't be supported by all browsers and all OSs necessarily. For colour continuity you should probably use a specific colour picture. (in photoshop when you choose a colour theres a little icon that comes up to the right that tells you its not a web colour). In practice it really doesn't matter too much, and where I work we don't do this though, so if you prefer using CSS then that should be fine.
Thomas Clayson
2010-10-15 08:23:26