| Farkryzer The Second Generation v.2.1 | Copyright © 2012 Friski G.P. Powered by Blogger |

Mau tukeran link dengan blog ini ? Kesini Sobat

Site Rank

PageRank

Buku Tamu

W3 Directory - the World Wide Web Directory
Mau tahu cara buat widget tersembunyi seperti ini ? Baca tutorialnya disini full css lebih ringan dari javascript

Farkryzer Post Section

... Selamat membaca ...

CSS3 : Gambar transparan dengan opacity


CSS3 sekarang ini sering di gunakan untuk mendesain website terutama blog, karena mudah untuk digunakan. Sekarang saya akan memberitahukan cara membuat gambar menjadi transparan ketika disorot dengan CSS3.


Note:
agar lebih lancar, saya sarankan sobat menguasai :
Bab IV : Belajar CSS bagian 3 ( Link | hover )
Bab IX : Belajar CSS3 Bagian 3 ( Transisi )
dan ilmu dasar css tentunya. Atau kalian bisa ngulik sendiri ...

Step - stepnya yaitu :

1. Cari element apa yang akan di buat efek transparan ketika hover, saya ambil contoh #header-post

2. Ceritanya kan kita akan membuat efek pada hover bukan waktu awal. maka buat hover pada element tersebut misal :
awalnya seperti ini :

#header {float:center;width:960px;height:150px;text-align: center;color:#111;background:url(http://4.bp.blogspot.com/-BTQh_th0gLk/Tm9tzDReMZI/AAAAAAAAAnQ/2vM8ZE0zfhY/s1600/Farkryzer+x1.png) no-repeat scroll top center;}
#header h1 {visibility:hidden;}


kemudian buat hover untuk element #header menjadi :

#header {float:center;width:960px;height:150px;text-align: center;color:#111;background:url(http://4.bp.blogspot.com/-BTQh_th0gLk/Tm9tzDReMZI/AAAAAAAAAnQ/2vM8ZE0zfhY/s1600/Farkryzer+x1.png) no-repeat scroll top center;}
#header:hover {  }
#header h1 {visibility:hidden;}


3. Setelah itu masukan kode cssnya, lihat rumus di bawah ini :

element:hover {opacity: XXX;filter:alpha}

Keterangan :
XXX kamu ganti sesuai dengan keinginan kamu, misalnya 0.5 atau 0.25 dll, makin kecil nilainya maka tingkat transparan suatu objek akan semakin tinggi.

Contoh yang sudah saya buat adalah :

.gambar {-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s}
.gambar:hover {opacity: 0.7;filter:alpha}

Keterangan:
yg berwarna hijau : saya tambahkan dengan efek transisi agar tidak terlalu biasa-biasa saja.
yg berwarna kuning : contoh dari kode CSS gambar transparan.

kamu bisa kreasikan dan kembangkan sendiri cara tadi, jika ada di tanyakan silahkan isi kotak komentar.

Sesuai permintaan sobat @Zh!nTho saya akan berikan sedikit demo yang sudah jadi :


Sorot gambar ini kemudian alihkan

Buat @Catatan Ardha saya akan memberikan caranya, seperti cara diatas menggunakan opacity kita tinggal memodifikasinya sedikit sob :


#gambar1{-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s;opacity:.5}
#gambar1:hover{opacity: 1}
Keterangan:
yang berwarna hijau: artinya gambar transparan sebelum disorot nilai opacity = .5 menandakan gambar dalam keadaan transparan
yang berwarna merah: artinya gambar menjadi biasa ketika disorot nilai opacity = 1 menandakan gambar utuh seperti semula

Coba sendiri sorot gambarnya

28 komentar:

  1. it must bedifficult to make such a complex site liki this eh O.o I really appreciate yours :)

    BalasHapus
  2. @Mika Pandora: thx for your support, i think yours is more better than me bacause its made with flash (:

    BalasHapus
  3. Alangkah bagusnya kalo ada demonya gan

    BalasHapus
  4. @Zh!nTho: demo ? coba aja header farkryzer sob itu pake efek ini

    BalasHapus
  5. wah keren euy ajarin modifikasi sidebar donk :D

    BalasHapus
  6. @Cek info: boleh, tapi mau modifikasi yang bagaimana ??? :D

    BalasHapus
  7. bagus deh udah ada demonya kan biar semua pada tau hehe

    BalasHapus
  8. Mantep om demonya :D opacity

    BalasHapus
  9. wah sya gak bisa pake CSS cari yg javascript aja deh biar gampang

    BalasHapus
  10. @Zh!nTho: haha, siiip

    @Farixsantips: sama - sama

    @Admin BT: lah bukannya ribetan pake javascript trus juga css kan lebih ringan di banding javascript

    BalasHapus
  11. bang, Ruquest Jquery Selector DOnk + Tutorial nya Dikit Tentang ttg Jquery

    BalasHapus
  12. wah sipp nih, jadi ngga usah pake jquery yg hover2an itu, css3 pun bisa, hahahaa :D

    BalasHapus
  13. @Ladida Cafe: iya sob CSS makin canggih

    BalasHapus
  14. haloo sob, masih ingat kah kamu dengan http://kumpul.forumid.net ? jika masih inget ayo ramaikan lagi seperti dahulu! banyak user yang siap menunggu, contohnya "Blogger Terakhir" Dan saya "Biiduku".

    please...

    BalasHapus
  15. @afiv: saya dah menyerah sob ga ada kemajuan soalnya

    BalasHapus
  16. jangan gitu dong, sekarang semua udah balik lagi! :D tadi ada Irsyad si co-admin! terus ada Blogger Terakhir. tapi kalau bosen saya mau diangkat jadi co-admin bahkan adminnya :D

    BalasHapus
  17. @afiv: oke deh ntar skalian saya ganti forumnya biar terpusat ke anime aja ya besok usahain kumpul semua jam 6

    BalasHapus
  18. waaaaaaaaaaaw ! banyak CSS ya, bolehlah belajar disini.. hehehe

    follow sukses.. follow back yaa

    BalasHapus
  19. @Indramayu Cyber Team: iya sob banyak dan bagus-bagus ... follback selesai ...

    BalasHapus
  20. saya nyari yang kebalikannya, kalo hover baru keluar gambarnya :)

    BalasHapus
  21. @Catatan Ardha: sama saja sob tinggal dibalik bisa nanti saya buat contohnya ...

    BalasHapus
  22. wah, request saya di turutin, jadi malu kalo banyak tanya, bookmark dulu :D

    BalasHapus
  23. @Ardha Herdianto: haha ga usah sungkan-sungkan sob :D

    BalasHapus
  24. Bang ajarin saya boleh gakk? mau nerapin gambar yang nomer 1 tu di gmbar posting gmna?

    BalasHapus
  25. @izzbasic store: coba cari ini img { trus masukin scipt cssnya didalamnya

    BalasHapus
  26. @admin terimakasih berhasil nih gan, hemm mau nanya lagi kalo mau naroh icon FB sama twitter nya diheader saya bisa bantu gak? dan itu kan postingan nya rata 2 postingan trus memanjang kebawah tuh klo diganti 3 gmn ya gan? klo perlu sidebar nya dibuang aja gan... maaf banyak nanya ya

    BalasHapus
  27. @izzbasic store: kalo itu dah masuk tahap edit html susah dijelasin penjang banget ...

    BalasHapus

Share entri ini :