← zurück zum Artikel
CSS3 Demo by Oliver Gast
weitere Demos →

Spielchen mit Pseudoelementen

Linie mit Keil

.box {
position: relative;
margin: 20px auto;
background: #999;
width: 20px;
height: 200px;
}

.box:before {
content:"";
position: absolute;
top: 20px;
left: -15px;
width: 20px;
height: 20px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #eee;
}

Ein Pfeil

This way

.box {
position: relative;
margin: 20px auto;
background: #999;
width: 200px;
height: 30px;
color: #fff;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
line-height: 30px;
}

.box:before {
content:"";
position: absolute;
top: 0;
left: -15px;
width: 30px;
height: 30px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #eee;
}

.box:after {
content:"";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
background: #999;
border-top: 15px solid #eee;
border-left: 15px solid #999;
border-bottom: 15px solid #eee;
border-right: 15px solid #eee;
}

Eine Sprechblase

olivergast.de

.box {
position: relative;
margin: 50px auto;
background: #999;
width: 300px;
height:80px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 32px;
color: #fff;
line-height: 80px;
text-align: center;
text-shadow: 0 1px 0 #111;
}

.box:before {
content:"";
position: absolute;
bottom: 0;
left: 25px;
width: 50px;
height: 50px;
-webkit-transform: rotate(45deg) skewY(45deg);
-moz-transform: rotate(45deg) skewY(45deg);
-o-transform: rotate(45deg) skewY(45deg);
-ms-transform: rotate(45deg) skewY(45deg);
transform: rotate(45deg) skewY(45deg);
background: #999;
}

Runder Button mit doppeltem Innen-Schatten

Quelle: Design Shack

.box {
position: relative;
display: block;
margin: 20px auto;
width: 120px;
height: 120px;
background: #eee;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
-moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
cursor: pointer;
}

.box:before {
content:"";
position: absolute;
top: 10px;
left: 10px;
background: #ddd;
width: 100px;
height: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
-moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}

.box:after {
content:"Drücken";
position: absolute;
font-size: 18px;
font-weight: bold;
line-height: 80px;
text-align: center;
color: #fff;
top: 20px;
left: 20px;
background: #00b7ea;
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
width: 80px;
height: 80px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}

Erster Buchstabe mit :first-letter

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

.box {
position: relative;
margin: 20px auto;
background: #999;
width: 300px;
padding: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 16px;
color: #fff;
text-align: justify;
}

.box:first-letter {
position: absolute;
float: left;
margin: 0 10px 10px 0;
font-size: 64px;
font-family: Georgia, serif;
font-weight: bold;
text-shadow: 0 1px 0 #000;
}

Erste Zeile mit :first-line

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

.box {
position: relative;
margin: 20px auto;
background: #999;
width: 300px;
padding: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 16px;
color: #fff;
text-align: justify;
}

.box:first-line {
font-size: 20px;
color: #000;
}

Verschieden angeordnete Buchstaben mit :nth-child (gerade und ungerade Kind-Elemente)

o

l

i

v

e

r

g

a

s

t

.

d

e

<div class="box">
<p class="zeichen">o</p>
<p class="zeichen">l</p>
<p class="zeichen">i</p>
<p class="zeichen">v</p>
<p class="zeichen">e</p>
<p class="zeichen">r</p>
<p class="zeichen">g</p>
<p class="zeichen">a</p>
<p class="zeichen">s</p>
<p class="zeichen">t</p>
<p class="zeichen">.</p>
<p class="zeichen">d</p>
<p class="zeichen">e</p>
</div>

.box {
width: 650px;
margin: 20px auto;
}

.box p.zeichen {
position: relative;
float: left;
width: 40px;
height: 60px;
font-weight: bold;
color: orange;
text-transform: uppercase;
font-size: 36px;
line-height: 60px;
text-align: center;
background: #fff;
-webkit-box-shadow: 1px 1px 5px #666;
-moz-box-shadow: 1px 1px 5px #666;
box-shadow: 1px 1px 5px #666;
text-shadow: 1px 1px 5px #111;
margin-right: 10px;
}

.box p:nth-child(odd) {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}

.box p:nth-child(even) {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
transform: rotate(-4deg);
}

Und nochmal :nth-child (jedes zweite Kind-Element)

o

l

i

v

e

r

g

a

s

t

.

d

e

<div class="box">
<p class="zeichen">o</p>
<p class="zeichen">l</p>
<p class="zeichen">i</p>
<p class="zeichen">v</p>
<p class="zeichen">e</p>
<p class="zeichen">r</p>
<p class="zeichen">g</p>
<p class="zeichen">a</p>
<p class="zeichen">s</p>
<p class="zeichen">t</p>
<p class="zeichen">.</p>
<p class="zeichen">d</p>
<p class="zeichen">e</p>
</div>

.box {
width: 730px;
margin: 20px auto;
}

.box p.zeichen {
position: relative;
float: left;
width: 50px;
height: 50px;
border-radius: 50px;
font-weight: bold;
color: #000;
text-transform: uppercase;
font-size: 32px;
line-height: 50px;
text-align: center;
background: #fff;
-webkit-box-shadow: 1px 1px 10px #777;
-moz-box-shadow: 1px 1px 10px #777;
box-shadow: 1px 1px 10px #777;
margin-right: 5px;
}

.box p:nth-child(2n) {
background: #eee;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
-webkit-box-shadow: 2px 2px 10px #888;
-moz-box-shadow: 2px 2px 10px #888;
box-shadow: 2px 2px 10px #888;
}

Bild mit Bildunterschrift

.box {
position: relative;
margin: 50px auto;
background: url(../images/galerie/bild1.jpg);
width: 600px;
height: 400px;
}

.box:after {
content:"Bildunterschrift mit :after";
position: absolute;
color: #fff;
bottom: 10px;
right: 10px;
padding: 10px 15px;
background: #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 2px solid #fff;
}

Gleiches Beispiel mit :hover

.box {
position: relative;
margin: 50px auto;
background: url(../images/galerie/bild1.jpg);
width: 600px;
height: 400px;
overflow: hidden;
}

.box:after {
content:"Bildunterschrift mit :after";
position: absolute;
color: #fff;
bottom: 10px;
right: -200px;
padding: 10px 15px;
background: #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 2px solid #fff;
}

.box:hover:after {
right: 10px;
}

Die schweizer Flagge

.box {
position: relative;
width: 300px;
height: 300px;
background: red;
margin: 20px auto;
}

.box:before {
content: "";
position: absolute;
width: 50px;
height: 200px;
top: 50px;
left: 125px;
background: #fff;
}

.box:after {
content: "";
position: absolute;
width: 200px;
height: 50px;
top: 125px;
left: 50px;
background: #fff;
}

Und natürlich die deutsche Flagge

.box {
position: relative;
width: 300px;
height: 50px;
background: #000;
margin: 50px auto 150px auto;
}

.box:before {
content: "";
position: absolute;
width: 300px;
height: 50px;
top: 50px;
left: 0;
background: red;
}

.box:after {
content: "";
position: absolute;
width: 300px;
height: 50px;
top: 100px;
left: 0;
background: gold;
}

Ein Button mit Anhang

Hier geht's weiter

.box {
position: relative;
margin: 20px auto;
color: #000;
font-size: 16px;
font-weight: bold;
background: #e5e696;
background: -moz-linear-gradient(top, #e5e696 0%, #d1d360 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e696), color-stop(100%,#d1d360));
background: -webkit-linear-gradient(top, #e5e696 0%,#d1d360 100%);
background: -o-linear-gradient(top, #e5e696 0%,#d1d360 100%);
background: -ms-linear-gradient(top, #e5e696 0%,#d1d360 100%);
background: linear-gradient(top, #e5e696 0%,#d1d360 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e696', endColorstr='#d1d360',GradientType=0 );
width: 200px;
height: 40px;
line-height: 40px;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
-webkit-box-shadow: 0 0 5px #666;
-moz-box-shadow: 0 0 5px #666;
box-shadow: 0 0 5px #666;
cursor: pointer;
}

.box:hover {
background: #d1d360;
background: -moz-linear-gradient(top, #d1d360 0%, #e5e696 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d1d360), color-stop(100%,#e5e696));
background: -webkit-linear-gradient(top, #d1d360 0%,#e5e696 100%);
background: -o-linear-gradient(top, #d1d360 0%,#e5e696 100%);
background: -ms-linear-gradient(top, #d1d360 0%,#e5e696 100%);
background: linear-gradient(top, #d1d360 0%,#e5e696 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d360', endColorstr='#e5e696',GradientType=0 );
-webkit-box-shadow: inset 1px 1px 3px #444;
-moz-box-shadow: inset 1px 1px 3px #444;
box-shadow: inset 1px 1px 3px #444;
color: #000;
}

.box:after {
content:">";
position: absolute;
left: 200px;
font-size: 20px;
line-height: 40px;
text-align: center;
width: 30px;
height: 40px;
-webkit-box-shadow: 0 0 5px #666;
-moz-box-shadow: 0 0 5px #666;
box-shadow: 0 0 5px #666;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
background: #e5e696;
background: -moz-linear-gradient(top, #e5e696 0%, #d1d360 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e696), color-stop(100%,#d1d360));
background: -webkit-linear-gradient(top, #e5e696 0%,#d1d360 100%);
background: -o-linear-gradient(top, #e5e696 0%,#d1d360 100%);
background: -ms-linear-gradient(top, #e5e696 0%,#d1d360 100%);
background: linear-gradient(top, #e5e696 0%,#d1d360 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e696', endColorstr='#d1d360',GradientType=0 );
}

Zweiteilige Box

Dies ist das Hauptelement

.box {
position: relative;
font-size: 16px;
line-height: 100px;
width: 300px;
height: 100px;
background: #333;
-webkit-border-radius: 0 0 20px 20px;
-moz-border-radius: 0 0 20px 20px;
border-radius: 0 0 20px 20px;
color: #fff;
}

.box:before {
content: ":before";
position: absolute;
width: 300px;
height: 30px;
top: -30px;
line-height: 30px;
left: 0;
-webkit-border-radius: 20px 20px 0 0;
-moz-border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0 0;
background: red;
color: #fff;
}

Box mit Innenschatten und Banner

Dies ist das Hauptelement

.box {
position: relative;
color:#000;
background: rgb(214,240,253);
background: -moz-linear-gradient(top, rgba(214,240,253,1) 0%, rgba(242,249,254,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,240,253,1)), color-stop(100%,rgba(242,249,254,1)));
background: -webkit-linear-gradient(top, rgba(214,240,253,1) 0%,rgba(242,249,254,1) 100%);
background: -o-linear-gradient(top, rgba(214,240,253,1) 0%,rgba(242,249,254,1) 100%);
background: -ms-linear-gradient(top, rgba(214,240,253,1) 0%,rgba(242,249,254,1) 100%);
background: linear-gradient(top, rgba(214,240,253,1) 0%,rgba(242,249,254,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6f0fd', endColorstr='#f2f9fe',GradientType=0 );
margin: 40px auto;
width: 700px;
height: 100px;
line-height: 100px;
font-size: 32px;
text-align: center;
padding: 15px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: inset 2px 2px 5px #888;
-moz-box-shadow: inset 2px 2px 5px #888;
box-shadow: inset 2px 2px 5px #888;
overflow: hidden;
}

.box:before {
content:":before";
position: absolute;
top:20px;
left: -50px;
width: 150px;
height: 25px;
line-height: 25px;
font-size: 16px;
font-weight: bold;
color: #fff;
background: rgb(98,185,229);
background: -moz-linear-gradient(top, rgba(98,185,229,1) 0%, rgba(79,133,187,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(98,185,229,1)), color-stop(100%,rgba(79,133,187,1)));
background: -webkit-linear-gradient(top, rgba(98,185,229,1) 0%,rgba(79,133,187,1) 100%);
background: -o-linear-gradient(top, rgba(98,185,229,1) 0%,rgba(79,133,187,1) 100%);
background: -ms-linear-gradient(top, rgba(98,185,229,1) 0%,rgba(79,133,187,1) 100%);
background: linear-gradient(top, rgba(98,185,229,1) 0%,rgba(79,133,187,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62b9e5', endColorstr='#4f85bb',GradientType=0 );
text-align: center;
-webkit-box-shadow: 0 2px 5px #333;
-moz-box-shadow: 0 2px 5px #333;
box-shadow: 0 2px 5px #333;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.box:after {
content:":after";
position: absolute;
bottom:20px;
right: -50px;
width: 160px;
height: 25px;
line-height: 25px;
font-size: 16px;
font-weight: bold;
color: #fff;
background: rgb(53,106,160);
background: -moz-linear-gradient(top, rgba(53,106,160,1) 0%, rgba(23,19,58,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(53,106,160,1)), color-stop(100%,rgba(23,19,58,1)));
background: -webkit-linear-gradient(top, rgba(53,106,160,1) 0%,rgba(23,19,58,1) 100%);
background: -o-linear-gradient(top, rgba(53,106,160,1) 0%,rgba(23,19,58,1) 100%);
background: -ms-linear-gradient(top, rgba(53,106,160,1) 0%,rgba(23,19,58,1) 100%);
background: linear-gradient(top, rgba(53,106,160,1) 0%,rgba(23,19,58,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#356aa0', endColorstr='#17133a',GradientType=0 );
text-align: center;
-webkit-box-shadow: 0 2px 5px #333;
-moz-box-shadow: 0 2px 5px #333;
box-shadow: 0 2px 5px #333;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

Abgeknickte Ecken

.box {
position: relative;
width: 300px;
height: 300px;
background: #333;
margin: 20px auto;
}

.box:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
border-top: 30px solid #eee; /* gleiche Farbe wie der Hintergrund */
border-left: 30px solid #eee; /* gleiche Farbe wie der Hintergrund */
border-bottom: 30px solid #444;
border-right: 30px solid #444;
}
.box:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
right: 0;
border-top: 30px solid #eee; /* gleiche Farbe wie der Hintergrund */
border-left: 30px solid #444;
border-bottom: 30px solid #444;
border-right: 30px solid #eee; /* gleiche Farbe wie der Hintergrund */
}

Überschrift mit Schatten

Überschrift

<div class="box">
<div class="title">Überschrift</div>
</div>

.box {
position: relative;
width: 300px;
height: 100px;
background: #fff;
margin: 20px auto;
}

.box .title {
position: absolute;
top: 20px;
left: -20px;
background: #333;
width: 280px;
color: #fff;
font-size: 18px;
padding: 5px 30px;
z-index: 2;
text-align: left;
}

.box:before,
.box:after {
position: absolute;
content: "";
left: -40px;
top: 38px;
z-index: 1;
border: 20px solid transparent;
border-right-color: #888;
}

.box:after {
left: auto;
right: -40px;
border-right-color: transparent;
border-left-color: #888;
}

Preisschild zum Aufhängen

Jetzt sparen
80%

<div class="box">
<div class="title">Jetzt sparen</div>
<div class="title1">80%</div>
</div>

.box {
position: relative;
width: 200px;
height: 200px;
background: #7abcff;
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee));
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 );
margin: 20px auto;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
line-height: 1;
text-align: center;
color: #fff;
font-weight: bold;
text-shadow: 0 1px 0 #333;
-webkit-box-shadow: 0 0 10px #777;
-moz-box-shadow: 0 0 10px #777;
box-shadow: 0 0 10px #777;
}

.box .title {
position: relative;
top: 50px;
font-size: 24px;
}

.box .title1 {
position: relative;
top: 50px;
font-size: 80px;
}

.box:before {
position: absolute;
content: "";
top: 15px;
left: 94px;
width: 16px;
height: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
color: #fff;
background: #fff;
-webkit-box-shadow: inset 1px 1px 5px #333;
-moz-box-shadow: inset 1px 1px 5px #333;
box-shadow: inset 1px 1px 5px #333;
}

Preisschild mit Lichtreflektion

Jetzt sparen
80%

<div class="box">
<div class="title">Jetzt sparen</div>
<div class="title1">80%</div>
</div>

.box {
position: relative;
margin: 20px auto;
width: 200px;
height: 200px;
background: rgb(69,72,77);
background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
background: linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
-webkit-box-shadow: 0 0 10px #333;
-moz-box-shadow: 0 0 10px #333;
box-shadow: 0 0 10px #333;
overflow: hidden;
}

.box .title {
position: relative;
top: 40px;
font-size: 28px;
font-weight: bold;
color: #fff;
}

.box .title1 {
position: relative;
top: 20px;
font-size: 80px;
color: #fff;
}

.box:before {
position: absolute;
top: -180px;
left: -120px;
width: 300px;
height: 300px;
content: "";
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}

Ein Stapel Blätter

<div class="box">
<div class="blatt"></div>
</div>

.box {
position: relative;
background: #fff;
margin: 50px auto;
width: 600px;
height: 300px;
box-shadow: 0 0 5px #999;
}

.box .blatt {
position: absolute;
background: #fff;
width: 600px;
height: 300px;
box-shadow: 0 0 5px #999;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
z-index: -1;
}

.box .blatt:before {
position: absolute;
content: "";
top: 0;
left: 0;
background: #fff;
width: 600px;
height: 300px;
box-shadow: 0 0 5px #999;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}

.box .blatt:after {
position: absolute;
content: "";
top: 0;
left: 0;
background: #fff;
width: 600px;
height: 300px;
box-shadow: 0 0 5px #999;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}

↑ Seitenanfang