CSS 3 Generator Part 2

Hello, ketemu lagi di pengenalan totorial lanjutan untuk CSS 3 Generator. CSS 3 Generator | www.css3generator.com

Kita melihat ada banyak sekali tool yang disiapkan oleh CSS 3 Generator. Sudah ada yang utak-atik tools yang lainnya?  Di pertemuan lanjutan kali ini, saya akan membahas efek Transition. Dimana nanti kalau saya hover, maka akan ada efek transisi. Untuk singkatnya kita langsung praktek ya.

1. Untuk latihan, kita akan buat file html dengan nama "index.html" dengan isinya sebagai berikut. Untuk totorial kali ini, saya anggap teman-teman sudah pernah meng utak-atik HTML dan CSS.

Kalau di Preview, maka hasilnya seperti ini.

2. Sekarang, saatnya kita memberikan efek Transition dari CSS 3 Generator.

3. Silahkan ke websitenya, lalu klik menu Transition, maka akan muncul form seperti gambar di bawah ini.

4. Silahkan di bagian "Property" pilih ALL, "Duration" 1 Second, dan "Function" EASE. Maka akan muncul Code yang bisa kita ambil/ copas ke CSS kita. Silahkan di utak-atik nantinya untuk mendapatkan efek yang berbeda. Duration biasanya paling lama yah 1 Second. Bisa pilih second atau milisecond.

5. Klik icon "Copy" yang ada di samping kanan dari code tadi. Lalu pindah ke CSS kita. Nanti akan di copas ke css bagian a:hover {} dibawahnya display:block;

6. Silakan di save dan di refresh browsernya. Lalu arahkan mouse anda ke kata "Arahkan Mouse Ke Saya :) "

Bisa melihat adanya efek perubahan yang 1 detik itu. Sebelum di kasih efek transition, efek hovernya berubah seketika di hover. Kalau di beri efek transition 1 detik, maka efeknya akan melambat 1 detik.

Silahkan bereksperiment. Sampai bertemu kembali di tutorial lanjutan dari CSS 3 Generator.