Cara Membuat Background Gradasi Warna Bergerak

Cara Membuat Background Gradasi Warna Bergerak (Animation Pure CSS) - Belakangan ini lagi rame pemakaian background gradient color CSS di blog ya kalo saya liat. Kebetulan ada beberapa orang yang nanya cara bikinnya, kerena mereka tertarik melihat templte VioMAX. 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 Membuat Background Gradasi Warna Bergerak


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.
.solusimenarikPelangi {
    background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);
    background-size: 500% 500%;
    -webkit-animation: solusimenarikGradient 12s ease infinite;
    -moz-animation: solusimenarikGradient 12s ease infinite;
    animation: solusimenarikGradient 12s ease infinite;
}
@-webkit-keyframes solusimenarikGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes solusimenarikGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes solusimenarikGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

2. Penerapan Di Blog

Tinggal tambahkan class solusimenarikPelangi ke elemen yang diinginkan.
Contoh kalau mau bikin efek gradasi warna bergerak di bagian header:
#1 Cari kode <div id='header'>
#2 Tambahkan class, sehingga hasilnya menjadi <div id='header' class='solusimenarikPelangi'>
<!-- SEBELUM -->
<div id='header'>
  ...
</div>
<!-- SESUDAH -->
<div id='header' class='solusimenarikPelangi'>
  ...
</div>
#3 Jika sudah ada class, tambahkan di belakang class sebelumnya.
<!-- SEBELUM -->
<div id='header' class='header'>
  ...
</div>
<!-- SESUDAH -->
<div id='header' class='header solusimenarikPelangi'>
  ...
</div>

3. 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:

3.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.

3.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.

3.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.

3.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.

3.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 solusimenarikGradient 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. Semoga bisa bikin blog kamu semakin berwarna.

Berlangganan update artikel terbaru via email:

0 Response to "Cara Membuat Background Gradasi Warna Bergerak"

Post a Comment

Jika ada yang kurang jelas silahkan tambahkan ke kolom komentar dibawah ini.
- Dilarang SPAM
- Dilarang Menghina
- Dilarang PROMOSI

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel