Iseng Javascript haha... :D Part II

Di part 1 sebelumnya udah pake javascript... Nah sekarang pengen iseng2 buat css. Tinggal nambain kode ini di index.html :

Terus kode main.css nya kek gini :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

body { font-family: Helvetice, Arial, sans-serif; text-align:center } h1 { font-size: 28px; margin: 20px; } p { border: 1px solid blue; padding: 20px; margin: 30px auto; width: 50%; font-size: 20px; }

Hasil :

Animasi sederhana part 2 - CSS

Disini dilanjutin maenan animasi untuk CSS yang sebelumnya ada di sini. Nah... disini kita akan melihat bagian2 lain dari animasi di CSS ini.... okie... tampilan kode yang pertama seperti di bawah:

Kodenya ampir sama kyk yang dipostingan sebelumnya, disini yang beda plng yang line 10, 11, dan 18. Nah klu yang line 10 itu jelas itu nentuin arah nilainya bisa "normal", sm "alternate", terus yang 11 itu tipe-tipe style gerakan animasinya, tar kita coba satu-satu digimana efek2nya klu pake tipe yang laen, terus yang line 18, itu ukuran awalnya, dan diline 26 itu ukuran akhir. Nah biar jelas hasilnya seperti ini ehehehe... :D

Terus... Hisoka nambain yang ini "margin:300 auto;" so:

Hasilnya :

yaah.... seperti namanya margin itu ngubah2 posisi marginnya ehehehe... :D silahkan dioprek2 sendiri nilai2nya.... :D terus ditambain "border-radius: 100%;" seperti terlihat di bawah :

Di kode itu 0% border-radiusnya 100% brti dibagian awal jadi bulat terus diakhir2 jadi kotak, soalnya dibagian akhir (yang di 100%) belum ditambain border-radius makanya tampilannya adalah kotak seperti terlihat di bawah :

Jadi klu misalkan kita tambain border-radius: 100% dibagian akhir tar ujung2nya semuanya bulat...

Berikutnya kita ganti directionnya menjadi "normal" :

Daaan...perubahannya....

Wwkwkwkw.... bagusan yang "alternate" yaah... jadi silahkan balikin lagi ke alternate... terus yang diganti berikutnya adalah timing-functionnya, sebelumnya timing-function itu ada beberapa tipe yang bisa dipake misalnya ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1,x2,x3,x4) {cubic-bezier(0.5, 0.2, 0.3, 1.0);}... eeemmm... nyobain yang mana yaaah...! coba yang linear dl....  jadi silahkan diganti ke "linear"

Efeknya

Terus kita coba yang ease-in-out :

Eeeeh.... kekna g' trll jauh bedanya ahahaha.... berikutnya yang cubic-bezier(0.5, 0.7, 0.8, 1.0); daaan ini yang terakhir... jadi dikasih liad kode lengkapnya ajjah seperti di bawah :

Efeknya adalaaaaah....

Yaaapzzz... cukup demikian yang part 2... moga bisa ngeliad efek2 tiap fitur klu diubah... :-)

Animasi Sederhana menggunakan CSS (kotak)

Okiee... Ummm... animasi yang dibuat disini hanya di test di google chrome, jadi untuk browser lain g' tau jalan atw tidak eheheh... :D
Okiee... potongan source codenya yang belum jadi seperti terlihat di bawah :

Hasilnya :

Mari kita tinjau kode yang belom selese di atas,,,bari 6 & 7 itu masing-masing nentuin lebar dan panjang div elementnya, terus line 8 itu jelas nentuin warna backgroundya, terus line 10 itu nama animasinya yang diload dari baris 15-17, trs line 11 itu durasi animasinya dan baris 12 itu iterasinya infinite.
Naaah... yang line 15 ini yang jadi inti animasi kita, 0% itu mksndya pada kondisi animasinya berjalan 0% atau pertama kali elementnya berada di kiri atas dengan warna biru, trs pas udh 12% bergerak ke kanan sambil berubah warna menjadi merah... :D :D :D
Okieee... Mari kita tambahkan progress berikutnya misalkan di kondisi 25% elementnya bergereak ke kanan terus sambil berubah warna menjadi kuning... kodenya :

Hasilnya :

Okiee...sampe sini moga2 dapat sensenya dibagian animasi, jadi terlihat perubahannya dibagian @keyframes ajjah... :D
Naah... trs @keyframesnya dibuat menjadi 100%, dan gerakannya dibuat menjadi kotak. Jadi dari kiri menuju ke kanan, terus ke bawah, terus mengarah ke kiri, ke atas dan kembali ke tempat semula eheheh... Contohnya seperti terlihat di bawah :

Eeehm... disini animation-duration menjadi 9 seconds,,trs tambahan kode dari 25% menjadi 100%... daaan... hasilnya adalaaaaah......

Layering in CSS

Kode simpelnya kyk gini :

Hasilnya :

Ummm... jadi yang nentuin layer-layernya tuh z-indexnya,,, terus klu layer 1 itu paling bawah...alias bakalan tertutupi oleh layer yang paling tinggi nomornya...trs yang prl diperhatiin juga adalah position:relativenya daan top: xxxnya....yaaap... silahkan dicoba2 sendiri untuk variabel2 yang lain trs liad hasil perubahannya... eheheh... :D :D :D

Tipe-Tipe Kursor-CSS

Source code :

Hasil :

*Yaaaaah...penampakan mousenya g' bisa dicapture lewat printscreen hohoho... :D

CSS-Image.... :D

Source codenya kayak gini :

Hahaha... source codenya dikit banget... okieee... yang line 7 itu nentuin besar garis ditepi imagenya,
trs line 8 warna garisnya blue,
line 9 ngebuat imagenya ngisi semua ruangan di browser
line 10 ngebuat imagenya jadi transparant..
line 11 lokasi imagenya ada difolder img sprti terlihat di bawah:

Daaaan.... hasilnya adalaaaaah.....