Membuat Gambar Hitam Putih Dengan CSS Filter

Membuat gambar berwarna menjadi hitam putih dengan CSS3 adalah bahasan kita kali ini.

Dulu kita harus menggunakan Photoshop untuk memberi efek photo grayscale (hitam putih) untuk sebuah gambar, namun sekarang dengan kecanggihan fitur-fitur css3 kita tidak perlu capek2 mengeditnya di Photoshop, cukup dengan beberapa baris kode css kita sudah bisa membuat foto berwarna menjadi hitam putih.

Kali ini kita akan coba membuat yang efek grayscale yang bisa dijalankan di Firefox.

Oke langsung saja kita praktek membuat. Siapkan sebuah file dengan nama grayscale.html atau index.html (bebas), silahkan copy code html di bawah ini

<div align="center">
<h2>CSS Filter : <small><a href="http://www.randiseptian.com/2013/03/membuat-gambar-hitam-putih-dengan-css.html">http://www.randiseptian.com</a></small></h2>
</div>
    <div class="normal">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5kBLlvJ02PUXnqyx4OcFwktCz6DNF8Ci7Cnrjd4YzgbI0esmCclqeJataBHcLYJV09e7wGdIQWImpqTt5fnHqJmGHqkiKmtnFVrlsZc8_a5lNU-60MYmOTqpusXbWIRa_ljpmu9ThaVc/s320/DSC00110.jpg" alt="">
    </div>
    <div class="grayscale">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5kBLlvJ02PUXnqyx4OcFwktCz6DNF8Ci7Cnrjd4YzgbI0esmCclqeJataBHcLYJV09e7wGdIQWImpqTt5fnHqJmGHqkiKmtnFVrlsZc8_a5lNU-60MYmOTqpusXbWIRa_ljpmu9ThaVc/s320/DSC00110.jpg" alt="">
    </div>

Untuk kode css nya seperti ini, silahkan copy

.grayscale{
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
        }
.grayscale:hover{
            filter: grayscale(0%);
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            -ms-filter: grayscale(0%);
            -o-filter: grayscale(0%);
            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
        }
img{
            width:400px;
            height:300px;
            float:left;
            margin:50px;
            margin-left:200px;
}

Pada css diatas kita membuat efek grayscale (hitam putih), namun ketika mouse diarahkan ke gambar maka gambar kembali ke warna asal.

Silahkan download file jadinya . . . . .

Semoga bermanfaat kawan . . .