Cara Membuat Efek Zooming Dan Drop Shadows Pada Gambar Dengan CSS3 -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Efek Zooming Dan Drop Shadows Pada Gambar Dengan CSS3, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Blogger Tutorials, Artikel CSS3, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Cara Membuat Efek Zooming Dan Drop Shadows Pada Gambar Dengan CSS3
link : Cara Membuat Efek Zooming Dan Drop Shadows Pada Gambar Dengan CSS3
Gambar dibawah ini

Cara Membuat Efek Zooming Dan Drop Shadows Pada Gambar Dengan CSS3

Kali ini saya ingin berbagi lagi, hanya sebuah trik sederhana cara membuat atau menambahkan efek zooming dan drop shadows pada gambar dengan CSS3. Untuk lebih jelasnya silahkan cek live demonya dulu dengan menekan tombol berikut:

View Demo

 

Jika anda tertarik untuk menambahkan efek ini pada blog atau postingan anda, caranya sangat mudah, silahkan ikuti langkah-langkah berikut:

• Setelah login ke akun blogger anda
• Pada dasbor >> klik Template >> Edit HTML >> Proceed
• Cari kode  ]]></b:skin> (Gunakan Ctr + F untuk memudahkan pencarian)
• Setelah dapat letakkan kode CSS berikut diatas kode ]]></b:skin>

.TTB-CSS3 img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.TTB-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

• Simpan template.

Nah sekarang cara menampilkan efek zooming dan drop shadows pada gambar postingan blog anda.

Pada bagian HTM editor posts cukup tambahkan kode berikut:

<div class="TTB-CSS3">
<img src="Image URL Here" />
</div>

Ganti Image URL Here dengan URL/ link image yang ingin anda tampilkan pada postingan anda.

Demikian tutorial cara membuat efek zooming dan drop shadows pada gambar. Semoga bermanfaat.

Demikianlah Artikel Cara Membuat Efek Zooming Dan Drop Shadows Pada Gambar Dengan CSS3

Sekianlah artikel Cara Membuat Efek Zooming Dan Drop Shadows Pada Gambar Dengan CSS3 kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Cara Membuat Efek Zooming Dan Drop Shadows Pada Gambar Dengan CSS3 dengan alamat link https://trikmitos.blogspot.com/2012/11/cara-membuat-efek-zooming-dan-drop.html