Membuat Efek Foto dengan CSS3

Cara untuk membuat efek ini sebenarnya sangatlah  sederhana, lihat demo gambar di bawah, yaitu hanya dengan memanfaatkan CSS Box Shadow dan CSS transformasi 2 D Dimensi.
Masukkan ke tab Rancangan kemudian pilih Edit HTML untuk membuat efek seperti demo di bawah, Anda 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);
}

Simpan templatemu

Nah, untuk menerapkannya efeknya, jangan lupa setiap kali Anda 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="" />

Selamat mencoba, semoga berhasil,..

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250