Samstag: 2. Jul 2011
Ein kleiner Test den Polaroid Style mit CSS3 zu bauen. Ist zwar nichts Neues, ich hatte es bisher jedoch noch nicht ausprobiert :)
Nachtrag: Da es sich um CSS3 handelt werden Schatten und Drehung nur in moderneren Browsern angezeigt.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS3 Rotate</title>
<style>
body {
background: #f2f2f2;
}
.rotate {
display: inline;
}
.image_container {
margin: 5em;
background: #fff;
padding: 10px 10px 60px 10px;
background: #fff;
overflow: hidden;
width: 240px;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
-moz-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
}
.image_container:hover {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
}
.image_container img {
border-top: 1px solid #f2f2f2;
border-left: 1px solid #f2f2f2;
border-right: 1px solid #f6f6f6;
border-left: 1px solid #f6f6f6;
}
</style>
</head>
<body>
<div class="rotate">
<div class="image_container"><img src="image.jpg" class="rotate" alt="Testimage"></div>
</div>
</body>
</html>
sieht echt cool aus. habs auch bei mir versucht einzubauen:
tour-tickets-karten.de
Kommentar hinzufügen