CSS3 Polaroid Frame Tutorial

12/11/2012

CSS3 Polaroid Frame. This was a fun little exercise that turned out nice so I thought I'd share:) img does not cross browser support (yet) any of the fancy css3 attributes so we have to wrap it in one little tag to get our nice effect.

CSS

b {
float:left;
padding:20px 20px 65px 20px;
width:300px;
height:300px;
background:#fff;
box-shadow:0px 4px 6px #000, inset 0 0 6px #333;
border-radius:5px;
cursor:default;
text-decoration:none;
color:#000;
}
b:before {
position:absolute;
content:'';
width:300px;
height:300px;
box-shadow:inset 0 0 15px 2px #000;
}
b:after {
content:attr(title);
display:block;
padding:12px 0 0;
font:120% Georgia, Times, serif;
text-align:center;
}

HTML

<b title="Selena Gomez Kiss"><img src="images/Selena.jpg"></b>

ADVERTISE HERE