Cara Membuat Efek Gradasi Warna Pada Teks dan Background Blog

Buat kalian yang masih utak-atik template blog supaya tampilan dan desainnya bagus mungkin bisa menambahkan efek gradasi warna pada teks judul atau pada background blog seperti bagian navigasi footer atau lainnya.

Efek warna gradasi (color gradient) ini menggunakan bantuan kode CSS yang pastinya tidak akan membuat blog Anda berat, kode css ini memang di khususkan untuk mendesain sebuah tampilan halaman situs web agar terlihat lebih cantik dan bagus.

Penggunaan kode css ini sangat luas jika Anda paham cara penerapannya, dengan kode css ini Anda bisa memberikan efek warna-warni pada teks atau judul blog Anda, selain itu bisa mengubah warna background blog dengan warna gradasi yang akan mempercantik tampilan blog Anda.

Namun disini saya hanya akan memberikan tutorial membuat efek warna gradasi untuk judul postingan dan juga background pada blog Anda.

Kode css yang bisa Anda gunakan untuk membuat efek gradasi pada teks judul dan background blog bisa Anda lihat di bawah ini.

DEMO

Untuk Teks:

Cara Membuat Efek Gradasi Warna Pada Teks

h1 {background: -webkit-linear-gradient(45deg, #5E64EE, #5EEE66);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}

Kode css di atas berfungsi untuk mengubah judul teks yang menggunakan tag heading H1. Anda bisa mengubah atau menambahkan tag heading lainnya misal H2 dan H3. Selain untuk mengubah teks, tulisan, atau judul postingan, kode css di atas juga bisa digunakan untuk mengubah warna pada judul widget blog Anda.

Untuk Background:

Cara Membuat Efek Gradasi Warna Pada Background

.post h1 {background:linear-gradient(45deg, #5E64EE, #5EEE66);}

Kode css di atas berfungsi untuk mengubah warna background pada judul postingan yang memiliki tag heading H1, Anda bisa menyesuaikannya dengan tag heading yang digunakan pada template blog Anda. Selain itu, kode css ini dapat digunakan untuk mengubah warna background seperti pada bagian menu navigasi, judul widget, dan juga footer.

Kedua kode css di atas merupakan kode dasar yang dapat menampilkan efek warna gradasi, mungkin Anda masih perlu menyesuaikannya dengan tambahan kode lainnya seperti padding dan color pada teks.

Baca juga: Cara Mengubah Warna Pada Kata Pertama Judul Postingan dan Widget

Untuk mengubah warna agar sesuai dengan keinginan Anda silahkan gunakan tools online Kode Warna HTML.

Kode ID dan Class yang digunakan pada umumnya sebagai berikut:
.post h1 {kode css} ini untuk judul postingan dengan tag heading h1.
.post h2 {kode css} ini untuk judul postingan dengan tag heading h1.
.sidebar-wrapper h4 {kode css} ini untuk judul widget dengan tag heading h4.
.sidebar-wrapper h3 {kode css} ini untuk judul widget dengan tag heading h3.
#header-container {kode css} atau #header-wrapper {kode css} ini untuk menu navigasi.
#footer {kode css} atau #footer-container {kode css} ini untuk footer.

Catatan:
Mungkin bagian-bagian kode id dan class pada template yang Anda gunakan berbeda, untuk mengetahuinya silahkan gunakan inspect element, caranya klik pada bagian tertentu yang ingin Anda ketahui id atau classnya kemudian klik inspect.

Itulah artikel mengenai cara membuat efek gradasi warna pada teks dan background blog, semoga bermanfaat.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini