10 January 2011

Cara membuat Efek bayang pada gambar

Berbagai efek dapat tercipta berkat kode css3, seperti tutorial yang akan saya informasikan kepada anda khususnya bagi pemula.

Satu dari sekian banyak efek yang diciptakan oleh css3 yaitu dapat digunakan untuk membuat efek bayangan di sekitar gambar posting. Dalam hal ini kita akan menggunakan kode box-shadow.

Cara menerapakannya pada gambar posting agar menghasilkan Efek bayang :
1. login blogger lalu menuju edit html
2. cari kode .post-body img {
3. masukkan kode ini setelah kurung kurawal
-webkit-box-shadow:4px 2px 7px #000;
-moz-box-shadow: 4px 2px 7px #000;
box-shadow : 4px 2px 7px #000;
4. jangan lupa save

Efek bayang ini akan lebih hidup jika diterapkan pada gambar  dalam keadaan mouse over (mouse mengenai gambar). Jadi dalam keadaan normal tidak terlihat efek bayangan sedangkan pada saat mouse didekatkan pada gambar baru kelihatan efek bayangnya. Menarik bukan?

Bila ingin membuat efek bayang pada gambar ketika mouse hover saja, caranya :
1. login blogger lalu menuju edit html
2. cari kode ]]></b:skin>
3. masukkan kode ini di atas ]]></b:skin>
.post-body img:hover{
-webkit-box-shadow:4px 2px 7px #000;
-moz-box-shadow: 4px 2px 7px #000;
box-shadow : 4px 2px 7px #000;}
4. terakhir save

Untuk melihat contoh demonya silahkan klik disini

Selamat menikmati gambar dengan efek bayang.

6 comments:

  1. Terimakasih atas bantuanya. postingan anda saya pakai. karena sangat berguna. sekali lagi terimakasih

    ReplyDelete
  2. itu kan untuk gambar yang ada dalam posting ya? ada ga cara untuk gambar yang di luar posting seperti gambar yang di pasang dalam kode html/java script? makasih...

    ReplyDelete
  3. @rey, makasih banget balasanya.... saya mu langsung tancab ke postingannya nih...

    ReplyDelete
  4. makasih gan,sangat membantu...
    kalau bikin halaman posting berubah warna jika disorot gmn gan,tlg bls di web ane bintoro-craft.com
    makasih

    ReplyDelete

Note: Only a member of this blog may post a comment.