Using pseudoelements for box-shadow, z-index behavior

Question

I use a :before and :after pseudoelements to create a custom-shaped shadow on my text card. I use css like this (jsFiddle):

.card {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    float: left; 
    width: 310px; 
    height: 310px; 
    text-align: center;     
    color: black; 
    padding-top: 35px;
    border: 1px solid black;
}

.card h1 {
    font-size: 15px; 
    font-weight: bold; 
    line-height: 17px; 
    font-style: italic; 
    margin: 0;
}

.card .text { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); 
    margin: 8px auto; 
    padding: 15px 10px; 
    font-size: 13px; 
    text-align: left; 
    line-height: 14px; 
    height: 170px; 
    width: 280px; 
    background: white; 
    border-radius: 5px; 
    position: relative; 
    color: #222222; 
}
.card .text:before, 
.card .text:after { 
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
    content: ""; 
    display: block; 
    position: absolute; 
    z-index: -1; 
    top: 50%; 
    bottom: 0; 
    left: 40px; 
    right: 40px; 
    border-radius: 100px/10px; 
}
.card .text:after {
    -webkit-transform: skew(8deg) rotate(3deg);
    -moz-transform: skew(8deg) rotate(3deg); 
    transform: skew(8deg) rotate(3deg); 
    right: 10px; left: auto; 
}

So far so good. Problems start, when i add some background to my .card element, for example background: #0aabff (jsFiddle #2). Notice, pseudo-elements shadow around .text disappeared.

I tried solving this by adding z-index to my .text element, but then, instead of being behind my .text element, my :before, :after are displayed before it, despite having a z-index: -1; property (jsFiddle #3).

This makes little sense to me, and i still don't know how to solve this kind of problem. Perhaps, there is some kind of workaround, or another way to get the kind of shadow i need (original idea is the courtesy of css-tricks.com);

May this help you? http://stackoverflow.com/questions/20851452/z-index-is-canceled-by-setting-transformrotate/20852489#20852489 `To start, note that z-index on positioned elements and transform by itself create new "stacking contexts" on elements.` — TheFrozenOne, Oct 02 '14 at 08:10

score 2 · Accepted Answer · edited May 23 '17 at 12:21

2

You can add a z-index lower than -1 to your card class.

.card {
    z-index:-2;
    position:relative;
}

This is because your z-index of your pseudo-elements is lower than the default z-index value of card. By default is the background transparent and you may see the shadow. When you add a background-color then this is positioned above your pseudo-elements.

See http://jsfiddle.net/71thws1a/3/

The problem lies in the stacking of css as mentioned by @Doodlebunch

edited May 23 '17 at 12:21

Community

1
1

answered Oct 02 '14 at 08:13

TeeDeJee

3,756
1
17
24

Can you elaborate, why this doesn't work without `position: relative`? – Eternal1 Oct 02 '14 at 08:43
@TwiStar z-index only works on positioned elements (`position:absolute`, `position:relative`, or `position:fixed`) and not on the default `static` – TeeDeJee Oct 03 '14 at 07:04

Using pseudoelements for box-shadow, z-index behavior

1 Answers1