| Farkryzer The Second Generation v.2.1 | Copyright © 2012 Friski G.P. Powered by Blogger |

Mau tukeran link dengan blog ini ? Kesini Sobat

Site Rank

PageRank

Buku Tamu

W3 Directory - the World Wide Web Directory
Mau tahu cara buat widget tersembunyi seperti ini ? Baca tutorialnya disini full css lebih ringan dari javascript

Farkryzer Post Section

... Selamat membaca ...

Bab IX : Belajar CSS3 Bagian 3 ( Transisi )


Pasti kalian sudah tahu kan transisi itu apa, semacam efek pergantian efek dari bentuk sebelumnyake bentuk sesudahnya, sudah pasti CSS ini sangat bermanfaat, terlebih lagi untuk membuat web / blog menjadi lebih hidup, coba lah lihat efek ini pada area post ini coba arahkan kursor maka akan mengalami efek pergantian.

Cara ini sangat erat kaitannya dengan hover maka kamu harus menguasai teknik hover yah minimal mengetahui sedikit >> Baca CSS tentang hover, jika tanpa menggunakan transisi coba lihat.

Yang akan kalian pelajari yaitu
Membuat efek transisi dengan CSS3
 a. transition property
 b. transition duration
 c. transition delay

Tahap Sebelumnya | Bab VIII : Belajar CSS3 Bagian 2 ( Tulisan ) |

Pertama - tama saya akan tunjukan efek transisi yang saya terapkan pada Farkryzer ini
1. Judul post ( hover | active )
2. Background dan border post ( hover )
3. border menubar halaman utama ( hover )
4. dan saya bingung ( hahahaha ... )

baiklah langsung saja ke pokok bahasan kita :

   Transisi ( Transitions )
     Sangat mudah sekali untuk memahami teknik pembuatan efek transisi ini, orang awam puin bisa ( termasuk saya ), apalagi jika kamu sudah jago teknik hover >>> Baca CSS tentang hover
Baiklah rumusnya adalah :


.post {background#f2f2f2;border: 4px solid #000;-moz-transition-property:background,border;-moz-transition-duration:.25s;-webkit-transition-property:background,border;-webkit-transition-duration:.25s;-o-transition-property:background,border;-o-transition-duration:.25s;}
.post:hover {background:#fff;border-radius:30px;}

# Keterangan :

A. Property ( elemen yang akan di buat transisi )
-moz-transition-property:... <<< kamu tambahkan agar firefox 4 kompatibel
-webkit-transition-property:... <<< + agar chrome & safari kompatibel
-o-transition-property:... <<< + agar opera kompatibel
... kamu ganti apa yang akana kamu buat efek transisi border, background dll. Contoh diatas saya umpamakan border dan background maka transisinya yaitu 1.background: #f2f2f2 menjadi #fff dan 2.border: ( persegi tidak radius ) menjadi ( radius 30px )
Note: kamu dapat gunakan all jika efek ingin kamu tambahkan ke semuanya.

B. Duration ( waktu berlangsungnya transisi )
-moz-transition-duration:...s <<< + agar firefox 4 kompatibel
-webkit-transition-duration:...s <<< + agar chrome & safari kompatibel
-o-transition-duration:..s <<< + agar opera kompatibel
...s kamu ganti sesuai keinginan, contohnya yaitu saya masukan .2s berarti durasi / waktu transisi berlangsung selama 0,2 sekon atau 1/5 detik.

C. Delay ( waktu penjeda untuk memulai transisi)
jika kamu ingin membuat waktu jeda sebelum mulai transisi gunakan delay 
-moz-transition-delay:...s <<< + agar firefox 4 kompatibel
-webkit-transition-delay:...s <<< + agar chrome & safari kompatibel
-o-transition-delay:..s <<< + agar opera kompatibel

Ada yang ditanyakan ? Silahkan berkomentar di bawah post ini
Tahap Berikutnya

9 komentar:

  1. pertama saya tau transisi itu pas nyoba2 di css3 generator,
    eh kok hasilnya bagus kyk di blog yps yg saya kira pake jquery
    nah mulai saat itu saya suka apa2 pake transisi :D
    jiahahaa ..

    BalasHapus
  2. @Ladida: saya juga tanpa sengaja nemuin cara ini waktu belajar css di w3school, karna bagus jadi di pake sampai sekarang

    BalasHapus
  3. blognya dah q
    follow gan, liat
    foto nya..
    Jngan lupa
    follbacknya..

    http://
    symbianed.
    blogspot.com/
    Jngan lupa
    follbacknya..

    http://
    symbianed.
    blogspot.com/

    BalasHapus
  4. maen design pke CSS emang asikkkk sob tp butuh keuletan buat nguasai apalagi buat saya,,,susahjuga hahahahha okey mksg infonya,,,tambah tambah referensi :)

    BalasHapus
  5. @Green KLOPERER: ya memang asik sob, trus juga ga susah" amat

    BalasHapus
  6. Gan bisa Gk posting versi indonesia nya CSS selector, kurang ngerti dengna bahasa inggris

    BalasHapus
  7. @Zh!nTho: oke saya akan buat secepatnya

    BalasHapus
  8. benar-benar CSS yg mengagumkan. :)
    saya juga jadi kepengen buat. :)

    BalasHapus
    Balasan
    1. memang sob dengan tag yg relative singkat dan mudah dapat membuat tampilan makin manstab

      Hapus

Share entri ini :