Membuat Efek Foto dengan CSS3
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 :)