Hallo jumpa lagi sobat
AHS.. kalo kemarin saya posting tentang
Bermain-main Dengan CSS Floating, kalo sekarang saya akan posting tentang
Mengenal CSS Transition
yap,, kebanyakan orang yang masih awam tidak tau apa itu perbedaannya transition:all 0.3s ease-in dan transition:all 0.3s ease-in-out..
sebetulnya saya akan membahas tentang CSS Position,tapi menurut saya itu belakangan aja,sekarang kan musim CSS3 jadi ya saya akan mengambil tema pembahasan tentang Effect CSS3 yaitu ini..
mengenai effectnya sendiri,dia(effect transition)merupakan effect yang paling banyak fiturnya,..
syntaxnya kira" seperti ini :
-webkit-transition: property_name duration timing_function delay;
-moz-transition: property_name duration timing_function delay;
-o-transition: property_name duration timing_function delay;
-transition: property_name duration timing_function delay;
bisa juga dipisah(seperti penulisan margin dan padding,untuk margin bisa dilihat di
Kxmadagaskar)
kira" penulisan pemisahannya seperti ini :
transition-property: property_name;
transition-duration: duration;
transition-timing-function: timing_function;
transition-delay: delay;
nah,sekarang coba sobat lihat tutorial sederhana berikut ini untuk lebih mengenal lagi
CSS Transition..perhatikan baik-baik ya sobat..
Mengenal CSS Transition
oke langsung masuk ke intinya saja ya..,,coba sobat perhatikan contoh dibawah ini :
Kotak Tanpa Transition
pada contoh diatas saya menggunakan
kotak sebagai penanda,nantinya kode
kotak bisa dibuat yang lebih rumit lagi,..
untuk membuat seperti itu sih,semua orang harusnya udah bisa,contohnya begini(sederhana) :
<style type="text/css">
#kotak{
width:100px;
height:100px;
background:#2493c4;
color:#fff;
padding:5px;
text-align:left;
border:1px solid #2493c4;
}
</style>
<div id="kotak">Kotak Tanpa Transition</div>
Mudah bukan?? nah sekarang yang agak lebih rumit..kita akan coba memberikan efek
transition pada kotak dibawah ini,..amati perbandingannya..
Contoh Kotak dengan Transition Ease-In
Kotak Transition Ease-In
yap selesai..,,contoh kode kotak diatas adalah :
<style type="text/css">
#kotak2{
width:100px;
height:100px;
background:#2493c4;
color:#fff;
padding:5px;
text-align:left;
border:1px solid #2493c4;
transition:all 0.3s ease-in;
-moz-transition:all 0.3s ease-in;
-webkit-transition:all 0.3s ease-in;
}
#kotak2:hover{
background:#f03;
border:1px solid #f03;
transition:all 0.3s ease-in;
-moz-transition:all 0.3s ease-in;
-webkit-transition:all 0.3s ease-in;}
</style>
<div id="kotak2">Kotak Transition Ease-In</div>
Mudah bukan?? nah,,sekarang coba sobat bandingkan kotak diatas dengan kotak dibawah ini..
Contoh Kotak dengan Transition Ease-In-Out
Kotak Transition Ease-In-Out
gimana sobat?? udah tau dan mengerti perbedaannya?? nah berikut ini merupakan contoh final kode dari tutorial diatas..
Kotak Resizable Box
untuk mencoba-coba kode,saya sarankan jangan menggunakan dreamweaver,lebih baik pake notepad atau notepad++
Oke,, sampai disini dulu ya sobat..bye..