19 Cara Membuat Efek Zooming Dan Drop Shadows Pada Gambar Dengan CSS3

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Efek Zooming dan Drop ShadowsKali 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.


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

19 komentar :

  1. CSS 3 memang keren gan...

    BalasHapus
    Balasan
    1. Benar sekali meski baru bbrpa yg kompatibel dgn browser modern.

      Hapus
  2. keren gan patut di coba... echh.. blog ane artikel terkaitnya udah gak kosong gan.. udah bagus..hee

    BalasHapus
    Balasan
    1. Silahkan dicoba, klu bgtu sdh tdk ada mslh dgn widget artikel terkaitx khn?

      Hapus
    2. iya tidak ada.. tapi harus rombak semuanya..untungnya ane new bie. jd gak masalah..hee

      Hapus
  3. Say alhamdulillah, gpp kadang kegagalan meski mgkn sekcl ini bs mnjd pelajaran brharga bg qta (pangalaman). Anaa jg new bie kok.

    BalasHapus
  4. Keren tutorialnya mbak, nanti sy coba deh skrg lg coba mau buat tabber tab jqueryx.

    BalasHapus
    Balasan
    1. Untuk tabber tab JQuery anda bisa search diblog ini pada label JQuery

      Hapus
  5. nice post sob....
    terus update ea..
    jgn lupa mampir...

    BalasHapus
    Balasan
    1. Terimakasih apresiasinya, insyaAllah anaa akn mampir balik ke blog anda.

      Hapus
  6. trik ini kayaknya cocok buat toko online. (y) untuk postingnya. :-)

    BalasHapus
  7. Patut dicoba... Amankan dulu artikelnya (^,^)/

    BalasHapus
    Balasan
    1. Silahkan dicoba dan diamankan mbak :)

      Hapus
  8. eh datang ya :d ke blog >>kingofcounterstrike.blogapot.com<< kalo tidak !!:-t:-b

    BalasHapus
    Balasan
    1. Kalau mau nyisipkan emoticonsx ksh spasi dl sblm paste simbolx. Nggak mau ah kunjung balik hbs maksa, kejam jg kali tuan rumahnya :p

      Hapus
  9. Interaktif nih admin sip,moga sukses blognya..

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!