Cara Membuat Gradien Color Dengan Animasi CSS

Cara Membuat Gradien Color Dengan Animasi CSS
Kali ini saya akan share tentang Gradien Color karena banyak sekali para blogger sekarang menggunakan Gradien Color, tentu saja bagi yang belum menggerti atau awam pasti sulit untuk menerapkan CSS Gradien. Sebenarnya Gradien Color menggunakan Animation CSS yang dimana setiap warna akan berubah tentu saja kodenya mudah di ingat bila sering dipelajari oleh kalian.

Untuk menerapkan Gradien Color pada blog kalian sangat mudah, pasti jangan adanya bentrok antara Background utama dengan Background Gradien karena nanti Gradien Color tidak akan muncul, Karena itu jika ingin memasang dibagian Header pastikan kalian hapus CSS Background pada Header dulu. Baru kamu pasang Gradien Color nanti tidak akan bentrok dan bakalan Sukses seperti di blog ini.

Cara Penerapan Gradien Color


  1. Silahkan masuk ke Dashboard Blog
  2. Setelah itu Klik Template/Tema > Klik Edit HTML
  3. Nah dibagian ini cari kode #header-wrapper jika di blog saya, lalu hapus kode Background nya seperti dibawah ini
  4. #header-wrapper {
     background: #000; /* Dihapus */
     max-width: 1000px;
     margin: 0 auto;
     position: relative;
    }
  5. Maka akan hasilnya jadi seperti ini
  6. #header-wrapper {
     max-width: 1000px;
     margin: 0 auto;
     position: relative;
    }
  7. Setelah itu kalian copy kode berikut
  8. {background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}
    @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
  9. Jika sudah buat pemanggilan kode terlebih dahulu, misal #header-wrapper{paste kode animasinya}
  10. #header-container, #back-to-top{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}
    @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
  11. Penempatan kode dibawah <style> or <b:skin> . dibawahnya jangan diatasnya
  12. Lalu kalian Save/Simpan Template.
  13. Coba kamu lihat Tampilan nya pasti akan berubah warna
  14. Selesai 
  15. Keterangan : Pada kode diatas hapus bagian Background yang sudah saya kasih tanda /* Dihapus */

Pemanggilan kode


Pada pemanggilan kode adalah pada bagian HTML misal kan jika saya ingin memanggil kode <div class="panggil"/> maka yang harus dipanggil ada kode .panggil , kenapa pakai titik? jika kamu tahu perbedaan antara Class dan Id maka akan tahu.

Class dipanggil menggunakan tanda "Titik"
Id dipanggil menggunakan tanda "Pagar"

Lantas untuk memanggil kode pada nomor 6 yaitu seperti ini.

<div class="header-wrapper"/>
lalu buat cssnya
<style>
.header-wrapper{kode gradien}
</style>

Mudah banget bukan? yaps, untuk mengganti warna dengan warna yang kalian mau silahkan ganti pada bagian warna seperti #EE7752 dan ganti dengan warna yang mau dipakai oleh kalian. Nah itulah cara untuk membuat gradien color di blog.

14 Responses to "Cara Membuat Gradien Color Dengan Animasi CSS"

  1. Kurang jelas mas, bagian pemanggilan kode sama penempatannya.

    ReplyDelete
    Replies
    1. penempatan kode dibawah <style> or <b:skin> untuk pemanggilan harus memasukan dulu kode yang ingin dipanggil, contoh #header{kode-animasi-diatas}

      Delete
  2. Replies
    1. iya mas, nanti saya bikin videonya :)

      Delete
  3. Bingung masalah kode pemanggilan BOSS

    ReplyDelete
    Replies
    1. Pemanggilan kode itu adalah HTML nya mas, jika yang ingin dipanggil adalah Header, maka kasih pemanggilan #header-wrapper atau .header-wrapper lalu kasih kode menjadi seperti berikut #header-wrapper{kode gradien}

      Delete
  4. Mantap om, ini nih yg lagi hits 😂

    Mampir yaa malasberkreasi.blogspot.co.id 😁

    ReplyDelete
    Replies
    1. hahaha, iya yang lagi hits nya nih. Pasti nanti saya mampir :)

      Delete
    2. susah om belom paham penempatannya dari tadi ga work mulu pas penempatan no 5 dan 6. kurang paham

      Delete
    3. nomor 5 itu kode gradient dan nomor 6 kode yang akan dipanggil apa kalau saya #header-container nah kalau agan bisa ganti jadi #navigasi-wrapper {kode gradien nya}

      Delete
    4. yes, berhasil.. thanks tutorialnya mas,
      saya dengan kode berikut dibawah skin dgn tag style


      .header-wrapper{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}
      @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

      Delete
  5. hehehehe . thanks gan work > mampir juga gan ke https://haxor4u.blogspot.co.id/

    ReplyDelete

Centang kotak "NOTIFT ME" agar mendapatkan notifikasi melalui email ketika ada yang membalas komentar kamu.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Δ