CSS3 Color Transition

Halo semua.... :D
penulis mau coba fitur baru nih.. hehe... kali ini penulis akan membahas mengenai CSS3 Transition, yupz CSS ini digunakan untuk merubah bentuk, warna atau ukuran dari sebuah element dan yang akan kita bahas kali ini adalah color transition atau perubahan warna.

apabila seperti di bawah ini kodenya, pasti akan patah ketika di hover

.square {
	width: 100px;
	height: 100px;
	background: #2d89ef;
}
	
.square:hover {
	background: orange;
}

 

 

 

nah, terlihat patah kan? sekarang kita coba tambahkan css dibawah ini pada bagian :hover dan css utamanya

transition:background .5s;
-webkit-transition:background .5s;
-moz-transition:background .5s;
-o-transition:background .5s;

sekarang kita cek :D

 

 

 

Cantik bukan?

Berikut penjelasannya

untuk bagian -webkit- digunakan pada web browser seperti Google Chrome, Safari
untuk bagian -moz- digunakan pada web browser Mozilla Firefox
untuk bagian -o- digunakan pada web browser Opera

untuk bagian background itu digunakan untuk mendefinisikan property mana yang akan di ubah
untuk bagian .5s itu digunakan untuk mendefinisikan waktu perubahan, yang mana s dalam  satuan detik

Untuk kali ini cukup dan Terima Kasih... wink




Thursday, 17 Sep 2015 12:27 PM Arief Setya
Sign In
Sign In to Your Account :)
Sign In or Sign Up
 
Follow Us on Twitter
Find Us on Facebook