Kako Napraviti Polaroid Efekat Slika uz Pomoc CSS3


Kako Napraviti Polaroid Efekat Slika uz Pomoc CSS3

Za kreiranje efekata na slikama nekada smo se oslanjali isključivo na Photoshop, dok sa konstantnim napretkom tehnologije, danas to više nije slučaj.
Danas Vam predstavljamo tutorijal 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.

Slika

css3 polaroid effect

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

</pre>
<div class="polaroid">
Sarah, Dec '02
 <img src="lokacija/imeslike.jpg" alt="" /></div>
<pre>

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

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

CSS

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

.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;
}

Konačan izgled:

polaroid css3 effect

Jovan Ivezic

E-business and internet marketing specialist.

Latest posts by Jovan Ivezic (see all)

facebook
twitter
google
pinterest