Cara Menciptakan 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 menyerupai heading (h1, h2, h3, h4, h5 dan h6) ataupun teks lainnya dengan tiga warna sekaligus yang tentunya akan menciptakan tampilan heading blog atau teks lain di blog kita menjadi lebih keren hanya dengan memakai css saja.

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

Selanjutnya kalau 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 aba-aba CSS berikut lalu letakkan sempurna di atas atau sebelum aba-aba ]]></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 aku tandai dengan warna yang kalian kehendaki. Untuk aba-aba warnanya, kalian sanggup 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 pola :

Berikut pola penerapan gradasi teks pada teks normal

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

Untuk mengganti warna goresan pena tertentu menyerupai Header blog, wana judul postingan dan lainnya, caranya sama saja. Kalian tinggal menambahkan pada tag headingnya, berikut pola 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

Share this post