Skip to main content
Ivhaa Design

follow us

Cara Membuat Gradasi Warna Pada Blog Dengan CSS

Sekarang ini sangat populer blog dengan gradasi warna. Banyak Blogger yang sudah menggunakan nya dan membuat tutorial nya, tapi gradasi warna tidak hanya untuk background saja kita juga bisa menggunakan teks menggunakan gradasi warna. Gradasi warna di blog jika menggunakan JS akan sangat membuat blog menjadi berat loading nya saat di muat, maka dari itu banyak mengakali nya dengan menggunakan CSS aja. Teknik gradasi warna ini bisa di buat untuk Judul blog, Judul Postingan, atau teks lainnya.

Baca juga:



Karena saya telat dan fakum alias tidak memposting blog jadinya banyak yang ketinggalan akhirnya sekarang saya bisa membagikan artikel lagi untuk kalian semua,

Kalian silahkan menggunakan css berikut ini, bisa di buat untuk blog AMP dan Non AMP karena hanya CSS aja.
.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;
}

Untuk kode memanggilnya gunakan <h3 class="gradient text">Ivhaa Network</h3> kalian cukup tambah class gradient text yang ingin di buat gradasi warna. Jika kalian ingin membuat warna lain kalian bisa gunakan tool http://www.colorzilla.com/gradient-editor/.

Jika kalian masih bingung saya kasih contoh jika ingin membuat judul artikel atau judul blog menggunakan gradasi warna.

Contoh Gradasi warna untuk judul blog :
.post h1 {background:linear-gradient(45deg, #00626b, #00f7ca);}

Contoh gradasi warna untuk widget pada sidebar blog :
.sidebar h2 {background:linear-gradient(45deg, #00626b, #00f7ca);}

Keterangan

.post h1 {. . . . . .} untuk judul postingan tag heading h1

.post h2 { . . . . . . } untuk judul postingan tag heading h2

Nah itu tadi adalah tutorial singkat dari saya, mungkin kalian bisa di coba di blog kalian, semoga bermanfaat buat kalian semua.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar