transluscency?

[potion]

Is there such a thing as transluscency? Can I create an image with a transluscent shadow, such that whatever lies behind me image in a web page -- such as a background image or color -- will actually show through the gradient of the shadow? This might be an impossibility as far as I know.

In other words, it seems like it's necessary to commit to a particular background for a "transparent" image, whether that background is black, orange, white, etc. But no matter what you do, there is always a definite, specific place where the exported image ends and the stuff around it begins.

Just to put it in concrete terms, if you export some text with a white shadow, it will never be possible to actually see through the outlying area of the shadow, once you export. The outlying area of the shadow is transluscent in the vector-based program, but can never be transluscent, strictly speaking, once you export, correct? If you export the image while it's on a white background, and then post it online on a white background, there will be the appearance of transluscency, but real transluscency is impossible to achieve. This is a non-trivial matter when trying to apply a "transparent" image with a shadow over top of a non-uniform background. For example, if you have a banner that is partly in white space and partly over top of a background image.

[dduran]

You can export it as a transparent PNG file. I think thats the effect your looking for.

Here's and example.

[The Alien]

Export your image as a .png (true color + alpha) and it should be transparent.
In IE, you need to additionally apply a style to the img tag:

<img src="" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='whatever.png', enabled='true')" />

Replace the whatever.png by your source

[maak]

Alien,

this piece of code is no longer needed in IE7, right?


maak.

[amoore]

I think you're correct that you have to commit to a background. That's because the shadow itself is a bitmap.

What I do in these situations is take a screen capture of the target background (or use the original file, if it makes sense). In Xara, create a layer just for the background and lock it (make it "not editable"). Make sure the background in Xara is the same size as it will be in the destination.

On another layer, position the image relative to the background and export. The image will anti-alias to the background, whatever it is.

[Soquili]

Hi Potion,

Using the Shadow Tool does create a bitmap shadow as Allison said.

If you create your shadow using vector shapes then export as a png with alpha transparency you may be able to do what you want.

The attached is a simple example. I created the H like shape from a rectangle converted to editable shape. I cloned the shape then used the skew and sizing handles to move it look like a shadow. I added some feathering and transparency.

The shapes were on a white background when I exported to png format with alpha transparency. It worked well on a test web page using several background images.

[potion]

If Soquili's PNG is any indication, there is indeed such a thing as translucensy in Firefox, but not in IE6:

http://webcommunicate.net/translucency_test.html

That's with Alien's code included.

I think I may have to take the amoore approach, which I was hoping to avoid. It will be painstaking. But I guess that's just a limitation of how the image formats work, or a limitation of how IE6 works.

Thanks everyone.

[jedfrechette]

But I guess that's just a limitation of how the image formats work, or a limitation of how IE6 works.

Its a limitation of IE. Virtually all other browsers have implemented PNG alpha transparency correctly for years. If you do a web search for "png transparency ie" you'll get plenty of hits describing how to work around it.

Although as maak commented isn't this supposed to finally be fixed in IE7? Its only taken 11 years.

[Hwy101]

Its a limitation of IE. Virtually all other browsers have implemented PNG alpha transparency correctly for years. If you do a web search for "png transparency ie" you'll get plenty of hits describing how to work around it.

Although as maak commented isn't this supposed to finally be fixed in IE7? Its only taken 11 years.

Part of why I started using FireFox!
(quicker Fixes & Implementation of Standards) ;-^) <--We need Smiley for

[Scotty]

IE verson 7 seems to show webpage png great. Upgrade to IE7 and all problems solved and Mr. Gates happy.
Jim