Bilder schräg stellen

longo93

Hey Leute, ich würde gerne einige Bilder etwas schräger stellen und mit einem Rahmen belegen, der unten etwas breiter ist, sodass es wie ein altes Foto aussieht. Einer ne Idee wie das gehen könnte ?

Soll in etwa so aussehen ....

http://zurb.com/playground/css3-polaroids

djheke

Mit transform:rotate(XXdeg); kanst du Elemente drehen.

longo93

ah super vielen Danke !!! Weißt du auch, wie ich so ne Art Rahmen dadrum bekomme, dass es aussieht wie so nen altes instant Foto ?

djheke

So vielleicht.

HTML

<!doctype html>
<html>
<head>
<title>Lenovo</title>
<meta charset="UTF-8">
<style>


#polaroid {
 margin:100px 100px 10px 100px;
 padding:15px;
 float:left;
 position:relative;
 transform:rotate(4deg);
 background:#fff;
 box-shadow:0 0 4px #000;
}


#polaroid p {
 padding:5px;
 font-weight:bold;
 font-size:18px;
 color:#a4a;
 text-align:center;
}


#polaroid:before {
 content:"";
 position:absolute;
 top:15px;
 left:15px;
 width:350px;
 height:400px;
 background:rgba(150,100,0,.5);
}
</style>
</head>
<body>
<div id="polaroid">
<img src="tiger.jpg" width="350" height="400">
<p>Tiger</p>
</div>
</body>
</html>

Alles anzeigen

Tags