Hallo sobat program, alhamdulilah bertemu lagi dengan saya Rizal diwebsite Dumetschool. Dalam kesempatan ini kita akan membahas tentang Cara Membuat Gradient Text HTML CSS.
Dalam membuat gradient text cukup mudah ya teman-teman cukup dengan bantuan generate gradient teman-teman bisa buka untuk generate gradient nya disini >> https://www.cssmatic.com/gradient-generator.
Sebenarnya kenapa kita gunakan gradient pada text ? karena agar text atau kalimat tersebut akan terlihat lebih berwarna atau warna warni agar lebih indah di lihat. Hehe
Oke tanpa basa basi lagi langsung saja ya kita coba Cara Membuat Gradient Text HTML CSS. pertama jalankan/run text-editornya kemudian ketiklah kode HTML nya seperti pada contoh dibawah ini :
|
1 |
<span class="gradient">DUMET SCHOOL</span> |
Jika sudah, langkah selanjutnya teman-teman ketik kode CSS nya seperti pada contoh dibawah ini dan untuk gradientnya silahkan generate di website diatas biar mendapatkan warna yang di inginkan oleh teman-teman.
|
1 2 3 4 5 6 7 8 9 |
body{ font-size: 72px; } .gradient { text-align: center; background: -webkit-linear-gradient(left, rgba(39,214,230,1) 0%, rgba(152,235,97,1) 50%, rgba(248,80,50,1) 100%); color:transparent; background-clip: text; } |
Oke jika sudah langsung saja teman-teman jalankan/run dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan seperti pada contoh gambar dibawah ini :
Lumayan indah ya teman-teman J jadi seperti itulah contoh sederhana dalam Cara Membuat Gradient Text HTML CSS. semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.
Terimakasih