Blog Request tutorial? klik disini!

  • CSS 3 Generator Part 2

    896 kali dibaca
    18 Jan / 2014 10:57

    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






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155