Cienie CSS3 "Podnoszone rogi" Cień z nieprzezroczystością

Question

Grałem z niektórymi efektami cienia CSS3. Bardzo podoba mi się efekt "uniesionych rogów", ale napotkałem problem przy próbie dodania krycia do elementu. Moje pytanie brzmi: czy istnieje sposób na stworzenie efektu "podniesionych narożników" na element z nieprzezroczystością?

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); 
} 

Answer 1

Problem polega na zrozumieniu stacking contexts i na sposobie ich renderowania w przeglądarce.

• element główny (HTML)
• umieszczony (absolutnie lub względnie) o wartości indeks z innych niż "Auto"
• pierwiastków o opacity value less than 1.
• na telefon WebKit i Chrome 22+, position: fixed zawsze tworzy nowy kontekst, układanie, nawet gdy z-index jest "auto"

9.9.1 Specifying the stack level: the 'z-index' property

1. tła i granice elementu tworzącego układania kontekst.
2. Kontakty kontekstu potomnego z poziomami ujemnego stosu (większość ujemna jako pierwsza).
3. na nie-liniowych, nie-pozycjonowanych potomkach in-flow.
4. nie ułożone pływaki.
5. wbudowane, śródliniowe, niepozycjonowane elementy potomne, w tym tabele wbudowane i bloki wbudowane .
6. dziecko układania kontekstów poziomie stosu 0 i umieszczonego potomków z poziomu stosu 0.
7. dziecka układania kontekstów pozytywne poziomy stosu (Least dodatni pierwszy).

Tło #test jest renderowany pierwsze, ponieważ jest to pierwiastek nieprzezroczystość jest stosowany do. Następnie cienie stają na wierzchu, ponieważ są w nowym kontekście układania (position: absolute). I wreszcie tekst div.

proste rozwiązanie: byłoby zawinąć w innym div div i zastosować krycie do że div zamiast z #test.

http://jsfiddle.net/WAvZu/3/

Kolejny dobry odczyt: What No One Told You About Z-Index

Answer 2

udało mi się fałszywych rozwiązanie tego dodając div wewnątrz pojemnika z „podniesionym” narożnikami. To włamanie i wyobrażam sobie, że ktoś inny mógłby wymyślić lepsze rozwiązanie, ale myślałem, że opublikuję moje odkrycia na wypadek, gdyby ktoś był ciekawy.

http://jsfiddle.net/WAvZu/2/

Answer 3

Po dyskusji nie jestem tak pewny o tym, aby być uczciwym, ale znalazłem ten artykuł: The stacking context.

O ile mi wiadomo, sztuczka z z-index: -2 w przykładzie po prostu działa, bo nie ustawić z-index na .drop-shadow, co oznacza, że ​​nie ma żadnego kontekstu stosu. Zwykle dziecko (:before i :after jest również rodzajem dziecka) nie może mieć niższego z-index niż nadrzędnego, ale może być poniżej, jeśli rodzic nie ma kontekstu stosu.

Problem z opacity to, że tworzy układania kontekstu:

Kontekst Stacking jest utworzona, w dowolnym miejscu dokumentu, przez dowolny element, który jest albo

• element główny (HTML),
• pozycjonowany (bezwzględnie lub względnie) z wartością indeksu zera inną niż "auto",
• elementy o wartości krycia mniejszej niż 1. (...),
• ...

Z powiedział, że mogłeś work around by using a wrapper

<div class="wrapper"> 
    <div class="drop-shadow lifted">This is correct with opacity.</div> 
</div> 

i ustawić opacity tam.

.wrapper { 
    opacity: .5; 
}