Blog yang berisi seputar kode-kode web pada platform blogger.

searchCari blog ini close

Cara Membuat Elemen Web Menjadi Hitam Putih

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 :)
Rizky

hanya sefruit manusia yang masih giat belajar

share_location Medan, North Sumatera, Indonesia

9 komentar

Posting Komentar

no Spam 🙂

disabled_by_defaultBatal Membalas
Selamat Datang
Halo, Selamat Datang di Males Code, Saya Memohon Maaf Website ini sedang dalam perbaikan dan pengembangan sehingga mungkin akan menemukan beberapa bug.
Oke