Ditulis oleh: Ditulis pada: 3/05/2018
Memberikan gradasi warna bukan hanya pada background saja, namun juga bisa diterapkan pada teks dengan teknik CSS saja. Sehingga dengan ini kita tidak perlu menggunakan gambar untuk menampilkan teks dengan gradasi warna.Sehingga dengan hanya menggunakan CSS saja maka tidak akan membebani loading blog ketimbang menggunakan gambar yang sudah tentu dapat menambah loading pada blog.
Teknik CSS gradasi warna ini bisa kita terapkan pada judul blog, judul postingan, atau pada teks lainnya agar tampil berbeda dengan teks lainnya.
Teks dengan warna gradasi bisa kita gunakan pada judul blog, judul postingan, tag h1, h2, h3, h4, h5, atau h6 atau pada teks lain yang ingin kita buat tampil berbeda dengan teks lainnya sehingga teks ini menjadi lebih berwarna.
Sebagai contoh di bawah ini saya buatkan teks dengan warna gradasi dengan paduan 3 buah warna. Tentu saja paduan warna ini bisa dibuat sesuai selera kita, dan sudut gradasinya juga bisa sesuai selera kita.
Teks Ini Ditampilkan Dengan Warna Gradasi
Untuk membuat seperti itu, silahkan gunakan kode CSS berikut ini:
.gradient-text{
background:#00626b;
background:-moz-linear-gradient(left,#00626b 0,#61c419 50%,#00f7ca 100%);
background:-webkit-linear-gradient(left,#00626b 0,#61c419 50%,#00f7ca 100%);
background:linear-gradient(to right,#00626b 0,#61c419 50%,#00f7ca 100%);
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;
}
Silahkan ganti background yang saya tandai di atas sesuai dengan gradasi yang diinginkan.
Kemudian tambahkan class
gradient-text pada tag yang ingin dibuat gradasi, sebagai contoh seperti kode di bawah ini.
<h3 class="gradient-text">Ini text yang dikasih gradasi warna</h3>
Untuk mengganti background dengan gradasi warna yang kita inginkan silahkan gunakan tool gradasi warna berikut: http://www.colorzilla.com/gradient-editor/
Selesai, semoga bermanfaat...