Cara Membuat Elemen Web Menjadi Hitam Putih

blackwhitewidget
Contoh elemen dengan efek hitam putih
Kali ini saya akan berbagi tips ringan karena kondisi saya yang memang tidak mau terlalu sibuk saat ini yaitu sebuah tips untuk merubah sebuah elemen web menjadi hitam putih secara keseluruhan elemen tersebut, dan ketika di hover elemen tersebut akan kembali semula seperti warna awal.
untuk contoh dari efek ini bisa dilihat pada gambar diatas tadi.

tanpa basa basi langsung aja ke-inti pembahasan, dari pada yang cakap pun sampai basi :D
1.Langkah Pertama Masuklah ke Template > Edit HTML, lalu pastekan kode dibawah ini diatas kode ]]></b:skin>

#idelemen:before,#idelemen:after{background:#f7f7f7;border:0 solid #aaa;border-top:none;bottom:-3px;content:"";height:0;left:0;position:absolute;right:0}
#idelemen:after{bottom:-5px;box-shadow:0 0 0 #aaa;left:4px;right:4px}
#idelemen{filter:url("data:image/svg+xml;utf8,<svg http:="" svg="" www.w3.org="" xmlns="\"><filter grayscale="" id="\"><fecolormatrix 0.3333="" 0="" 1="" matrix="" type="\" values="\"></fecolormatrix></filter></svg>#grayscale");filter:gray;-webkit-filter:grayscale(1)}
#idelemen:hover{filter:none;-webkit-filter:grayscale(0)}
2.Simpan Template
Agar efek hitam putih ini bisa bekerja pada elemen yang kamu inginkan, ganti #idelemen dengan id/class elemen yang anda miliki. Sekian Tutorial Ringan Kali ini, Semoga Bermanfaat :)

9 komentar:

  1. wah makin mantap tampilan blognya mas....nyimak dulu ya mas

    BalasHapus
    Balasan
    1. makasih buat pujiannya :)
      silahkan disimak

      btw blog kamu apa, dari kemarin saya cari gak ada mulu...?

      Hapus
    2. maaf mas, lupa mahu setting profile.. mas ,saya cuba2 google malescode..ternyata ada yang cloning blog mas..lihat sini http://asm-05.blogspot.com/ dan juga ini http://kangismet1.blogspot.com/ ,mas dan kang ismet juga di cloning sama bloggerjateng..

      Hapus
    3. makasih buat infonya,
      akan saya berantas sekarang...!!!
      saya tau dia itu tukang kloning

      lebih parahnya lagi blog o-om di clone...
      doakan saja dia mendapat balasan yang setimpal nantinya...!!!

      Hapus
    4. saya masih private kan blog saya mas kerna masih cari solusi agar blog tidak bisa di clone..

      Hapus
    5. ohh, yaudah deh,
      gak saya paksakan kok

      Hapus
  2. SVG Filter emang mangstab sob, cuman yang lagi ane cari tuh gimana cara nya css filter biar support di semua browser , bukan hanya di -webkit- saja . :)

    BalasHapus
    Balasan
    1. nah itu masalahnya ,
      tapi saya mendengar kabar kalau mau fix begituan bisa juga pakai javascript atau ada atribut css yang mungkin tidak kita ketahui.

      Hapus

Blog ini tidak menerima komentar via OpenID atau Anonim.
Link aktif akan secara otomatis terhapus oleh sistem.
Untuk memasukkan link dengan aman, gunakan kode [url=http://sites.com]Teks Link[/url]
Untuk memasukkan kode, gunakan kode <i rel="code">Kode Kamu</i>
Untuk memasukkan kode yang panjang, gunakan kode <i rel="pre">Kode Panjang Kamu</i>
Untuk menyisipkan gambar, gunakan kode [img]Url Gambar[/img]
Untuk memasukkan title, gunakan kode <b rel="h4">Title kamu ...</b>
Untuk memberikan efek huruf tebal pada teks, gunakan kode <strong>Teks Kamu ...</strong>
Untuk memberikan efek huruf miring pada teks, gunakan kode <em>Teks Kamu ...</em>

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.

Emotikon
:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p*