Hallo sahabat Dumet, pada tulisan saya kali ini, saya akan mengenalkan sebuah property CSS terbaru yang menurut saya sangat keren. Properti ini bernama mix-blend-mode yang memiliki banyak pilihan mode. Tapi pada tulisan ini saya hanya akan menggunakan mode screen saja. Sahabat bisa mencoba mode mix-blend-mode yang lainnya. Berikut mode yang terdapat dimiliki properti mix-blend-mode:
- mix-blend-mode: normal;
- mix-blend-mode: multiply;
- mix-blend-mode: screen;
- mix-blend-mode: overlay;
- mix-blend-mode: darken;
- mix-blend-mode: lighten;
- mix-blend-mode: color-dodge
- mix-blend-mode: color-burn;
- mix-blend-mode: hard-light;
- mix-blend-mode: soft-light;
- mix-blend-mode: difference;
- mix-blend-mode: exclusion;
- mix-blend-mode: hue;
- mix-blend-mode: saturation;
- mix-blend-mode: color;
- mix-blend-mode: luminosity;
Nah sekarang kita coba bagaimana cara menggunakannya. Buat file HTML dengan struktur sebagai berikut.
Kemudian berikan style CSS nya sebagai berikut.
Jika sahabat jalankan file .HTML nya pasa browser, maka tampilannya akan seperti gambar di bawah ini.
Wow… keren kan???
Btw, gambar background yang saya gunakan saya ambil dari website http://gratisography.com/
Selamat mencoba di rumah, dan sampai jumpa lagi pada tulisan saya selanjutnya. 🙂