Hallo sobat program, bertemu lagi dengan saya Rizal dan masih diberikan kesempatan untuk berbagi ilmu seputar pemrograman website di Dumet School. Pada kesempatan ini saya akan memberikan tutorial tentang Cara Membuat Efek Text Rumput dengan HTML CSS.

Dalam pembahasan ini sebenarnya saya hanya ingin berbagi hasil explore saya dari property css background-image, text-fill-color, dan background-clip. Dan hasilnya ada kita bisa membuat sebuah text menjadi berefek seperti rumput.

Oke untuk lebih jelasnya mari kita coba praktekan tentang Cara Membuat Efek Text Rumput dengan HTML CSS, langkah pertama buat folder terlebih dahulu, lalu kemudian siapkan gambar rumput teman-teman bisa cari digoogle. Dan kemudian buat file HTML nya lalu ketikan kode HTML nya seperti pada contoh dibawah ini :

Kode diatas saya membuat sebuah text dengan element h1, lalu kemudian teman-teman tambahkan style CSS nya seperti pada contoh dibawah ini :

Kode diatas pada element h1 saya berikan style atau property2 background-image untuk memanggil gambar rumput, lalu menjadikan text transparent dengan property text-fill-color, lalu kemudian gambar rumput saya potong/clip hanya se textnya saja dengan background-clip. Oke jika dijalankan maka hasilnya akan menjadi seperti pada contoh gambar dibawah ini :

Cara Membuat Efek Text Rumput dengan HTML CSS

Maka diatas adalah hasil dari explore saya dalam Cara Membuat Efek Text Rumput dengan HTML CSS. Semoga dapat bermanfaat buat teman-teman dan silahkan explore lagi.

Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Membuat Efek Text Rumput dengan HTML CSS. Sampai bertemu dipembahasan selanjutnya.

Terimakasih