Drop shadows in site layout

[NeoDreamer]

Say I have a content box over a repeating background. I want the content box to have a drop shadow. How do I go about doing this? If I make the shadow an image, then the shadow will not always match-up with the background if the user contantly changes the size of the browser window.

[norie]

Say I have a content box over a repeating background. I want the content box to have a drop shadow. How do I go about doing this? If I make the shadow an image, then the shadow will not always match-up with the background if the user contantly changes the size of the browser window.


use a semi-transparent png. here's how i load a transparent png into a background:


table#FeaturedCompany{
border: 1px solid #FFF;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='/images/SemiTransparentBG.png'); /*only IE sees this*/
width: 400px;
height: 96px;
margin: 0px auto 0px auto;
}

table#FeaturedCompany[id]{ /*IE ignore this*/
background-image: url(/images/SemiTransparentBG.png);
background-repeat: repeat;
}


just google: transparent png

and you'll get a bunch of articles. You're sure to find the right one.

[fluid_tw0]

trnasparent bgs will slow down the site, play with the css


example:




+---- ... ---+--+
| | | <--- (1)
| +--+
| | | <--- (2)

: : :
' ' '

| | |
+--+- ... ---+--+
| | | |
+--+- ... ---+--+
^ ^ ^.
| '. '.
(3) (4) (5)



(1) : top part of the shadow
image looks like

.
:.
:::.
::::.

code:
<td align="left" valign="bottom"><img src="shadow_top.jpg" /></td>

(2) : right side of the shadow
image looks like

::::.
::::.
::::.
::::.

code:
<td style="background: url(shadow_right.jpg) repeat-y left;">&nbsp;</td>

(3) : left part of the shadow
image looks like

'::::
':::
'::
'

code:
<td align="right" valign="top"><img src="shadow_left.jpg" /></td>

(4) : bottom side of the shadow
image looks like

:::::
:::::
:::::
' '

code:
<td style="background: url(shadow_bottom.jpg) repeat-y left;">&nbsp;</td>

(5) : left part of the shadow
image looks like

::::'
:::'
::'
'

code:
<td align="left" valign="top"><img src="shadow_bottomright.jpg" /></td>



AND DON'T FORGET TO SET CELLS' DIMENSIONS!

[NeoDreamer]

Interesting ASCII art. But that won't help if your background has an intricate pattern. A slight size difference of the browser will make the seems of the shadow show.