Hallo sahabat, tahu kah anda bahwa bukan hanya photoshop yang bisa membuat teknik clipping mask? CSS3 juga bisa loh… gak percaya? Coba deh sekarang sahabat ikuti langkah-langkah dibawah ini.

Pertama siapkan 1 buah gambar yang nantinya akan di gabungkan dengan sebuah text. Saya menggunakan gambar pattern seperti berikut.

Teknik Clipping Mask Menggunakan CSS3

Kemudian buat file .html dengan struktur sebagai berikut.

Teknik Clipping Mask Menggunakan CSS3

Setelah itu berikan style CSS sebagai berikut.

Teknik Clipping Mask Menggunakan CSS3

Coba jalankan file .html nya pada browser, dan lihat tampilannya akan menjadi seperti berikut.

Teknik Clipping Mask Menggunakan CSS3

Agar bisa berjalan dengan baik, jalankan pada browser google chrome versi terbaru. Selamat mencoba dan sampai jumpa pada tulisan saya selanjutnya. 🙂