
Teks Ini Berwarna Pelangi hanya dengan CSS
Bagaimana cara saya membuatnya?
Pertama silahkan copy kode css di bawah ini dengan.gradien { background: #fed369; background: -moz-linear-gradient(to right,#55acee 0,#da84ab 50%,#fcac5e 100%); background: -webkit-linear-gradient(to right,#55acee 0,#da84ab 50%,#fcac5e 100%); background: linear-gradient(to right, #55acee 0,#da84ab 50%, #fcac5e 100%); background-clip: border-box; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00626b', endColorstr='#00f7ca', GradientType=1 ); background-clip: text; -webkit-background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent; }Untuk Warna pelanginya silahkan Kamu sesuaikan dengan selera. Ganti saja angka-angka yang didepannya ada tanda
Cara Pemakaian:
1. Klik Tombol warna, maka akan muncul pilihan warna lain.
2. Setelah seleasi menetukan warna yang diinginkan klik OK. 3. Terakhir untuk memunculkan kode warna silahkan klik Get Color
Pick a Color:
Cara Menerapkannya, cukup berikan
class='gradien'
pada teks yang ingin diberi efek pelangi. Sebagai contoh, saya ingin memberikan efek pelangi pada judul blog atau kata Kelas Math yang terletak dipojok kiri blog ini.Kode awalnya adalah
<h1 class='judulblog'>Kelas Math</h1>maka saya cukup memberikan kata gradien pada class nya. Sehingga kode tadi menjadi :
<h1 class='judulblog gradien'>Kelas Math</h1>Namun, Jika efek pelanginya hanya ingin dimunculkan pada teks yang didekati kursor saja, maka ada sedikit tambahan
:hover
pada css gradien tadi, sehingga kode nya akan menjadi seperti ini :.gradien:hover { background: #fed369; background: -moz-linear-gradient(to right,#55acee 0,#da84ab 50%,#fcac5e 100%); background: -webkit-linear-gradient(to right,#55acee 0,#da84ab 50%,#fcac5e 100%); background: linear-gradient(to right, #55acee 0,#da84ab 50%, #fcac5e 100%); background-clip: border-box; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00626b', endColorstr='#00f7ca', GradientType=1 ); background-clip: text; -webkit-background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent; }Sedangkan untuk cara menggunakan/menerapkannya masih sama dengan cara yang tadi.
Mungkin itu saja yang perlu dilakukan untuk Membuat Teks Warna Pelangi dengan CSS, semoga tulisan ini dapat membantu bagi kamu yang ingin memberikan/membuat judul tulisannya atau teks menjadi berwarna pelangi.