Close it

Kamis, 09 Agustus 2012

21 CSS3 - Tutorial CSS3 Transition►► URL : http://wwdq.blogspot.com/2012/08/css3-tutorial-css3-transition.html.

Share
Oke setelah kurang lebih 1 tahun saya memposting pengenalan tentang CSS3, sekarang wwdq akan memberikan tutorial mengenai CSS3 yaitu CSS3 Transition.
CSS3 Transition ini berfungsi memberikan efek perubahan bertahap dari satu style ke style lainnya tanpa menggunakan flash. Mungkin sudah banyak yang tau yah tentang CSS3 ini, tetapi tak ada salahnya bila WWDQ memberikan penjelasan kembali :)
 

Browser yang support?
Untuk CSS3 Transition hanya beberapa browser pada saat ini yang mendukung.

Tutorial CSS3 Transition
Untuk efek transisi atau perpindahan style dari style yang satu ke lainnya, anda harus menentukan 2 hal, yaitu :
1. Tentukan properti CSS yang ingin diberi efek transisi
2. Tentukan durasi efek transisi tersebut
oke langsung ke contoh:
 Contoh ke 1 

Tutorial CSS3

World Web Design Q

Source code:
<style>

/* style pada saat normal memiliki lebar 300px */
.css3 {
transition: width 2s;
-moz-transition: width 2s;
-o-transition: width 2s;
-webkit-transition: width 2s;
background: #ef9e10;
height: 100px;
text-align: center;
width: 300px;
}

/* pada saat mouse ada di elemen, lebarnya menjadi 100% */
.css3:hover {
width:100%;
}
</style>


<div align="center" class="css3">
Tutorial CSS3</div> 

Keterangan
Firefox : -moz-transition: width 2s;
Opera : -o-transition: width 2s;
Chrome / Safari : -webkit-transition: width 2s;

Disini kita membuat efek transisi perubahan lebar dengan durasi efek 2 detik
Kita juga bisa memberikan beberapa properti CSS dalam 1 elemen, misalkan kita mau mengubah style width, height, background, dan lain-lain.

 Contoh ke 2 

Tutorial CSS3

World Web Design Q

Source Code:
<style type="text/css">
/* style pada saat normal memiliki
lebar 300px, tinggi 100px, background warna biru */
.css3_2 {
width: 300px;
height: 100px;
background: #8eceff;
text-align: center;
transition: width 2s, height 2s, background 2s; 
-moz-transition: width 2s, height 2s, background 2s; 
-o-transition: width 2s, height 2s, background 2s;
-webkit-transition: width 2s, height 2s, background 2s;  
}

/* pada saat mouse ada di elemen
lebar 100%, tinggi 130px, background warna orange */
.css3_2:hover {
width:100%;
height:130px;
background:#ef9e10;
}
</style>


<div align="center" class="css3_2">
<span style="font-size: large;"><b>Tutorial CSS3</b></span></div>

Setiap properti CSS , durasi efeknya bisa berbeda, sesuaikan saja dengan kebutuhan.
Sekian tutorial mengenai CSS3 Transition, semoga bisa membantu anda, Terimakasih.

Referensi : http://w3schools.com
Bila Kurang Jelas, silakan bertanya dibawah ini .

Post Info :
Judul = CSS3 - Tutorial CSS3 Transition

Url = http://wwdq.blogspot.com/2012/08/css3-tutorial-css3-transition.html

Author = Rizal Loa Wanda. At : 10.03 Kamis, 09 Agustus 2012 | Comment:21

Artikel Terkait

Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

21 komentar:

  1. thx....
    sangat membantu!!!!
    terus berkarya...

    BalasHapus
  2. Thanks sharingnya, gan!
    Salam kenal...Kalau berkenan mau ngundang untuk ikutan gabung dengan teman-teman lain yang sudah SUBMIT URL BLOG-nya ke Direktori Weblog Indonesia :)

    BalasHapus
    Balasan
    1. Terimakasih, kalau ada waktu pasti saya sempatkan submit
      Baru sempet balesin sekarang maaf ya blog ini pun belum sempat saya update

      Hapus
  3. makasi nie infonya dan tutorialnya....nice dah...
    thx ya...

    BalasHapus
    Balasan
    1. Terimakasih kunjungannya ka :D sukses ya

      Hapus
  4. Makin manteb aja blog Agan neh.... :D

    BalasHapus
    Balasan
    1. wah visitor lama nih :D Terimakasih mau berkunjung lg.
      udah lama juga ga diupdate gan nih blog :( sibuk dunia asli + nyoba nyoba projek lain :)

      Hapus
  5. masih binging nih,,, ap bedanya sama css yang dulu dulu;;;;; tapi makasih udh share

    BalasHapus
    Balasan
    1. perbedaannya ada penambahan fitur misal seperti contoh transisi, animasi, radius, dan lain-lain, coba deh buka-buka w3schools saya belajar disitu. Terimakasih ya atas kunjungannya.

      Hapus
  6. makasih buat share nya

    salam kenal :)

    BalasHapus
  7. thanks gan.
    setidkanya ane sedikit mengenal bagaimana buat animasi pake transition . :D

    print --> jangan lupa kunjung balik gan. :)

    salam blogger.

    BalasHapus
  8. What you're saying is completely true. I know that everybody must say the same thing, but I just think that you put it in a way that everyone can understand. I'm sure you'll reach so many people with what you've got to say.

    BalasHapus
  9. It is good to see posts that give truly quality information. Your tips are extremely valuable. Thanks a lot for writing this post.Thanks a lot for sharing. Keep blogging.

    BalasHapus
  10. Very informative, keep posting such good articles, it really helps to know about things.

    BalasHapus

No Spam Please :)


Tambahkan Bookmark halaman ini untuk mempermudah Pencarian Anda [CTRL+D].