Cara Membuat Teks Warna Pelangi dengan CSS

Kelas Math - Cara Membuat Warna Tulisan Pelangi atau berGradasi ini sebetulnya sudah banyak yang membuat tutorialnya. Namun, dari beberapa sumber yang saya baca, mereka membuat atau memberikan efek pelangi pada teks nya menggunakan javascript. Sebetulnya cara seperti itu tidak masalah dan sah-sah saja, hanya saja bagi sebagian orang yang paham tentang teknik seo terutama pada segi kecapatan blog (karena yang saya baca kecepatan web mempengaruhi hasil indeks google) tentu saja cara Membuat Teks Warna Pelangi dengan menggunakan javascript akan mengurangi kecepatan web ataupun blognya meskipun tidak terlalu signifikan menurunkan kecepatan blog.

Oleh karena itu, disini kelas math akan memberikan sebuat tips tentang cara Membuat Teks Warna Pelangi dengan CSS agar kecepatan blognya tetap kencang atau tidak terpengaruh. Untuk contohnya, Kamu bisa lihat pada contoh teks yang saya beri efek pelangi di bawah ini.

Teks Ini Berwarna Pelangi hanya dengan CSS

Bagaimana cara saya membuatnya?

Pertama silahkan copy kode css di bawah ini dengan Ctrl + C

.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 # nya. Untuk Kode warna dan cara penggunaannya bisa kamu lihat di bawah ini

---

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.

Terimakasih Anda sudah membaca Tulisan kami mengenai Cara Membuat Teks Warna Pelangi dengan CSS. Semoga Bermanfaat dan jangan lewatkan beberapa referensi terkait dibawah ini ya.

Referensi Terkait