Warna Pelangi Pada Paragraf Postingan Blog - Hallo Sob Jody Blog, artikel kali ini berjudul Warna Pelangi Pada Paragraf Postingan Blog, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Warna Pelangi Pada Paragraf Postingan Blog
link : Warna Pelangi Pada Paragraf Postingan Blog

Warna Pelangi Pada Paragraf Postingan Blog

K

ode <p></p>biasanya digunakan untuk membuat paragraf baru pada sebuah postingan blog yang fungsinya sama dengan ENTER pada kunci keyboard komputer ,Nah untuk share postingan kali ini kang mahfid akan membuat sebuah tutorial CSS3 Key Frame yang bisa menimbulkan animasi tertentu pada setiap paragraf postingan ketika di dekati Cursor /mouse .

Sebagai contohnya silahkan sorot postingan saya ini ,coba effec apa yang terjadi ,ketika kursor ada di postingan ini maka akan menimbulkan berbagai warna animasi ,itulah effect warna Pelangi yang sengaja saya pasang pada setiap paragraf postingan blog.

Cara membuat nya sangat simpel dari very very gampang sekali ,silahkan sobat pasang kode css3 di bawah ini tepat di bawah kode ]]></b:skin> berikut kodenya :

<style>
@-moz-keyframes glow {
    0% { background-color: green; }
    25% { background-color: pink; }
    50% { background-color: yellow; }
     75% { background-color: orange; }
    100% { background-color: red; }
}
p:hover {
    -moz-animation-name: glow;
    -moz-animation-duration: 4s;
}
    @-webkit-keyframes glow {
    0% { background-color: green; }
    25% { background-color: pink; }
    50% { background-color: yellow; }
     75% { background-color: orange; }
    100% { background-color: red; }
}
p:hover {
    -webkit-animation-name: glow;
    -webkit-animation-duration: 4s;
}
     @-ms-keyframes glow {
    0% { background-color: green; }
    25% { background-color: pink; }
    50% { background-color: yellow; }
     75% { background-color: orange; }
    100% { background-color: red; }
}
p:hover {
    -ms-animation-name: glow;
    -ms-animation-duration: 4s;
} @-o-keyframes glow {
    0% { background-color: green; }
    25% { background-color: pink; }
    50% { background-color: yellow; }
     75% { background-color: orange; }
    100% { background-color: red; }
}
p:hover {
    -o-animation-name: glow;
    -o-animation-duration: 4s;
}

</style>

Silahkan sobat ganti kode warna di atas sesuai selera sobat sendiri ,dan untuk pemasangan di postingan  silahkan pasang kode paragraf  <p>Isi postingan  </p> selamat mencoba dan berexperiment (wassalam)
Perlu diperhatikan:akan lebih baik jika pemasangn kode <p> dan </p> di pasang setelah sobat akan publikasikan postingan .dan dalam bentuk HTML bukan Compose

Demikianlah Artikel Warna Pelangi Pada Paragraf Postingan Blog

Sekian Warna Pelangi Pada Paragraf Postingan Blog, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel Warna Pelangi Pada Paragraf Postingan Blog dan artikel ini url permalinknya adalah http://caratutorialgratis.blogspot.com/2013/03/warna-pelangi-pada-paragraf-postingan.html Semoga artikel ini bisa bermanfaat.

Tweet