Hallo. I would like your opinion on the question: What is a better way of making 50% (70%... 10%... ) transparent elements on the webpage? Using transparent pngs or using the CSS opacity properties? I know that IE6 does not support transparent .PNGs, but some browsers, for example on some mobile phones not support CSS enough. So what is better, and how to make website look perfect on all devices and all browsers?
If you're shooting for the best backwards compatible solution use transparent GIFs. They're supported by all older and modern browsers.
yeah! Like you can make a gradient from 100% to 10% opacity with a gif That is not an option. Gifs can only have some parts with full transparency
Yes, you can make 50% of a GIF transparent, that doesn't mean it has anything to do with gradients. I don't understand what you're trying to do - if you do have to use a gradient, just use the background color for a GIF. In short, the answer is you can't make everything 100% in all browsers. PNGs are great, but older browsers won't support them. I really haven't found a situation yet where I couldn't get a GIF to work.
example: http://demo.pipez.cn/design-site/dc-images/button/menu_sel_back.png this image is partly transparent, and partly has an opacity of 50% or so...
That image example you just posted can easily be made into a gif,and would solve all your problems. The gradient part is not transparent, just the 2 top little corners. I don't understand the problem you are having with GIfs.
Ah, I see what you mean ... I just couldn't understand what you were explaining there. We used to have this problem back in the days when we designed for IE4 and 5. You can either put the texture into the gif, or simply design something else. Today, you have another option - IE6 isn't going to support CSS opacity techniques or PNGs, so you can deliver a different template to non-supportive/older browsers. Personally, I would just change the design so it isn't so browser/version dependent.
Personally i would forget about IE6 with minor issues and only worry about the latest versions of all major browsers being FF, IE, Safari, FF. Unless your stats are telling you otherwise of course. (E.g 10% visitors from IE6) I thought Windows Update automatically updated people from IE 6to IE7 anyways?
40% of all my website visitors are still using IE6, so I always keep an eye on it. In fact, more users still use IE6 than FF.
wd: I heard there was some big update in Februari that was supposed to update the browsers from 6 to 7-- and we looked closely at our stats, and saw little change. I figured this was because those who could upgrade, already had. IE7 doesn't run on anything below Windows XP that I can tell, and FF is not popular enough in my country to count on people using it in place of IE7. rebrain: what itcn says is 99% of the time what you want to do. While PNG does have better compression than gif, it can also handle more colours plus alpha transparency and because of this, unless it's the exact same file saved in both formats, you'll see the PNG is bigger in filesize. With the tab example you gave, what you'd usually do is fake it. Faking is lower filesize, and with a multi-tab menu for example, that's faster loading of the site for most people. You take the transparent image in your image editor and set the texture behind it. This doesn't work when the transparent image needs to move around above the background. In that case, you use a png for modern browsers, and feed IE6 an opaque version (make that tab 100% opaque, using grey-to-white gradient so it otherwise looks the same, and set code as such: ) #element { background: url(transparent.png) 0 0 no-repeat; } * html #element { background: url(nottransparent.gif) 0 0 no-repeat; } Since the second declaration comes afterwards to IE6 (and other browsers including IE7 don't even see it), it will override the first image declaration. If you use PNGfix, the javascript that lets you use png's with alpha trans in IE6, don't tile them (doesn't work) and DON'T use them for menus-- they are often unclickable.