Mecha versi 2.6.4 sudah dirilis!

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.