CSS3 box shadows and Bootstrap 3 -
i developing site using bootstrap 3 , seems work except when try use css3 box shadows.
what want achieve have box shadows on left , right of whole content div. works fine. want box shadow on of content items such divs in sidebar if have box shadows on main content container, doesn't work others. if remove box shadow class on main content container, rest work.
if remove div <div class="box outer">, other box shadows work if in, don't show.
any on identifying why can't use both box shadows @ once appreciated
update: got demo on bootply http://www.bootply.com/ulx2katkt8 of looks like, added width .outer given width of 1000px , can see both shadows visible looks .outer shadow overwrites others
here template
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <!-- set viewport responsive site displays correctly on mobile devices --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>bootstrap 3 responsive design</title> <!-- include bootstrap css --> <link href="http://localhost/app/public/css/bootstrap.min.css" rel="stylesheet"> <link href="http://localhost/app/public/css/custom.css" rel="stylesheet"> <link href="css/media.css" rel="stylesheet"> </head> <body> <div class="box outer"> <!-- site header , navigation --> <header class="top" role="header"> <div class="container"> <img class="img-responsive" src="logo.png"> <nav class="navbar navbar-default" role="navigation"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="search"> </div> <button type="submit" class="btn btn-default">submit</button> </form> </div><!-- /.navbar-collapse --> </nav> </div> </header> <!-- site banner --> <div class="banner"> <div class="container"> <div class="box contentimg"> <img class="img-responsive" src="http://localhost/app/public/images/layout/index.png" alt=""> </div> </div> </div> <!-- middle content section --> <div class="middle"> <div class="container"> <!-- main content section --> <div class="col-md-8 content"> </div> <!-- end main content section --> <!-- sidebar content section --> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="box sidebar_item"> <div class="sidebar_item_head"><h3>events planner</h3></div> <div class="sidebar_item_main"> </div> </div> </div> </div> </div> <!-- site footer --> <div class="bottom"> <div class="container"> <div class="col-md-4"> <p>content first footer section.</p> </div> <div class="col-md-4"> <p>content second footer section.</p> </div> <div class="col-md-4"> <p>content third footer section.</p> </div> </div> </div> </div> <!-- include jquery , bootstrap js plugins --> <!-- jquery (necessary bootstrap's javascript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- include compiled plugins (below), or include individual files needed --> <script src="http://localhost/app/public/js/bootstrap.min.js"></script> <script src="http://localhost/app/public/js/bootbox.min.js"></script> </body> </html> followed css
.box { position:relative; background:#f1f1f1; margin:0 10px; } .box:before, .box:after { position:absolute; z-index:-1; content:""; } .outer { margin-top:20px; margin-bottom:20px; margin-left: auto; margin-right: auto; } .contentimg { background-color: #fff; border: 1px solid #ccc; padding: 5px; width: 100%; } .sidebar_item { margin: 40px auto; width: 310px; } .outer:before, .outer:after { top:0; width:100%; height: 100%; border-radius:2%/100%; -moz-border-radius:2%/100%; -webkit-border-radius:2%/100%; box-shadow:-10px 0 7px rgba(0, 0, 0, 0.3); -moz-box-shadow:-10px 0 7px rgba(0, 0, 0, 0.3); -webkit-box-shadow:-10px 0 7px rgba(0,0,0, 0.3); } .outer:before{ box-shadow:10px 0 7px rgba(0, 0, 0, 0.3); -moz-box-shadow:10px 0 7px rgba(0, 0, 0, 0.3); -webkit-box-shadow:10px 0 7px rgba(0,0,0, 0.3); } .sidebar_item:before, .sidebar_item:after, .contentimg:before, .contentimg:after { bottom:12px; left:5px; width:50%; top:80%; max-width:300px; -webkit-box-shadow:0 15px 7px rgba(0,0,0, 0.35); -moz-box-shadow:0 15px 7px rgba(0, 0, 0, 0.3); box-shadow:0 15px 7px rgba(0, 0, 0, 0.3); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); -ms-transform:rotate(-3deg); transform:rotate(-3deg); } .sidebar_item:after, .contentimg:after { -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); -ms-transform:rotate(3deg); transform:rotate(3deg); right:5px; left:auto; }
i knew z-index had see box shadow if gave .outer div width.
i fixed adding css
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { z-index: 0; }
Comments
Post a Comment