-
-
2. Re: Drop Shadow
pixlor Aug 26, 2010 6:50 PM (in response to quality11)Your shadow looks grainy because your gif only has a few greys in its color palette.
Here are a couple of approaches you could try:
1) Make the shadow out a separate image with its own color palette. You can apply that as a background to a containing div that's just a bit bigger than the rest of your content.
2) Make separate side and bottom shadow images and place them in individual divs.
-
3. Re: Drop Shadow
quality11 Aug 26, 2010 6:57 PM (in response to pixlor)So you're saying not to use this method with the gif and the CSS? Can't I do it this way since I already set it up and fix the gif?
-
4. Re: Drop Shadow
quality11 Aug 26, 2010 6:58 PM (in response to quality11)#bg_shadow { width:1026px; background:url(../images/shadow.gif) no-repeat bottom right; margin:30px auto 0px auto; Using the gif (link in previouse post). -
5. Re: Drop Shadow
quality11 Aug 26, 2010 6:59 PM (in response to quality11)If your first answer is saying to do that, that's what I'm asking. I don't know how to create the shadow. I've been trying and it won't work. What do I do step by step to recreate that giv only darker and less grainy?
-
6. Re: Drop Shadow
quality11 Aug 26, 2010 7:17 PM (in response to pixlor)Pixlor,
I think I'm doing #1 already. What I need help with is how to create the
gif in FW. It needs to be darker and I'm not sure how you use it's own
color pallette. Need step by step help. HELP!
-
7. Re: Drop Shadow
pixlor Aug 26, 2010 9:56 PM (in response to quality11)Oh! Right. Okay... Sorry, it's been a long week
Ack! You have a 7000-pixel high image?!? Ouch.
Don't start with that gif and try to darken it. Start with a brand new image. Also, you might be better off with a jpg or png instead of a gif.
Like this:
Layer 1 has your original gif.
Layer 2 is a rectangle with a dark drop shadow.
Layer 3 is what you get if you export layer 2 as a PNG24; see how the shadow colors are much smoother?
(It's a FW png, and it's the width of your image, just that the forum resized it to display.)
-
8. Re: Drop Shadow
quality11 Aug 27, 2010 6:38 AM (in response to pixlor)I'm trying yours on for size and the white (on the shadow.png) is still
showing in the background.
-
9. Re: Drop Shadow
quality11 Aug 27, 2010 7:12 AM (in response to quality11)I think I got it. I recreated yours and used transparent bg. Dah. Thanks Pixlor!!
-
10. Re: Drop Shadow
quality11 Aug 27, 2010 4:13 PM (in response to quality11)Problem. Forgot IE 5 and 6 don't recognize transparency so the white is showing in the bg of the shadow.png. Any suggestions for IE 5 and 6? I still like to code for them. I know some people don't.
-
11. Re: Drop Shadow
pixlor Aug 27, 2010 7:23 PM (in response to quality11)PNG8 and tweak the color palette (you may need to add colors), since Fireworks doesn't always include everything you have, even if you only have 256! It won't be perfect for the older browsers, but they'll be a smaller slice of your market pie.
http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
-
12. Re: Drop Shadow
quality11 Aug 28, 2010 11:32 AM (in response to pixlor)Thanks for that article. I love sitepoint. Unfortunately, that doesn't work. The bg is showing through as white now on even the other browsers: Chrome, FF, etc.
-
13. Re: Drop Shadow
quality11 Aug 28, 2010 11:43 AM (in response to quality11)What works is what my colleague did with this site here (see drop shadow). That's what I based my original CSS/shadow.gif on. I used his gif file. It looks good in all the browsers (the shadow anyone). The gif file just needs to be darker. That's what I've been trying to do the whole time -- recreate what he did but make the file darker. I'm not sure how he created it though (here's his gif file and I'm not sure why he made it so huge).
-
14. Re: Drop Shadow
pixlor Aug 28, 2010 10:33 PM (in response to quality11)Gah! It IS huge. (It doesn't need to be, either. You can use a short, wide slice and repeat it in the y direction. Then have a separate div with the bottom shadow just underneath. So many fewer bits to send and load! But anyway...)
Try this...make a PNG24 (yes, non-transparent) image with the darkness you want. Then take the pencil tool and paint the corners that need to be transparent a bright pink or green or something. Then, export THAT as a transparent gif with the pink/green/whatever as the transparent color.
-
15. Re: Drop Shadow
quality11 Aug 29, 2010 4:11 AM (in response to pixlor)Sorry...I'm not following you at all.
-
16. Re: Drop Shadow
pixlor Aug 29, 2010 10:32 AM (in response to quality11)The reason you can't just darken his image is that, being very light, there are probably only a few colors in it. When you darken it, you don't have a gradient between the darker grey and white, you have maybe just 3 or 4 dark greys. Darkening his image is not a useful way to go.
- Start with a new image.
- Make a FW png document with a rectangle and a drop shadow.
- Export a non-transparent PNG24 image from the FW document.
- Open the non-transparent PNG24.
- Using the pencil tool (set to 1-pixel hard so you don't get any aliasing), draw over the corner pixels that you want to be transparent, using a bright color.
- Use Image Preview to set up export as a GIF and use the eye-dropper to set the transparent color to your bright corner color.
- Export as a GIF. Your corners will be transparent.
Now then. Your friend is using a giant image because he doesn't know how to do things correctly. The better way is to use a slice across the image with just the right-hand side of the shadow behind most of the content and set it to repeat-y. Then, stack that over a new, separate div that only contains the bottom shadow.
<div id="outerbox"> (maybe this is 805 pixels wide, with a 1-, 4-, or 10-pixel high repeating bg)
<div id="content"> (maybe this is 800 pixels wide, since it doesn't have the shadow)
Your stuff goes here
</div>
</div>
<div id="bottomshadow> (maybe this is 805 pixels wide and 5 pixels high)


