Drop shadows in site layout

programming web dev
1

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.

2

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.

3

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!
4

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.