Mar 10, 2012

Efek Gambar Zoom dan Berbayang dengan CSS

Dengan semakin berkembangnya cascading style sheet dan kompatibilitasnya dengan browser baru, desain blog dan website menjadi lebih kreatif.

Sobat mungkin pernah menggunakan Photoshop secara manual untuk menambahkan bayangan pada gambar, tapi sekarang berkat CSS3 Anda dapat menambahkan bayangan  untuk semua gambar sobat secara otomatis. Kita akan belajar bagaimana untuk memperkecil ukuran gambar besar dan bagaimana kita bisa membuat gambar tersebut zoom ke ukuran aslinya pada saat mouse diarahkan ke gambar. Semoga sobat akan menyukainya.

efek zoom pada gambar
arahkan mouse ke gambar untuk zoom


Caranya cukup mudah;

  1.     Masuk ke Blogger > Design > Edit HTML > centang Expland Template
  2.     Back up  template sobat
  3.     Cari kode ]]></b:skin>
  4.     Sebelum kode ]]></b:skin> paste kan kode di bawah ini
.julak-css 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;
}
.julak-css 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;
}


Sekarang jika Anda ingin gambar muncul dengan efek ini, cukup menggunakan kode di bawah ini pada posting blog, menu HTML.


<div class="julak-css">
<img src="URL Gambar Masukkan di sini " />
</div>



Upload gambar Anda ke editor Blogger ganti URL Gambar Masukkan di sini dengan link gambar Anda. Lalu lihat blog Anda untuk melihatnya.

contoh penerapannya seperti ini

<div class="julak-css">
<img src="http://1.bp.blogspot.com/-SdqcCFtiLhQ/T1i-99TFuDI/AAAAAAAAAm0/TLbPS63QJO0/s1600/cara+menghilangkan+bau+badan+dan+ketiak.jpeg" /></div>

dan seperti ini

<div class="julak-css"><a href="http://1.bp.blogspot.com/-SdqcCFtiLhQ/T1i-99TFuDI/AAAAAAAAAm0/TLbPS63QJO0/s1600/cara+menghilangkan+bau+badan+dan+ketiak.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-SdqcCFtiLhQ/T1i-99TFuDI/AAAAAAAAAm0/TLbPS63QJO0/s1600/cara+menghilangkan+bau+badan+dan+ketiak.jpeg" /></a><img src="http://1.bp.blogspot.com/-SdqcCFtiLhQ/T1i-99TFuDI/AAAAAAAAAm0/TLbPS63QJO0/s1600/cara+menghilangkan+bau+badan+dan+ketiak.jpeg" /></div>

Note ; Efek ini kompatibel dengan versi terbaru dari Mozilla, Safari, Opera, Chrome namun tidak efektif dengan IE. Selamat mencoba.Silakan hias gambar blog sobat dengan efek zoom dan berbayang.



6 comments:

  1. Nice info gank,,,
    Tolong dirubah gank di akhir contoh penerapan pertama pada bagian <div class="julak-css"> itu dipindahkan ke contoh penerapan dua...

    makasih gank salam bloger

    kunjungi blogku
    http://edynlaskar09.blogspot.com
    http://redteambeenero.blogspot.com

    ReplyDelete
    Replies
    1. Edyn Laskar, makasih bro udah mengingatkan. hehehe, kurang teliti saya, akan segera saya perbaiki. thanks.
      Salam kembali.

      Delete
  2. apakah ukuran besarnya bisa di atur

    ReplyDelete
    Replies
    1. pengaturannya bisa pada saat menulis postingan, klik gambar ada keterangan center=tengah, left kiri (posisi) sdngkn ukurannya bisa small, large, extra large, terserah anda. makin ke kanan makin besar zooom nya.

      Delete

Anda harus menjadi follower blog ini jika ingin memberikan komentar. Terima Kasih