CSS3 "Lifted Corners" Drop-Shadow with Opacity
css, opacity
Solution
The problem is understanding stacking contexts and how they're rendered in the browser.
- the root element (HTML),
- positioned (absolutely or relatively) with a z-index value other than "auto",
- elements with an opacity value less than 1.
- on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto"
9.9.1 Specifying the stack level: the 'z-index' property
- the background and borders of the element forming the stacking context.
- the child stacking contexts with negative stack levels (most negative first).
- the in-flow, non-inline-level, non-positioned descendants.
- the non-positioned floats.
- the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
- the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
- the child stacking contexts with positive stack levels (least positive first).
The background of `#test` is being rendered first since that is the element the opacity is being applied to. After that, the shadows go on top since they are in a new stacking context (`position: absolute`). And finally, the text of the div.
A simple solution: Would be to wrap the div in another div and apply the opacity to that div instead of the `#test`.
http://jsfiddle.net/WAvZu/3/
Another good read: What No One Told You About Z-Index
Problem
I have been playing with some CSS3 drop-shadow effects. I am pretty fond of the "lifted corners" effect but I ran into an issue when attempting to add opacity to the element. My question is: Is there a way to create the "lifted corners" effect on an element with opacity? http://jsfiddle.net/WAvZu/ ``` .drop-shadow{ position:relative; float:left; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .drop-shadow:before, .drop-shadow:after{ content:""; position:absolute; z-index:-2; } .lifted{ -moz-border-radius:4px; border-radius:4px; } .lifted:before, .lifted:after{ bottom:15px; left:10px; width:50%; height:20%; max-width:300px; max-height:100px; -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } .lifted:after{ right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -ms-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); } ```