Buat kalian yang masih utak-atik template blog supaya tampilan dan desainnya bagus mungkin sanggup menambahkan efek gradasi warna pada teks judul atau pada background blog ibarat bab navigasi footer atau lainnya.
Efek warna gradasi (color gradient) ini memakai proteksi arahan CSS yang pastinya tidak akan menciptakan blog Anda berat, arahan css ini memang di khususkan untuk mendesain sebuah tampilan halaman situs web semoga terlihat lebih manis dan bagus.
Penggunaan arahan css ini sangat luas jikalau Anda paham cara penerapannya, dengan arahan css ini Anda sanggup memperlihatkan efek warna-warni pada teks atau judul blog Anda, selain itu sanggup mengubah warna background blog dengan warna gradasi yang akan mempercantik tampilan blog Anda.
Namun disini aku hanya akan memperlihatkan tutorial menciptakan efek warna gradasi untuk judul postingan dan juga background pada blog Anda.
Kode css yang sanggup Anda gunakan untuk menciptakan efek gradasi pada teks judul dan background blog sanggup Anda lihat di bawah ini.
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 memakai tag heading H1. Anda sanggup mengubah atau menambahkan tag heading lainnya misal H2 dan H3. Selain untuk mengubah teks, tulisan, atau judul postingan, arahan css di atas juga sanggup dipakai 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 mempunyai tag heading H1, Anda sanggup menyesuaikannya dengan tag heading yang dipakai pada template blog Anda. Selain itu, arahan css ini sanggup dipakai untuk mengubah warna background ibarat pada bab sajian navigasi, judul widget, dan juga footer.
Kedua arahan css di atas merupakan arahan dasar yang sanggup menampilkan efek warna gradasi, mungkin Anda masih perlu menyesuaikannya dengan komplemen arahan lainnya ibarat padding dan color pada teks.
Baca juga: Cara Mengubah Warna Pada Kata Pertama Judul Postingan dan Widget
Untuk mengubah warna semoga sesuai dengan harapan Anda silahkan gunakan tools online Kode Warna HTML.
Kode ID dan Class yang dipakai 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 sajian navigasi.#footer {kode css} atau #footer-container {kode css} ini untuk footer.Catatan:
Mungkin bagian-bagian arahan id dan class pada template yang Anda gunakan berbeda, untuk mengetahuinya silahkan gunakan inspect element, caranya klik pada bab tertentu yang ingin Anda ketahui id atau classnya lalu klik inspect.
Itulah artikel mengenai cara menciptakan efek gradasi warna pada teks dan background blog, semoga bermanfaat. Sumber http://www.caramanual.com
Buat lebih berguna, kongsi: