hello people,
i have a css gradient background, and boxes with curv edges and shadows. like in macromedia.com,
i made the graphic in phtoshop, and i save them as PNG 24, becuse it supports transparency. This is becuse i do not have a background yet i want to have the shadow of the box. But when i incert the pic in my html page the transparnt area becomes white. how can i do this?
tnx
hello people,
i have a css gradient background, and boxes with curv edges and shadows. like in macromedia.com,
i made the graphic in phtoshop, and i save them as PNG 24, becuse it supports transparency. This is becuse i do not have a background yet i want to have the shadow of the box. But when i incert the pic in my html page the transparnt area becomes white. how can i do this?tnx
That's because, thougn PNGs suport transparency, web pages generally don't. So it defaults the background color to white. As long as the area that is transparent in the PNG remains transarent, the HTML page will read it as being white (or the default bg color).
Depending on what version of Photoshop you're using, you can open the gradient (save it as it's own image first) you're using and the PNG. Then simply resize the gradient file to match whatever image you are using. Then save the resized gradient as a PNG image. Now copy-paste the graphic onto the gradient PNG you just saved. The transparent part should allow the gradient underneath it to show through. Then soften the image a little to blend the images together a little, and then save the image.
Hope this helps!
hello people,
i have a css gradient background, and boxes with curv edges and shadows. like in macromedia.com,
i made the graphic in phtoshop, and i save them as PNG 24, becuse it supports transparency. This is becuse i do not have a background yet i want to have the shadow of the box. But when i incert the pic in my html page the transparnt area becomes white. how can i do this?tnx
Try using fireworks mx. You can make your background and design it to be radiant or wwhatever you want it to be r just a plain image and set the Transparency in the Optimize Menu on the right.
i'll try it our, but i thought this was actually done using css. I mean the whole tables, shadows and so on...
Tnx for help ...
That's because, thougn PNGs suport transparency, web pages generally don't.
What may have happened is that you may have used the alpha transparency feature, which IE doesn't support. Normal transparency is supported in most relatively recent browsers (IE5+).
It's all down to the way you export it from your graphics program. Try experimenting with a few different options on your export screen.
as we all know explorer dont support PNg transperacy.
Firefox and other browsers handle it yust fine.
If you realy want good transparency you need to use png since gif is kinda sucky that way.
http://www.koivi.com/ie-png-transparency/
This site has a guide to fix this problem with explorer if you want.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.