Skip to main content

TRIK CSS DASAR UNTUK PEMBUATAN WARNA INFINITE BERANIMASI PADA BLOG

lily with infinite colors
Lily with infinite colors
Saya seolah baru hidup kemaren sore, ketika menemukan template buatan Arlina dan saya mencoba menirunya melalui inspeksi halaman pada browser Chrome. Dan berhasil! (maafkan saya).

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>
<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>
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,
Tunggu hingga warna berubah dari indigo ke pink atau sebaliknya:
Perhatian!: Anismasi CSS ini tidak bekerja di Internet Explorer 9 atau browser browser yang lebih tua.
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!

Mungkin Anda Suka:

Comments

  1. Kalau nggak memberatkan loading template blogger jadinya aman ya

    ReplyDelete
    Replies
    1. karena itu bukan image (gambar) hanya sebundel kode warna dalam bentuk elemen

      Delete
  2. wah, saya malahan baru tahu ada warna beginian di css. Hanya saja, saya masih bingung kalau mau menempatkan pada navigasi blog.

    ReplyDelete
    Replies
    1. Tinggal buat ID widgetnya saja, misal kalau mau di tempatkan di header maka pergunakan ID header,....

      Ada beberapa tutorial mengenai hal itu di blog ini

      Delete

Post a Comment

Ajukan pertanyaan dan berikan detailnya.

Jika ingin komen dengan menyisipkan kode HTML, parse terlebih dahulu kodenya di :
Blogcrowds
Lalu hasil parse pastekan ke dalam kotak komentar.

Komentar yang kami hapus dan masih menyisakan profile komentatornya bukan komentar kritik, kami tidak anti kritik samasekali. Tapi komentar yang menyertakan link aktif. Karena saran kritik dan bahkan celaan untuk blog dengan niche seperti ini amatlah penting untuk di jadikan alat koreksi. Terimakasih!

Popular Posts

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

KISAH MENAKJUBKAN DI DALAM CANGKANG TELUR

Kisah UAS Dan Mellya Juniarti: Tidak ada yang abadi.

Copyright © editblogtema. All rights reserved.