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?
iceman19330Asked:
Who is Participating?
 
soniyaCommented:
Try
/***shadow at right side***/
#containerr {
        background-image: url(images/right.jpg);
      background-repeat: repeat-y;
      background-position: left;
}
/***shadow at left side***/
#containerl  {
        background-image: url(images/left.jpg);
      background-repeat: repeat-y;
      background-position: right;
}
Create shadow around a box in photoshop.
Copy a small jpg image from the shadow you created in Photoshop.
Use the images for left / right / top  or bottom, how you want the shadow to appear and use in the css as shown above. Place the whole content in the containerr and then containerl as specified.
You will get a smooth shadow all along the edges which you specify.
0
 
vincent_figoCommented:
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... :)
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
iceman19330Author Commented:
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>

0
 
soniyaCommented:
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>
  <!--left side shadow in this column -->
    <td width="3%" rowspan="5">&nbsp;</td>
      <!--main content here -->
    <td width="95%">&nbsp;</td>
      <!--right side shadow in this column -->
    <td width="2%" rowspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
 
  <tr>
  <!-- bottom shadow here-->
    <td>&nbsp;</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.
0
 
iceman19330Author Commented:
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.