Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website terutama dalam hal desain website.

Pada Kesempatan kali ini saya akan memberikan tutorial tentang Cara Menggunakan Blend Mode Multiply CSS3. Jadi yang di maksud blend mode disini adalah sebuah penggabungan warna antar pixel dalam gambar dan gambar lainnya. Dan membuat sebuah gambar menjadi semakin bagus, tergantung pada pemilihan blend mode nya. Kalau dalam software design seperti photoshop biasanya disebut blending mode.

Didalam CSS3 terdapat property yang sama dengan blending mode pada photoshop yaitu property mix-blend-mode, begitupula dengan nilainya modenya sama dengan yang ada di photoshop. Dan pada artikel tutorial saya kali ini saya akan membahasa tentang Cara Menggunakan Blend Mode Multiply CSS3, Untuk lebih jelasnya mari kita mulai mempraktekannya.

  • Cara Menggunakan Blend Mode Multiply CSS3

Pertama-tama teman-teman siapkan 3 buah gambar bebas dan masukan dalam 1 folder lalu kemudian buka/jalankan text editor yang teman-teman gunakan, disini kebetulan saya menggunakan sublime text sebagai text editornya, jika sudah dijalankan maka ketiklah script HTML dibawah ini :

  • Cara Menggunakan Blend Mode Multiply CSS3

Jika sudah silahkan teman-teman simpan terlebih dahulu dengan nama blend.html dan sesuaikan nama gambar serta formatnya, jika sudah maka didalam folder tadi terdapat 3 buah gambar dengan 1 file html ya teman-teman. Oke jika sudah langkah selanjutnya teman-teman buka kembali script htmlnya yang tadi kemudian tambahkan script CSS dibawah ini :

  • Cara Menggunakan Blend Mode Multiply CSS3

Code CSS diatas diletakan didalam tag head pada html atau dibawah tag title, jadi disini kita menggunakan CSS Internal. Oke langkah selanjutnya silahkan teman-teman simpan dan silahkan dijalankan/run di browser yang teman-teman gunakan. Jika benar dan sesuai maka hasilnya seperti pada gambar dibawah ini :

  • Cara Menggunakan Blend Mode Multiply CSS3

cara-menggunakan-blend-mode-multiply-css3

Cukup mudahkan teman-teman, jadi seperti itulah Cara Menggunakan Blend Mode Multiply CSS3. Dan silahkan teman-teman mencoba sendiri mode-mode yang lainnya.

Oke saya rasa cukup sampai disini pembahasan kali ini tentang Cara Menggunakan Blend Mode Multiply CSS3 semoga bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.

Terimakasih