Pure CSS Drop Shadow box

**slaughters** · 09-30-2009 04:08 PM

I'm playing with a pure CSS approach to making a drop shadow for a Div with out using any images.

http://www.stansight.com/DropShadowBox.html

A simple approach with embeded DIV's each with a slightly different dark gray color.

My problem is that for some reason there apears to be a 1px white line seperating each DIV color, but that would seem to be impossible as white is not used in any of the background colors.

Anyone know what is going on???

I posted a link to the code already, but I'll go a head an post the source code below:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pure CSS Drop Shadow Box</title>
    
    <style type="text/css">
        .shadow0 {
            background-color:#eeeeee;
            border:0 none;
            display:block;
            margin:0;
            padding:0 4px 4px 0;
            width:300px;
          }
        .shadow1 {
            background-color:#CCCCCC;
            border:0 none;
            display:block;
            margin:0;
            padding:0 3px 3px 0;
          }
        .shadow2 {
            background-color:#999999;
            border:0 none;
            display:block;
            margin:0;
            padding:0 2px 2px 0;  
          }
        .shadow3 {
            background-color:#333333;
            border:0 none;
            display:block;
            margin:0;
            padding:0 1px 1px 0;
          }
        .txtContent {
          text-align:center; 
          background-color:#fff; 
          border:1px solid #333333; 
          padding:5px;
          }
    </style>
    
</head>
<body>
 
<div class="shadow0">
    <div class="shadow1">
        <div class="shadow2">
            <div class="shadow3">
                <div class="txtContent">
                    <h4>Pure CSS Drop Shadow Box</h4>
                    <p>No images were used to make the drop shadow.  Just CSS Div boxes</p>
                </div>
            </div>
        </div>
    </div>
</div>
 
</body>
</html>

**nathandelane** · 09-30-2009 08:17 PM

What browser are you seeing this white border in?

**slaughters** · 09-30-2009 08:47 PM

Ha - you are correct.

I'm simply an idiot. The problem is that there is too much of a difference in the div background colors and I was seeing color banding, thinking it was 1px white lines.

Oh - well - I'll simply use the opacity solution that I came up with for my tip box shadows: http://www.stansight.com/DropShadowTipBox.html

In DropShadowTipBox I'm using JavaScript to create the DIV's then assigning inline values, but I'll see if I can hack out a pure CSS class solution for the fun of it.

Thread: Pure CSS Drop Shadow box

Thread Tools

Display

Pure CSS Drop Shadow box

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions