 |
| Lily with infinite colors |
Yang menarik perhatian saya adalah walaupun hal itu bukan hal baru, template mbak Arlina awalnya di penuhi oleh warna gradasi dan infinite. Di mata saya yang selalu kepingin tahu itu menakjubkan, indah dan hidup. Jadi saya mencari tahu: Bagaimana infinite sesungguhnya bekerja dan saya menemukan trik CSS di internet dari berbagai sumber. (Sekali walaupun bukan hal baru saya tetap ingin berbagi)
Perhatikan kode warna infinite berikut:
<!DOCTYPE html>Saya tidak menyangka begitu sederhana dan mudahnya di terapkan ke dalam halaman editor HTML blogger dan secara visual tampilannya adalah sebagai berikut, sempatkan menunggu sampai warna berubah,
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
background: red;
-webkit-animation: mymove 5s infinite; /* Untuk Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Untuk Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {background-color: indigo;}
to {background-color: pink;}
}
/* Sintaks standar */
@keyframes mymove {
from {background-color: indigo;}
to {background-color: pink;}
}
</style>
</head>
<body>
Karena kode warna adalah CSS, elemen ini tidak memberatkan loading template blogger.
Warna bergaya infinite dan gradasi dapat di terapkan pada navigasi menu, header dan footer blog dengan aman. Selamat belajar!
Kalau nggak memberatkan loading template blogger jadinya aman ya
BalasHapuskarena itu bukan image (gambar) hanya sebundel kode warna dalam bentuk elemen
Hapuswah, saya malahan baru tahu ada warna beginian di css. Hanya saja, saya masih bingung kalau mau menempatkan pada navigasi blog.
BalasHapusTinggal buat ID widgetnya saja, misal kalau mau di tempatkan di header maka pergunakan ID header,....
HapusAda beberapa tutorial mengenai hal itu di blog ini