• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1759
  • Last Modified:

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?
0
iceman19330
Asked:
iceman19330
1 Solution
 
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
 
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now