Schlagschatten mit box-shadow

Schlagschatten nach rechts unten

.box {
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
}

Schlagschatten nach links oben

.box {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

Box-Schatten nach innen

.box {
-moz-box-shadow: inset 0 0 10px #222;
-webkit-box-shadow: inset 0 0 10px #222;
box-shadow: inset 0 0 10px #222;
}

Box-Schatten ohne Versatz

.box {
-moz-box-shadow: 0 0 5px 2px #888;
-webkit-box-shadow: 0 0 5px 2px #888;
box-shadow: 0 0 5px 2px #888;
}

Kombination mehrerer Box-Schatten

.box {
-moz-box-shadow: 20px -10px lime, 20px 10px 50px red, -20px 10px yellow, -20px -10px 50px blue;
-webkit-box-shadow: 20px -10px lime, 20px 10px 50px red, -20px 10px yellow, -20px -10px 50px blue;
box-shadow: 20px -10px lime, 20px 10px 50px red, -20px 10px yellow, -20px -10px 50px blue;
}

Box-Schatten bei abgerundeter Box mit Rahmen

.box {
border: 3px solid #c4c8cc;
-moz-box-shadow: 5px 5px 7px #888;
-webkit-box-shadow: 5px 5px 7px #888;
box-shadow: 5px 5px 7px #888;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

Beispiel für einen Perspektivschatten

.box {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 15px 10px -10px #333;
-webkit-box-shadow: 0 15px 10px -10px #333;
box-shadow: 0 15px 10px -10px #333;
}

Verdreckter Rand per kombiniertem Außen- und Innenschatten

.box {
background: #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
-webkit-box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
}

Kombinierter Außen- und Innenschatten

.box {
background: #ffd65e;
background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04));
background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%);
background: -o-linear-gradient(top, #ffd65e 0%,#febf04 100%);
background: -ms-linear-gradient(top, #ffd65e 0%,#febf04 100%);
background: linear-gradient(top, #ffd65e 0%,#febf04 100%);
border: 1px solid #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
-webkit-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
box-shadow: 0 0 15px #333, inset 0 0 1px #333;
}

↑ Seitenanfang