Belakangan ini lagi rame pemakaian background gradient color animation CSS di blog ya kalo saya liat. Kebetulan ada beberapa orang yang nanya cara bikinnya (padahal saya nggak pake). Daripada dijawab satu-satu, mending langsung dibikin tutorialnya. Caranya surprisingly simple karena hanya dibuat menggunakan CSS aja. Yap, kita nggak butuh Javascript segala karena CSS udah bisa melakukan animasi sederhana.
Cara ini bisa diterapkan untuk semua platform blog, seperti Blogger, WordPress, dan sebagainya. Tinggal tambahkan kode ke tempat pengaturan masing-masing.
1. CSS
Ini dia kunci utamanya. CSS berfungsi untuk mengatur warna-warna apa aja yang dipakai, yang nantinya akan digabungkan menjadi gradasi. Kemudian, gradasi itu ditambahkan sedikit animasi agar tampilannya lebih keren lagi.
Tambahkan kode CSS berikut di pengaturan HTML blog masing-masing.
.ignielPelangi {
background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);
background-size: 500% 500%;
-webkit-animation: ignielGradient 12s ease infinite;
-moz-animation: ignielGradient 12s ease infinite;
animation: ignielGradient 12s ease infinite;
}
@-webkit-keyframes ignielGradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes ignielGradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes ignielGradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
2. Penerapan Di Blog
Tinggal tambahkan class ignielPelangi
ke elemen yang diinginkan.
Contoh kalau mau bikin efek gradasi warna bergerak di bagian header:
- Cari kode
<div id='header'>
- Tambahkan class, sehingga hasilnya menjadi
<div id='header' class='ignielPelangi'>
<!-- SEBELUM --> <div id='header'> ... </div>
<!-- SESUDAH --> <div id='header' class='ignielPelangi'> ... </div>
- Jika sudah ada class, tambahkan di belakang class sebelumnya.
<!-- SEBELUM --> <div id='header' class='header'> ... </div>
<!-- SESUDAH --> <div id='header' class='header ignielPelangi'> ... </div>
Jangan lupa cek CSS dari #header
atau .header
untuk memastikan apakah sudah ada value background
atau belum. Karena kalau sudah, kode akan bentrok dan yang ditampilkan tetap CSS dari header awal.
Misalnya seperti 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
}
HAPUS property background
atau background-color
karena akan digantikan oleh class ignielPelangi
.
3. Demo / Preview
(by: igniel.com)
4. Penjelasan
Gradient color background dengan animasi bergerak CSS diatur dalam property background
. Value-nya bisa kamu ubah sesuai keinginan. Berikut beberapa value yang bisa diganti:
4.1. Jenis Gradasi
Ada 2 jenis yang bisa dipakai, yaitu linear
dan radient
. Value yang diperlukan adalah linear-gradient
(seperti contoh diatas) dan radial-gradient
. Linear menciptakan efek bertingkat-tingkat, sementara radient menciptakan efek lingkaran dan elips. Saya nggak bakal terlalu jauh menjelaskan jenis radial, karena di tutorial ini hanya akan fokus ke jenis linear. Tapi saya sertakan contoh agar keliatan bedanya.
4.2. Tingkat Kemiringan
Kalau kamu perhatikan, warna yang tampil agak miring. Ini memang sengaja demi menciptakan efek yang lebih cantik. Dalam contoh, kemiringannya adalah 45 derajat yang ditandai dengan value 45deg
.
4.3. Paduan Warna
Gradasi ini pada dasarnya adalah transisi atau peralihan warna yang sangat lembut dan halus. Karena itu, untuk menciptakan efek gradasi dibutuhkan minimal 2 warna (ya iyalah, kalau cuma 1 mau dialihkan ke warna apa). Dalam contoh, warna yang ditampilkan adalah #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f
. Kamu bisa menambah atau mengurangi jumlahnya (minimal 2 warna), atau mengganti warnanya.
4.4. Lebar Background
Setelah efek gradasi tercipta melalui kode sebelumnya, maka kamu harus menentukan selebar apa background yang berisi warna gradasi tersebut akan muncul. Dalam contoh, lebarnya adalah 500% 500%
. Semakin besar angkanya, maka gradasi akan semakin halus.
4.5. Animasi Bergerak
Nah ini dia yang bikin lebih menarik lagi. Animasi sederhana diperlukan untuk membuat gradasi warnanya bergerak. Pada contoh ditentukan oleh property -webkit-animation, -moz-animation, dan animation
(wajib tulis semua agar mendukung banyak browser) dengan value ignielGradient 12s ease infinite
. Kamu cukup ubah kecepatan animasinya aja, yaitu di value 12s
. Yang lainnya nggak usah. Semakin kecil angkanya, maka semakin cepat gerakannya.
So that's it tutorial membuat animasi background gradient color CSS dari igniel.com. Semoga bisa bikin blog kamu semakin berwarna-warni. Pakenya jangan kelebihan ya, biar nggak alay.
Mantap mbak igniel :3
BalasHapuskalo untuk wordpress gimana?
BalasHapus1) Cari lokasi pengaturan CSS dan tambahkan kode diatas.
Hapus2) Cari elemen HTML yang mau diubah dan tambahkan class 'ignielPelangi'
nuhun neng tutorial na.
BalasHapusTimingnya pas banget mba kwkwk
BalasHapusPertamax mba
BalasHapusmantap, jadi bisa sekalian praktek ga hanya tinggal make aja.
BalasHapusmaaf kak kq saya bingung masang di tamplate saya pake evo magz ga ada kode yang diatas kak. bisa bantu saya? baru belajar soalny. Trimakasih
BalasHapusKode mana yang nggak ada?
HapusKode yang kk sebutin paling atas tu, kak, jadi bingung sy pas mau nerapin di blog sy kk.. Bantu ya makasih
HapusMaksudnya kode <header> atau yang mana?
HapusBikin berat template gk mba??
BalasHapusNggak bikin berat sama sekali karena ini cuma kode CSS.
HapusYang bikin berat blog biasanya adalah javascript.
Mba kode CSS di simpan di pengertian html ituh di mana ya? Apah di atas kode ]]> ? tolong di jawab mba.
BalasHapusBisa diatas ]]></b:skin>
HapusAtau bisa juga diatas </style>
cara bikin popular post begini . da gk tutorial nya ?
BalasHapusKalo wana huruf (Contoh Title/Judul Blog) yang dibuat warna gradient dengan animasi bisa gak mba, saya semaleman otak atik gak berhasil
BalasHapusGreat work
BalasHapusMantap mbak work kodenya. Thanks ya
BalasHapusIni diterapkan untuk background meny navigasi kan ya?
BalasHapusBebas mau dimana aja. Menu / button / footer bisa.
HapusAkhirnya dapat juga.. alhamdulillah... makasih sis..
BalasHapusMbak boleh minta nomor whatsappnya, soal saya mau tanya" tentang background animasi diheader navigasi,terima kasih,tolong
BalasHapusHanya hubungi lewat halaman KONTAK di blog ini.
Hapusmbak untuk penerapan dimenu blogger bisa dijelaskan biasanya letaknya dimana??
Hapusbuat tutorial cara agar background blogger tidak bisa bergerak saat discrool dong mbak
BalasHapusMbak, cara buat header seperti blog ini caranya gimana Mbak ?
BalasHapusKalau mode desktop , bisa memanjang. Header, horizontal menu , dan kotak search
Kalau mobile , berubah menjadi 1 baris berisi (icon search + blogtitle + garis3 menu).
Cara nerapin di blogger bagaimana Mbak ?
tempalte yang saya pake gak ada kode
BalasHapusid='header'>
adanya begini
id='header-container'>
0
600
false
false
BEHIND
0
sama
id='header-inner'>
class='titlewrapper' style='background: transparent'>
class='title' style='background: transparent; border-width: 0px'>
saya menerapkan di template igniplex. header yang berubah di versi mobile. kalo bisa berubah di desktop gmn...
BalasHapusAlamat blognya apa?
Hapus19 Desember 2019.
BalasHapusThanks tutorialnya.berhasil kak