www.webdeveloper.com
Results 1 to 3 of 3

Thread: Pure CSS Drop Shadow box

  1. #1
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374

    Pure CSS Drop Shadow box

    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>

  2. #2
    Join Date
    Jun 2009
    Location
    West Jordan, Utah
    Posts
    91
    What browser are you seeing this white border in?

  3. #3
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles