Kako napraviti polaroid efekat slika uz pomoć CSS3

Dok sama tehnika kodiranja konstantno napreduje, ogromna većina želi da njihovi web sajtovi imaju što bolje performanse, smanje upotrebu slika, odnosno povećaju upotrebu efekata kroz CSS.

HTML

U našem html kodu mi smo dodali div sa klasom .polaroid, zatim smo dodali paragraf i sliku (p, img).
DImenzije slike su 201×200

[html]</pre>
<div class="polaroid">
Sarah, Dec '02

<img src="lokacija/imeslike.jpg" alt="" /></div>
<pre>
[/html]

Font

Naziv fonta je Kaushan, preuzet sa Google open font baze.
Da bi font radio potrebno je da unesete sledeći kod u head deo Vaše html stranice

[html]<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>[/html]

CSS

Potrebno je da napišemo nekoliko klasa u samom CSS-u koje možete dodatno prilagođavati sopstvenim potrebama.

[css]
.polaroid {
position: relative;
width: 220px;
}
.polaroid img {
border: 10px solid #fff;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.polaroid p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
font: 400 18px/1 'Kaushan Script', cursive;
color: #888;
}
[/css]

Konačan izgled polaroid CSS3 efekta