Cascading StyleSheet atau lebih dikenal dengan CSS merupakan sebuah bahasa pemrograman yang bertujuan untuk menghias atau mengatur gaya/tampilan website. Seiring berkembangnya css saat ini membuat website terlihat semakin canggih dan semakin menarik.
Dikesempatan kali ini saya akan membahas tentang Cara Membuat Efek Invert Pada Gambar Dengan CSS3 yang merupakan salah satu kehebatan css dalam membuat website lebih indah. Dalam membuat Efek invert disini kita menggunakan css filter, dengan hadirnya css filter ini kita dapat dengan mudah dalam membuat efek-efek yang biasa dijumpai di Photoshop.
Oke mari kita mulai, pertama-tama buatlah sebuah folder dan siapkanlah sebuah gambar, jika teman-teman tidak mempunyai gambar silahkan gunakan gambar yang saya gunakan seperti dibawah ini :
Jika sudah, langkah selanjutnya jalankan/run text-editor yang teman-teman gunakan lalu ketiklah script seperti dibawah ini :
<html>
<head>
<meta charset="UTF-8">
<title>Efek Invert CSS3</title>
<style>
img{
filter: invert(100%);
}
</style>
</head>
<body>
<img src="cara-membuat-efek-invert-pada-gambar-dengan-css3.jpg" alt="">
</body>
</html>
Teman-teman sesuaikan ya dengan nama file gambar serta format gambar yang teman-teman gunakan. Jika sudah silahkan simpan dan silahkan jalankan/run dibrowser yang teman-teman gunakan.
Jika benar maka hasilnya akan sama seperti pada gambar dibawah ini :
Bagaimana mudahkan teman-teman ? jadi seperti itulah tentang Cara Membuat Efek Invert Pada Gambar Dengan CSS3 yang merupakan salah satu kehebatan css. Dan untuk kedepannya silahkan teman-teman coba sendiri dengan efek efek yang lainnya.
Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Membuat Efek Invert Pada Gambar Dengan CSS3 semoga bermanfaat dan sampai bertemu dipembahasan selanjutnya.
Terimakasih