Pehawe Official

Home
Blogger

Cara Membuat Gradasi Teks Dengan CSS Ala Kompi Ajaib

Cara Membuat Gradasi Teks Dengan CSS Ala Kompi Ajaib - Membuat gradasi teks atau gradient text merupakan sebuah tips yang nantinya akan mengubah warna sebuah teks seperti heading (h1, h2, h3, h4, h5 dan h6) ataupun teks lainnya dengan tiga warna sekaligus yang tentunya akan membuat tampilan heading blog atau teks lain di blog kita menjadi lebih keren hanya dengan menggunakan css saja.
Cara Membuat Gradasi Teks Dengan CSS Ala Kompi Ajaib - Membuat gradasi teks atau gradient text merupakan sebuah tips yang nantinya akan mengubah warna sebuah teks seperti heading (h1, h2, h3, h4, h5 dan h6) ataupun teks lainnya dengan tiga warna sekaligus yang tentunya akan membuat tampilan heading blog atau teks lain di blog kita menjadi lebih keren hanya dengan menggunakan css saja.

Tekhnik mengganti warna teks dengan gradasi teks ini tentunya tidak akan memberatkan loading blog kita, dikarenakan gradient text ini hanya menggunakan sedikit css saja. Dan tentunya patut kalian coba untuk mempercantik tampilan blog yang sedang kalian gunakan. Dan berikut contoh Gradasi Teks yang nantinya dapat kalian ganti sendiri warnanya sesuai selera kalian.

Selanjutnya jika kalian ingin Membuat Gradasi Teks Dengan CSS Ala Kompi Ajaib ini, silahkan simak tutorial singkat berikut :

Cara Membuat Gradasi Teks Dengan CSS

Pertma, silahkan login ke Blogger >> Theme >> Edit HTML
Selanjutnya, salin kode CSS berikut kemudian letakkan tepat di atas atau sebelum kode ]]></b:skin

.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 modifikasi warna yang sudah saya tandai dengan warna yang kalian kehendaki. Untuk kode warnanya, kalian bisa buat dulu di https://goo.gl/NC36GL .

Untuk menerapkan Gradasi warna ini ke sebuah teks, kalian tinggal menambahkan class gradient-text pada teks yang ingin di buat gradasi. Seperti contoh :

Berikut contoh penerapan gradasi teks pada teks normal

<div class="gradient-text">Contoh Gradasi Teks Menggunakan CSS</div>

Untuk mengganti warna tulisan tertentu seperti Header blog, wana judul postingan dan lainnya, caranya sama saja. Kalian tinggal menambahkan pada tag headingnya, berikut contoh penerapan gradasi teks pada title blog dan heading lainnya :

<div id='header-inner'><div class='titlewrapper gradient-text'>

<h1 class="gradient-text">Teks Heading 1</h1>

<h2 class="gradient-text">Teks Heading 2</h2>

Semoga Tutorial Cara Membuat Gradasi Teks Dengan CSS Ala Kompi Ajaib kali ini bermanfaat tentunya bagi kalian yang sedang hobi-hobinya ngblog. Salam luar biasa