Cara Membuat Background Gradasi Warna Pelangi

Cara Membuat Background Gradasi Warna Pelangi - Background gradasi adalah konsep untuk menggabungkan dua warna atau lebih menjadi satu karakter. biasanya penggunaan background gradasi atau gradient warna dengan animasi css digunakan untuk mempercantik tampilan website atau blog.

Pada kesempatan kali ini saya akan memberikan panduan tutorial cara membuat background gradasi warna pelangi, khususnya pada blog yang akan kita modifikasi tampilannya. Cara membuatnya tidak dikatakan susah tapi ikuti saja panduannya yang akan saya jelaskan lebih detail agar anda bisa mengerti cara membuatnya dan meletakkan kode di theme blog yang anda gunakan.

Disini akan saya jelaskan secara detail agar anda bisa memahaminya, karena ketika ingin membuat background gradien ini anda harus mengetahui posisi kode-kode yang akan kita pasang pada setiap template blog. cara ini bisa diterapkan ke semua platform blog, seperti blogger, wordpress, dan lain sebagainya. Cukup tambahkan kode ke tema pengaturan masing-masing. untuk itu mohon diperhatikan baik-baik agar tidak terjadi kesalahan.

Cara Membuat Background Gradasi Warna

Berikut ini adalah langkah-langkah Cara Membuat Background Gradasi Warna Pelangi :

1. Tambahkan CSS

Salah satu kunci utama yang harus kita lakukan adalah menambahkan kode css ke pengaturan tema. Kode css berfungsi untuk mengatur warna yang akan kita gunakan, yang nantinya akan digabungkan menjadi gradasi warna. Setelah itu pada bagian gradasi kita akan menambahkan sedikit animasi bergerak agar terlihat lebih menarik. Seperti biasa login ke blog, setelah itu di dashboard blogger pilih tema → sesuaikan → edit html.

Setelah itu cari kode ]]> </ b: skin> atau ketik saja kata kunci dengan menekan tombol ctrl+f, tulis b: skin lalu enter dan cari kodenya. Setelah itu kita akan menambahkan kode css di bawah ini salin dan paste kode tepat di atasnya.

2. Implementasi Blog

Implementasi Blog disini Anda hanya perlu menambahkan class codinganPelangi ke elemen yang diinginkan. berikut adalah contoh jika anda ingin membuat efek gradasi warna bergerak di header:

Cari kode <div id='header'> di Edit Html template yang Anda gunakan.
Tambahkan class, sehingga hasilnya menjadi <div id='header' class='codinglanPelangi'>

Contoh :

<div id='header'> ... </div>

<div id='header' class='codinglanPelangi'> ... </div>

3. Tambah Kode Class

Jika sudah ada class, tambahkan di belakang class sebelumnya.

Contoh :

<div id='header' class='header'> ... </div>

<div id='header' class='header codinglanPelangi'> ... </div>

Sekarang coba anda cek dulu css #header atau .header untuk memastikan apakah ada value background atau tidak. karena jika demikian maka kode akan bentrok dan yang akan ditampilkan tetap css dari header yang sebelumnya.

Contoh seperti kode di bawah ini :

#header {   background: #ff000; /* bisa juga menggunakan property 'background-color' */   position: relative;   display: block }  /* ATAU */  .header {   background: #ff000; /* bisa juga menggunakan property 'background-color' */   position: relative;   display: block }

Pemberitahuan - Apabila jika terjadi hal seperti kode diatas, maka hapus property background atau background-color karena akan digantikan oleh class codingolanPelangi.

Setelah semua selesai dan pada saat Anda menyimpan / save template jika terjadi eror dengan informasi atau keterangan seperti ini The widget settings in widget with id <b>AdSense1</b> is not valid. An internal error occurred. Please try again. jangan khawatir itu hanya keterangan yang menyatakan Pengaturan widget di widget dengan id <b>AdSense1</b> tidak valid. Terjadi kesalahan internal. Tetapi dengan keterangan demikian sistem sudah secara otomatis menyimpan data kita. Setelah itu kembali ke dashboard blogger dan Anda bisa mengecek perubahan disana dan pilih lihat blog.

Lihat Demo

Nilai yang dapat diubahWarna gradien latar belakang dengan berbagai animasi yang bergerak diatur oleh css di properti latar belakang. Berikut ini adalah beberapa Nilai yang dapat diubah sesuai keinginan :

1. Jenis Gradasi

Ada dua jenis yang dapat digunakan, yaitu linear dan radient. nilai yang dibutuhkan adalah linear-gradient (seperti kode di atas) dan radial-gradient. Linear menciptakan efek bergradasi, sedangkan radient menciptakan efek melingkar dan elips. Disini saya tidak terlalu detail untuk menjelaskan tipe radial satu persatu. Karena dalam tutorial ini hanya fokus pada tipe linier. untuk itu saya sertakan perbedaannya agar lebih jelas dan dimengerti. contohnya seperti gambar dibawah ini.

cara membuat background gradasi warna pelangi

2. Tingkat Kemiringan

Jika kita perhatikan warna-warna yang muncul dengan posisi agak miring. ini sengaja dilakukan agar bisa menciptakan efek yang lebih indah. Dalam contoh, kemiringannya adalah 45 derajat yang ditunjukkan dengan nilai 45deg.

3. Perpaduan Warna

Gradasi ini pada dasarnya adalah transisi warna yang sangat lembut dan halus. Oleh karena itu untuk membuat efek gradien dibutuhkan minimal 2 warna. contoh warna yang akan ditampilkan adalah # f22613, # f89406, # 26a65b, # 5868ec, # f54e80, # f7ca18, # d2527. Anda dapat menambah atau mengurangi jumlahnya, misalnya setidaknya dua warna atau anda dapat mengubah warnanya.

4. Animasi Bergerak

Mungkin ini bagian yang lebih keren dalam animasi sederhana diperlukan untuk membuat gradasi warna yang bergerak. Pada keterangan telah ditentukan oleh property seperti -webkit-animation, -moz-animation, dan animation. → wajib tulis semua agar mendukung banyak browser. dengan value → codinglanGradient 12s ease infinite anda cukup ubah kecepatan animasinya saja. seperti di value → 12s dan yang lainnya tidak usah. semakin kecil angkanya, maka semakin cepat gerakannya.

Penutup

So the tutorial how to make a rainbow color gradient background. If you review the explanation above, I can guarantee that you will find many concepts or ideas to be developed. Thank you for visiting this simple blog.