CSS 3 Generator Part 2

18/01/2014    Agustinus    864     Website

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

Kursus Website, Kursus Web Design, Kursus Komputer

Kita melihat ada banyak sekali tool yang disiapkan oleh CSS 3 Generator. Sudah ada yang utak-atik tools yang lainnya? smiley 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.

Kursus HTML, Kursus CSS, Kursus Website, Kursus Web Design

Kalau di Preview, maka hasilnya seperti ini.

Kursus HTML, Kursus CSS, Kursus Website, Kursus Web Design

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.

Kursus HTML, Kursus CSS, Kursus Website, Kursus Web Design

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.

Kursus HTML, Kursus CSS, Kursus Website, Kursus Web Design

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;

Kursus HTML, Kursus CSS, Kursus Website, Kursus Web Design

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.

Kursus HTML, Kursus CSS, Kursus Website, Kursus Web Design

Kursus HTML, Kursus CSS, Kursus Website, Kursus Web Design

Kursus HTML, Kursus CSS, Kursus Website, Kursus Web Design

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

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More