html - Box-shadow and overflow: scroll -
i using 3 bootstrap panels panel headings col-md-4
, @ bottom of each panel have box-shadow , panels have max height of 300px. text inside panels longer panels themselves. use overflow: scroll
when use overflow: scroll
"overwrites" box-shadow (of which, understand why). have searched seemingly simple solution while , have come nothing.
i have excluded box-shadow style , other 2 panels keep clean underneath.
[fiddle][1] .sub-content-panel { height: 400px; border-radius: 5px; position: relative; color: black; } <div class="col-md-4 text-border"> <a href="gallery.php"> <div class="panel panel-default sub-content-panel"> <div class="panel-heading sub-content-panel-heading"> <p><i class="fa fa-commenting-o"></i>about us</p> </div> <div class="panel-body"> <p>with 35 years experience furniture designer , builder, , son curtis, 15 years of remodeling experience, have combined talents in remodel. contributes business skills, practiced sense of aesthetics, creative elements, , knowledge of wood. curtis contributes knowledge of construction techniques , materials, experience in whole house renovations, , skill in kitchen , bath remodels. our focus on customer satisfaction, quality workmanship, attention detail , inspired solutions. priority naso remodel yield little impact on customers environment possible while work in progress.</p> </div> </div> </a> </div> .sub-content-panel:before, .sub-content-panel:after{ z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .sub-content-panel:after{ -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; } [1]: https://jsfiddle.net/2jufan88/
try using overflow-y: auto;
.
body, html { margin: 10px; } .panel.panel-default.sub-content-panel { max-height: 400px; border-radius: 5px; position: relative; color: black; overflow-y: auto; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-md-4 text-border"> <a href="gallery.php"> <div class="panel panel-default sub-content-panel"> <div class="panel-heading sub-content-panel-heading"> <p><i class="fa fa-commenting-o"></i> us</p> </div> <div class="panel-body"> <p>with 35 years experience furniture designer , builder, , son curtis, 15 years of remodeling experience, have combined talents in remodel. contributes business skills, practiced sense of aesthetics, creative elements, , knowledge of wood. curtis contributes knowledge of construction techniques , materials, experience in whole house renovations, , skill in kitchen , bath remodels. our focus on customer satisfaction, quality workmanship, attention detail , inspired solutions. priority naso remodel yield little impact on customers environment possible while work in progress 35 years experience furniture designer , builder, , son curtis, 15 years of remodeling experience, have combined talents in remodel. contributes business skills, practiced sense of aesthetics, creative elements, , knowledge of wood. curtis contributes knowledge of construction techniques , materials, experiencessible while work in progress 35 years experience furniture designer , builder, , son curtis, 15 years of remodeling experience, have combined talents in remodel. contributes business skills, practiced sense of aesthetics, creative elements, , knowledge of wood. curtis contributes knowledge of construction techniques , materials, experiencessible while work in progress 35 years experience furniture designer , builder, , son curtis, 15 years of remodeling experience, have combined talents in remodel. contributes business skills, practiced sense of aesthetics, creative elements, , knowledge of wood. curtis contributes knowledge of construction techniques , materials, experience in whole house renovations, , skill in kitchen , bath remodels. our focus on customer satisfaction, quality workmanship, attention detail , inspired solutions. priority naso remodel yield little impact on customers environment possible while work in progress.</p> </div> </div> </a> </div>
Comments
Post a Comment