Membuat Efek Foto dengan CSS3

CSS Efek Foto Polaroid

Cara untuk membuat efek ini sebenarnya sangatlah sederhana (lihat demo), yaitu hanya dengan memanfaatkan CSS Box Shadow dan CSS Transformasi 2 Dimensi.
Masuklah ke tab Rancangan kemudian pilih Edit HTML. Untuk membuat efek seperti dalam demo, kamu cukup menyalin kode CSS ini kemudian meletakkannya tepat di atas kode ]]></b:skin> atau </style>:

img.foto {
  background-color:#ffffff;
  border:0px;
  outline:none;
  padding:5px 5px 20px;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.7);
  box-shadow:0 1px 3px rgba(0,0,0,0.7);
}

img.foto:hover {
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  -ms-transform:rotate(5deg);
  -o-transform:rotate(5deg);
  transform:rotate(5deg);
}

Simpantemplatemu.

Nah, untuk menerapkan efeknya, jangan lupa setiap kali kamu mengunggah gambar, terapkan class foto pada masing-masing tubuh tag <img> yang ada seperti ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-KzxqfN5tPCo/TjkBR2otlDI/AAAAAAAAAhQ/nlCzSobCnG8/s1600/Funny-Cats-cats-9474201-1600-1200.jpg"><img class="foto" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 240px;" src="http://4.bp.blogspot.com/-KzxqfN5tPCo/TjkBR2otlDI/AAAAAAAAAhQ/nlCzSobCnG8/s320/Funny-Cats-cats-9474201-1600-1200.jpg" alt="" id="BLOGGER_PHOTO_ID_5636537814866564146" border="0" /></a>

atau seperti ini:

<img class="foto"  src="http://4.bp.blogspot.com/-KzxqfN5tPCo/TjkBR2otlDI/AAAAAAAAAhQ/nlCzSobCnG8/s320/Funny-Cats-cats-9474201-1600-1200.jpg" alt="" />

1 Komentar

  • Admin

    nambah ilmu lagi :)

Komentar telah ditutup.