as i was writing up the last post, i came up with this, a little bit fancier looking, i wouldn't use it for everything, but it works well.
CSS3 Polaroid Photo Board
temp.jpg
HTML
HTML Code:
<div class="polaroid">
<img src="img/image.jpg" />
<p>Polaroid Image</p>
</div>
<div class="polaroid">
<img src="img/image.jpg" />
<p>Polaroid Image</p>
</div>
<div class="polaroid">
<img src="img/image.jpg" />
<p>Polaroid Image</p>
</div>
<div class="polaroid">
<img src="img/image.jpg" />
<p>Polaroid Image</p>
</div>
<div class="polaroid">
<img src="img/image.jpg" />
<p>Polaroid Image</p>
</div>
<div class="polaroid">
<img src="img/image.jpg" />
<p>Polaroid Image</p>
</div>
CSS
Code:
.polaroid:before {
width: 100%;
height: 40px;
content: " ";
position: absolute;
top: 0;
left: 0;
margin: -5% 0 0 0;
background: url(img/pin.png) center no-repeat;
background-size: contain;
}
.polaroid {
font-family: 'Covered By Your Grace', cursive;
line-height: 1em;
font-size:18px;
text-align:center;
display:inline-block;
padding:15px 12px 2px 12px;
margin:5px 5px;
width:200px;
background:#fff;
box-shadow: rgba(0,0,0,.5) 0 0 10px;
}
.polaroid:nth-child(1n) {
-ms-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
}
.polaroid:nth-child(2n) {
-ms-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.polaroid:nth-child(3n) {
-ms-transform: rotate(4deg);
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
.polaroid:nth-child(4n) {
-ms-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.polaroid img {
display: block;
width: 100%;
margin: 0 0 10px 0;
}
.polaroid p {
margin: 0;
height:40px;
overflow:hidden;
}
http://users.adam.com.au/vsimkin/ideas/polaroid/