Schatten unter'm Bild
eine andere Form
Schatten unten, rechts oder über Eck ist nichts Neues. Interessanter sind 3D-Schattenwürfe an Objekten, die den Eindruck vermitteln, das Objekt liege nicht ganz eben auf dem Tisch:
Der CSS-Code für diese Darstellung:
.shadow {
background-color: #FFF8EE;
border: 1px solid #d8d8d8;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
padding: 3px 0 0;
margin: 10% auto;
max-width: 500px;
position: relative;
-webkit-box-shadow: 2px 0 2px #e2e2e2;
-moz-box-shadow: 2px 0 2px #e2e2e2;
box-shadow: 2px 0 2px #e2e2e2;
}
.shadow::before, .shadow::after {
-webkit-box-shadow: 0 15px 10px rgba(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);
position: absolute;
bottom: 18px;
z-index: -1;
width: 50%;
height: 20%;
content: "";
background: rgba(0, 0, 0, 0.7);
}
.shadow::after {
-webkit-trans.bild: rotate(3deg);
-moz-trans.bild: rotate(3deg);
-o-trans.bild: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
.shadow::before {
-webkit-trans.bild: rotate(-3deg);
-moz-trans.bild: rotate(-3deg);
-o-trans.bild: rotate(-3deg);
transform: rotate(-3deg);
right: auto;
left: 10px;
}
img { max-width: 100%; display: block; margin: 0 auto;}