Ich versuche ein div zu drehen, auf das ich einen 'curl'-Schatten angewendet habe.css page curl effect drop shadow mit drehen
Die Seite curl Schlagschatten-Effekt funktioniert gut, bis ich das Div drehen, an welcher Stelle die Schlagschattenelemente durch das div (Z-Index Problem) zeigen?
Ich habe auch festgestellt, dass wenn ich ein Bild als Div-Inhalt habe, bekomme ich dieses Problem nicht, aber ich würde es gerne für ein Div mit Textinhalt arbeiten. Irgendwelche Vorschläge?
Hier ist der Code:
CSS (Anbieter Präfixe Code zu verkürzen entfernt, aber das Problem in allen modernen Browsern auftritt):
.shadow {border:1px solid #ccc;position:relative;width:300px;height:116px;background-color:#ededed;}
.shadow:before, .shadow:after {
bottom:13px;
content: "";
position: absolute;
z-index: -1;
-moz-transform: rotate(-11deg);
box-shadow: 0 15px 5px rgba(0, 0, 0, 0.2);
height: 50px;
max-width: 50%;
width: 50%;
left:3px;
}
.shadow:after {
-moz-transform: rotate(11deg);
left: auto;
right: 2px;
}
.rotate{
-moz-transform: rotate(4deg);
}
HTML:
<div class="shadow">this is the first div</div> <!-- this one is ok -->
<div class="shadow rotate">this is the second div</div> <!-- this has the issue -->
<div class="shadow rotate"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div> <!-- this one is ok -->
Und hier ist a jsfiddle: http://jsfiddle.net/U8qY3/5/
das ist es! ihr seid so * schnell *. und es funktioniert auch über die anderen modernen Browser. – caitriona
ps. Den genialen Schlagschatteneffekt kann ich nicht für mich in Anspruch nehmen. Ich habe es "im Internet" gefunden. – caitriona
Das ist ein schöner Effekt. Gut gemacht von euch beiden :) – Harry