asked on

Drop shadow around border

I have a design from a guy who wants a drop shadow around the edge of the site, now its obviously an illusion the background is one color, the inside is another color and it should look like its raised off the surface of the background.

Any help?

Jakob_E

Try these articles on A List Apart

http://www.alistapart.com/articles/cssdropshadows/
http://www.alistapart.com/articles/cssdrop2/
http://www.alistapart.com/articles/onionskin/

Best, Jakob E

vincent_figo

Maybe you could use the outset border style :)

fe:

<div style="border: 5px outset #000000"></div>

By changing the px you will create a bigger outset, by changing the color you can create a realistic effect... :)

iceman19330

ASKER

What about on something like this where I need the drop shadow around the 2nd table. Images look easy, but I cant seem to be able to get the drop shadows to behave.

<html>
<head>
      <title></title>
      <style type="text/css">
      body{font-family:'Helvetica';font-size: 10pt;background:#FEDE58;}
      table{border-collapse:collapse;border:0.2em solid #ccc;}
      td{text-align:center;vertical-align:middle;}
      td td{text-align:left;vertical-align:top;}
</style>
</head>

<body>

<table width="749" height="100%">
<tbody>
<tr>
<td>

<table width="669" height="90%" style="margin:0 auto;">
<tbody>
<tr>
<td>

</td>
</tr>
</tbody>
</table>

</td>
</tr>
</tbody>
</table>

</body>
</html>

soniya

A very easy way to give shadow is as follows:
.main {
      background-color: #E1F7FB;
      border-top-width: 1px;
      border-right-width: 4px;
      border-bottom-width: 4px;
      border-left-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #CCCCCC;
      border-right-color: #CCCCCC;
      border-bottom-color: #CCCCCC;
      border-left-color: #CCCCCC;
}

You can use images for a much realistic shadow effect.
like in this example
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>

<td width="3%" rowspan="5"> </td>
      
<td width="95%"> </td>
      
<td width="2%" rowspan="5"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>

<tr>

<td> </td>
</tr>
</table>

You specify the background using some image of shadow for left and right column. Even using 1 px high image with give good result. It will repeat till the end of the table. You can add as much content in the middle columns, the shadow in the left and right columns will repeat till the end. You can also specifying an image for bottom of the table.

iceman19330

ASKER

What about on this file.
http://elauwit.mccullough-net.com/index2.html

ASKER CERTIFIED SOLUTION

soniya

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial