Cara untuk menciptakan imbas ini bergotong-royong sangatlah sederhana (lihat demo), ialah hanya dengan memanfaatkan CSS Box Shadow dan CSS Transformasi 2 Dimensi.
Masuklah ke tab Rancangan lalu pilih Edit HTML. Untuk menciptakan imbas menyerupai dalam demo, kau cukup menyalin arahan CSS ini lalu meletakkannya sempurna di atas arahan
]]></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 menerapkan efeknya, jangan lupa setiap kali kau mengunggah gambar, terapkan class
foto pada masing-masing badan tag <img> yang ada menyerupai 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=" Cara untuk menciptakan imbas ini bergotong-royong sangatlah sederhana Membuat Efek Foto dengan CSS3" id="BLOGGER_PHOTO_ID_5636537814866564146" border="0" /></a>atau menyerupai ini:
<img class="foto" src="http://4.bp.blogspot.com/-KzxqfN5tPCo/TjkBR2otlDI/AAAAAAAAAhQ/nlCzSobCnG8/s320/Funny-Cats-cats-9474201-1600-1200.jpg" alt=" Cara untuk menciptakan imbas ini bergotong-royong sangatlah sederhana Membuat Efek Foto dengan CSS3" />