css - make "box-shadow" of div above of its parent's :before/:after -
i want css box-shadow of div go outside parent's :before & :after pseudo elements.
here try:
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { width: 100%; height: 100%; padding: 10px; } div.outer { border: 5px solid #000; background: #ccc; width: 400px; height: 90%; position: relative; } div.inner { border: 5px solid blue; background: #fff; width: 80%; height: 100%; margin: auto; -webkit-box-shadow: 0 0 1.5em 0.5em red; -khtml-box-shadow: 0 0 1.5em 0.5em red; -moz-box-shadow: 0 0 1.5em 0.5em red; -ms-box-shadow: 0 0 1.5em 0.5em red; -o-box-shadow: 0 0 1.5em 0.5em red; box-shadow: 0 0 1.5em 0.5em red; } div.outer:before, div.outer:after { content:''; -webkit-background-size: 10% 100%; -khtml-background-size: 10% 100%; -moz-background-size: 10% 100%; -ms-background-size: 10% 100%; -o-background-size: 10% 100%; background-size: 10% 100%; width: 10%; height: 100%; position: absolute; top: 0; } div.outer:before { background: url(https://freebestwallpaper.files.wordpress.com/2012/02/amazing-background-1.png) no-repeat left bottom fixed; left: 0; } div.outer:after { background: url(https://freebestwallpaper.files.wordpress.com/2012/02/amazing-background-1.png) no-repeat left bottom fixed; right: 0; }
<div class="outer"> <div class="inner"></div> </div>
as notice, red box-shadow out parent (the black border on top/bottom).
i want above green left/right sides also.
thanks in advance.
setting z-index: -1
pseudos , removing background parent trick.
fiddle
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { width: 100%; height: 100%; padding: 10px; } div.outer { border: 5px solid #000; width: 400px; height: 90%; position: relative; } div.inner { border: 5px solid blue; background: #fff; width: 80%; height: 100%; margin: auto; -webkit-box-shadow: 0 0 1.5em 0.5em red; -khtml-box-shadow: 0 0 1.5em 0.5em red; -moz-box-shadow: 0 0 1.5em 0.5em red; -ms-box-shadow: 0 0 1.5em 0.5em red; -o-box-shadow: 0 0 1.5em 0.5em red; box-shadow: 0 0 1.5em 0.5em red; } div.outer:before, div.outer:after { z-index: -1; content:''; -webkit-background-size: 10% 100%; -khtml-background-size: 10% 100%; -moz-background-size: 10% 100%; -ms-background-size: 10% 100%; -o-background-size: 10% 100%; background-size: 10% 100%; width: 10%; height: 100%; position: absolute; top: 0; } div.outer:before { background: url(https://freebestwallpaper.files.wordpress.com/2012/02/amazing-background-1.png) no-repeat left bottom fixed; left: 0; } div.outer:after { background: url(https://freebestwallpaper.files.wordpress.com/2012/02/amazing-background-1.png) no-repeat left bottom fixed; right: 0; }
<div class="outer"> <div class="inner"></div> </div>
Comments
Post a Comment