SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    C33 boxshadow question.

    I thought it would be nifty to have a page shadow neatly done using the new CSS3 box-shadow proprieties. I had read that the box-shadow is NOT part of the box model so I thought this would be easy and only a matter or determining how wide i wanted the shadow to be, applying it to the wrapper. I was assuming the top and bottom edges would be "offscreen" and without consequences, since the shadow is not part of the box model ... this wasn't the case . I get a bottom "margin" making the bottom shadow visible and breaking the effect.. I tried compensating by adding negative margins but it had NO EFFECT.

    however I am probably just doing something WAY WRONG.


    CSS
    *{margin:0; padding:0}
    body, html{ height:100%; background: tan;}
    #page{ margin: -0px auto 0px auto; -webkit-box-shadow: 0 -0px 8px #000;-moz-box-shadow: 0 0 8px #000;width:960px;min-height:100%; background: silver; margin-bottom:-8px; }
    #head{height:200px; background: #333; border-bottom: #000 10px solid;}
    #main{float:left; width:640px;background: #aeab0e; }
    #sidebar { -webkit-box-shadow: 0 -3px 4px #000;float:left ;width:300px; padding-bottom: 60px; margin-top:-60px;background: url(grad.jpg) bottom left orange repeat-x ; margin-left:10px; position: relative; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px;-moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px;}
    #sidebar .top{background: orange; width: 280px; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px;-moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px;
    padding:10px }
    #sidebar p {padding:0 10px 20px 10px;}
    #content{ background: #aeab0e;}
    #foot {background: silver; min-height:100px; clear: both}
    .nav {padding:10px;}
    #main_content{padding:10px;}
    #content .nav li{ display:inline;}
    .nav li+li:before{ content:" | "}


    MARKUP

    <div id="page">
    <div id="head">
    <h1>PAGE NAME</h1>
    <!--head--></div>
    <div id="content">
    <div id="main">
    <ul class="nav">
    <li><a href="#">link</a></li><li>
    <a href="#">link</a></li><li>
    <a href="#">link</a></li><li>
    <a href="#">link</a></li><li>
    <a href="#">link</a></li><li>
    <a href="#">link</a></li><li>
    <a href="#">link</a></li><li>
    <a href="#">link</a></li>
    </ul>
    <div id="main_content">
    <p> main content</p>
    <p> main content</p>
    </div>
    <!--main--></div>
    <div id="sidebar">
    <h2 class="top">Sidebar</h2>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <!--sidebar--></div>
    <div id="foot">
    </div>
    <!--content--></div>
    <!--page--></div>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Not a perfect solution, but better than nothing:

    Code:
    #page { 
      margin: 0px auto; -webkit-box-shadow: 0 -8px 8px #000;
      -moz-box-shadow: 0 -8px 8px #000;
      width:960px;
      min-height:100%; 
      background: silver; 
    }


Bookmarks

Posting Permissions

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