RGB Background menggunakan CSS

RGB ya ?? hmm

RGB Background menggunakan CSS ??? maksudnya yang 255, 255, 255 itu ya ??

iya itu benar, tapi yang dibahas kali ini adalah pergantian warna background setiap beberapa saat tanpa perlu refresh. emang bisa ya ??

nah di Ayo Ngoding kali ini, admin akan memberikan sebuah contoh yang mungkin sedang kalian semua cari-cari, yaitu mengubah warna background setiap saat tanpa refresh atau reload. yang diperlukan yaitu 1 file php atau html dan css optional :D, kenapa optional karena css dapat ditulis didalam php atau html. nah sekarang kita akan membuat sebuah file php dan cssnya ya seperti pada gambar dibawah ini

nah kita buka file index.php menggunakan text editor masing-masing

terus tambahin syntax biasa saja

 

<!DOCTYPE html>
<html>
<head>
<title>Ayo Ngoding</title>
<linkrel="stylesheet"type="text/css"media="screen"href="style.css" />
</head>
<body>
</body>
</html>

nah setelah itu kita tambah sebuah stynax pada css nya sebagai berikut

 

body{

 animation-name: bodi;

 animation-duration: 20s;

 animation-iteration-count: infinite;

 }
 @keyframes bodi{

0% {background-color: red;}
25% {background-color: green;}
50% {background-color: blue;}
75% {background-color: green;}
100% {background-color: red;}
 }


nah setelah itu kita run aja, tau kan caranya ??

maka tampilannya backgroundnya akan seperti pada gambar dibawah ini

kalo masih belum percaya bisa di coba sendiri ya 😀

sebenarnya metode ini tidak hanya untuk background teks pun juga bisa,

berikut admin contohin untuk teks, tapi backgroundnya di putih dulu ya 😀

 

<!DOCTYPE html>

<html>

<head>

<title>Ayo Ngoding</title>

<linkrel="stylesheet"type="text/css"media="screen"href="style.css" />

</head>

<body>

<h1>

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam sapiente sit debitis commodi eaque ea eos, qui labore delectus eum accusamus perspiciatis quae nihil doloribus dolore, porro quos saepe dolor?

</h1>

</body>

</html>

 

h1{

 animation-name: bodi;

 animation-duration: 20s;

 animation-iteration-count: infinite;

 }
 @keyframes bodi{

0% {color: red;}
25% {color: green;}
50% {color: blue;}
75% {color: green;}
100% {color: red;}
 }


nah mungkin hanya ini saja yang dapat admin berikan kepada kalian semua, untuk warna bisa menggunakan warna hexadesimal atau rgb. mungkin untuk background bisa diganti gambar.

sekian dari admin, apabila ada hal yang ini ditanyakan bisa di kolom komentar ya 😀

SALAM NGODING !!!!

Leave a Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.