Cara Membuat Efek Grayscale Pada Gambar dengan CSS
Kita tak perlu menjelaskan panjang lebar dan membuktikan apa pun kepada siapa pun bahwa kita bagus. Jangan merepotkan diri sendiri dengan penilaian orang lain. Di akhirnya, kita sendiri yang tahu persis apakah kita memang bagus atau tak. Oke kesempatan kali ini saya akan berbagi ilmu lagi kepada kalian mengenai bagaimana Cara Merancang Efek Grayscale Di Gambar dengan CSS.
Masih seputar memberikan efek di gambar dengan CSS, kali ini kita akan memberikan efek Grayscale di gambar. Yang dimaksud dengan Grayscale yakni membangun gambar menjadi hitam dan putih. Oke seketika saja, berikut Cara Merancang Efek Grayscale Di Gambar dengan CSS.
Seperti biasanya, pertama-tama siapkan file index.html nya terlebih dahulu.
Kemudian, isi di bagian <body> tag HTML berikut.
<img src=pineapple.jpg alt=Kita tak perlu menjelaskan panjang lebar dan membuktikan apa pun kepada siapa pun bahwa Cara Merancang Efek Grayscale Di Gambar dengan CSS width=300 height=300>
<p><strong>Note:</strong> Filter ini tak berfungsi di Internet Explorer, Edge 12, atau Safari 5.1 dan versi lain nya.</p>
Dan setelah itu, isi bagi CSS nya seperti berikut.
img {
-webkit-filter: grayscale(100%); /* Chrome, Opera */
filter: grayscale(100%);
}Bagaimana teman-teman? Lumayan gampang bukan?
Sekianlah bagi panduan kali ini mengenai Cara Merancang Efek Grayscale Di Gambar dengan CSS.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
