Apakah desain infinite color itu dan bagaimana cara menerapkannya

simbol infinity


Apakah sebenarnya warna infinite pada desain web?

Infinite color atau warna infinite secara harfiah bisa bermakna: Pewarnaan tanpa batas, melebihi teknik menggabungkan dua warna atau lebih, atau juga sejauh ini melebihi teknik penggabungan warna gradasi yakni menggabungkan dua warna dalam batasnya yang halus (pernah di gunakan mas Sugeng pada desain navigasi menu viomagz-nya yang terdahulu).

Teknik ini awalnya di terapkan pada seni manipulasi gambar di photoshop, dan di dunia desain website ia berubah menjadi kombinasi warna yang beranimasi atau berubah rubah pada interval waktu yang telah di tetapkan oleh pengaturan CSS menggunakan teknik webkit-animation.

Namun bisa juga diterapkan dengan pengaturan CSS biasa, contoh jika kita ingin menggabungkan 4 warna pink, biru, merah dan hitam dan menjadikannya beranimasi:

Kode CSSnya:
<style>
#myDIV {
width: 300px;
height: 200px;
background: red;
animation: mymove 3s infinite;
}
@keyframes mymove {
from {background-color: pink;}
to {background-color: black;}from {background-color: blue;}
to {background-color: red;}
}
</style>
Kode HTMLnya:

<div id="myDIV"></div>

Contoh visualnya:

See the Pen infinite color by Sufyan Yaan (@sufyan-yaan) on CodePen.


Catatan:Contoh Animasi CSS ini mungkin tidak dapat tampil pada browser browser yang lebih tua.

Mungkin diantara Anda ada yang menggunakan template buatan Arlina Desizn, ciri cirinya adalah template dengan warna infinite, warna warni beranimasi. Sebenarnya Anda bisa mempelajari trik CSS ini melalui halaman w3school, akan tetapi disini saya akan memberikan contoh penerapannya ke dalam halaman HTML blogger.

Cara menggabungkan dua, tiga dan banyak warna telah kami bahas sebelumnya pada artkel yang berjudul:

CARA MEMBUAT GRADASI WARNA PADA HEADER BLOGGER

Di sana kami berikan contoh bagaimana menggabungkan dua warna, lalu bagaimana membuat gradasi, dan terakhir menerapkan infinite color ke dalam header template bawaan blogspot. Kami terapkan pada menubar (navbar) bagian bar navigasi atas halaman blog ini.

Contoh:
.Navigasi-menu{position:sticky;position:-webkit-sticky;top:0;z-index:2;background: linear-gradient(-50deg, #F0FFFF, #FFB6C1, #20aadb, #87CEFA);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%}};font:$(Unifraktur Maguntia);font-size:14px;color:#fff;text-transform:uppercase}
di letakan di atas ]]></b:skin> atau </style>

HTML akan di tulis dengan Class sebagai berikut:
<div class='Navigasi-menu'>
Di tempatkan di atas <body> atau <body .
 
Perhatikan baik baik: .Navigasi-menu... adalah spot awal pengaturan CSS untuk membentuk tampilan HTML . Ia bisa disebut sebagai 'class' atau bisa juga (dalam kondisi tertentu) sebagai 'ID' dan pada pengaturan HTML editblogtema ia ditetapkan dan di identifikasi sebagai 'class', contoh pada template kami HTML tersebut kami tulis sebagai berikut:

<div class='Menu'>

Maka pengaturan CSS-nya saya tulis sebagai berikut (berikut background infinite color-nya):
.Menu{position:sticky;position:-webkit-sticky;top:0;z-index:2;background: linear-gradient(-50deg, #F0FFFF, #FFB6C1, #20aadb, #87CEFA);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%}};
Karena setiap template memiliki struktur dan susunan material HTML yang berbeda beda, Anda dapat menanyakan langsung pada kami pada kolom komentar jika ingin meneerapkannya pada template template default (bawaan blogger) atau template custom buatan pihak ketiga. Hanya dengan cara demikian kami dapat menganalisa jenis template yang sedang di pergunakan oleh halaman, khususnya blogger.

Akan tetapi teknik ini sangat cocok di pergunakan pada pembuatan menu navigasi scrolling horisontal menu yang kami terapkan pada halaman blog ini.

Pertanyaan lain: Beratkah infinite colors atau warna infinite jika di terapkan ke dalam template blog? Jawabannya tidak. Tergantung seberapa banyak DOM yang di hasilkannya, jika ia tidak terkait dengan link Javascript maka hasilnya hampir tidak mempengaruhi loading atau kecepatan halaman blog.Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!

sumber kode peraga: w3school.

4 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Sharing yang menarik min, warna infinity ini bisa diaplikasikan karena lebih simpel visualnya

    BalasHapus

  2. Menarik, tapi saya belum terpikir menggunakannya dalam waktu dekat, jadi saya memilih menyimpan saja kode yang Anda bagikan.

    Diluar topik ini ada satu style yang ingin saya tanyakan, entah mereka menggunakan gambar atau bagaimana, Anda tau aplikasi Axis?, diaplikasi tersebut dia membuat style melengkung seperti gelombang, apakah mereka melakukannya dgn css atau gambar*, menurut Anda bagaimana membuat style gelombang itu?

    BalasHapus
    Balasan
    1. itu desain curve SVG, dapat di terapkan dengan mudah ke bagian header dan footer blog, seperti blognya bung Franky

      Hapus
Lebih baru Lebih lama

Formulir Kontak