Gif with transparent BG and Drop Shadow

Status
Not open for further replies.
jerxs

jerxs

New member
Jun 24, 2006
1,806
24
0
North East PA
Im trying to save a slice from a layout that has a drop shadow as a gif and just cant get it to save right, I also tried saving the slice as a .png and it looks beautiful in FireFox, but IE forget it! Ive looked into Onion skinning divs and a few other options but none will work.

Is there any way you can save a .gif with a transparent bg, yet preserving its drop shadow?

TY Jer
 


jerxs said:
Im trying to save a slice from a layout that has a drop shadow as a gif and just cant get it to save right, I also tried saving the slice as a .png and it looks beautiful in FireFox, but IE forget it! Ive looked into Onion skinning divs and a few other options but none will work.

Is there any way you can save a .gif with a transparent bg, yet preserving its drop shadow?

TY Jer
Click to expand...

Are you using PhotoShop to do this? I think I get an idea of what you mean, you want to have a solid drop shadow with a transparent background? why not just use photoshop to create your drop shadow and make the background of that image the same color as the background where the image will be located, this should give the illusion of your image having transparency while keeping the drop shadow.

Let me know if you need a little tutorial, actually heck I'm board right now if you cant figure it out let me know where you want the image and what type of drop shadow and I'll create one for ya haha.
 
Make sure when you create the transparent gif that in the options you set the background color to the same color as the background on your webpage.
 
smash said:
Make sure when you create the transparent gif that in the options you set the background color to the same color as the background on your webpage.
Click to expand...

Yeah an easy way to do it would simply be to crop a section on your page where you'll be placing the image, from there just create the drop shadow using photoshop and toss the image up on your site, boom done lol.

Assuming your using PhotoShop, you can also play around with the multiply filter, its a handy little bugger for things like this.
 
OK, maybe Im not understanding you, but I dont think it will work, the image will be tiled on a y axis through different elements of my design, it needs to be truly transparent yet still hold its drop shadow through different design elements... Ill show you, The theme I am working on will be released as a free theme when done anyway, so there shouldnt be a problem...

the left sidebar, it will overlay two different elements of the design, so the tranparency has to be there, yet the drop shadow also needs to be there....

What you mentioned is basically the onion method? two images, three layers /divs??????

Heres a screen shot...

http://gobassfishing.net/trout.jpg
 
like I saved the same slice as a .png and it works A1 perfect in FF, but fucking explorer adds shades of grey to the transparent areas of the slice..... Bu tim thinking .png and .gif both support transparency, so why even when adding custom colors does the .gif not work?
 
Alright so it works with png in firefox? Then you can make it work in IE too.
So do the css like this:

Code: 
#div  {
background-image: url(image.png);
_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='image.png');
}
 
thanks for the replys, I couldnt get the above to work, but did some creative slicing and css and got it looking pretty decent, only had to sacrafice one small design element.....

Thje above is totally new to me..... Im going to have to study up on it..

Jer
 
jerxs said:
like I saved the same slice as a .png and it works A1 perfect in FF, but fucking explorer adds shades of grey to the transparent areas of the slice..... Bu tim thinking .png and .gif both support transparency, so why even when adding custom colors does the .gif not work?
Click to expand...
GIFs can't handle alpha transparency (meaning it's it's either 100% transparent or 0%, no in between)

if you want to get PNGs to work in IE6 use this hack: PNG in Internet Explorer: The Solution
it's very simple and I've tested it on multiple sites so trust me it works
 
Jucify's method seemed to work for me to some extent, but it skewed my image all to hell. I'm trying to do some css magic to accomplish a certain task.

Take a look at this method: The Easiest Way to PNG support in IE6. It might work for you. Works with background images as well. I'm having problems with it, but looks like some are having success.
 
Status
Not open for further replies.
Top Bottom
Back