Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Using Transition Property, Transition Delay, Transition Duration, Transition Timing Function in Mozilla, Opera, Safari

Standart penulisan kode CSS3 yang hingga saat ini masih belum terwujudkan, membuat sebuah desain HTML menjadi begitu banyak memerlukan kode yang sebenarnya berfungsi sama. Satu hal yang sebenarnya dapat dimaklumi juga karena dukungan browser terhadap CSS3, terutama CSS3 animaton, transition, transformation, border-radius dan box shadow masih belum dapat direalisasikan secara maksimal. Kondisi ini masih diperparah dengan tingkat kompabilitas dimasing masing browser. Seperti di Opera misalnya. Penulisan CSS3 transition dalam bentuk :
-o-transition: all 2s ease-in 700ms
akan mampu membentuk sebuah fungsi secara sempurna, termasuk perubahan yang diharapkan pada border (border-width, border-color, border-style). Hal yang berbeda akan terjadi ketika penulisan kode dibuat dalam bentuk :
-o-transition: border 2s ease-in 700ms
. Dengan cara ini maka bentuk transisi yang diterjadi tak akan sesuai dengan bentuk yang diharapkan. Pada transisi yang lebih kompleks, dengan melibatkan beberapa transition-propery, transition, delay, transition-timing-function dan transition duration (multiple transition), bahkan justru akan merusak desain yang coba kita tampilkan. Untuk mengatasi permasalahan-permasalan seperti ini, alngkah baiknya apabila kita memahami terlebih dahulu cara penggunaan setiap kode transisi serta seberapa dukungan browser terhadapnya.

Untuk lebih memahami beberapa cara penulisan CSS3 transition, silahkan gunakan metode penulisan seperti di bawah ini :


Opera


Penulisan kode berbeda tetapi fungsinya sama


Cara penulisan kode-1


-o-transition-property: width, height, background-color, color, opacity, -o-transform;
-o-transition-duration: 1s, 0.5s, 1.2s, 900ms, 4.5s, 2s;
-o-transition-timing-function: ease, linear, ease-in, ease-out, ease-in-out, linear;
-o-transition-delay: 300ms, 0.8s, 1.3s, 2.7s, 5000ms, 2s;

Cara penulisan kode-2


-o-transition: width 1s ease 300ms, height 0.5s linear 0.8s, background-color 1.2s ease-in 1.3s, color 900ms ease-out 2.7s, opacity 4.5s ease-in-out 5000ms, -o-transform 2s linear 2s;


Mozilla


Penulisan kode berbeda tetapi fungsinya sama


Cara penulisan kode-1


-moz-transition-property: width, height, background, color, opacity, -moz-transform;
-moz-transition-duration: 1s, 0.5s, 1.2s, 900ms, 4.5s, 2s;
-moz-transition-timing-function: ease, linear, ease-in, ease-out, ease-in-out, linear;
-moz-transition-delay: 300ms, 0.8s, 1.3s, 2.7s, 5000ms, 2s;

Cara penulisan kode-2


-moz-transition: width 1s ease 300ms, height 0.5s linear 0.8s, background 1.2s ease-in 1.3s, color 900ms ease-out 2.7s, opacity 4.5s ease-in-out 5000ms, -moz-transform 2s linear 2s;


Safari-Google Chrome


Penulisan kode berbeda tetapi fungsinya sama


Cara penulisan kode-1


-webkit-transition-property: width, height, background, color, opacity, -webkit-transform;
-webkit-transition-duration: 1s, 0.5s, 1.2s, 900ms, 4.5s, 2s;
-webkit-transition-timing-function: ease, linear, ease-in, ease-out, ease-in-out, linear;
-webkit-transition-delay: 300ms, 0.8s, 1.3s, 2.7s, 5000ms, 2s;

Cara penulisan kode-2


-webkit-transition: width 1s ease 300ms, height 0.5s linear 0.8s, background 1.2s ease-in 1.3s, color 900ms ease-out 2.7s, opacity 4.5s ease-in-out 5000ms, -webkit-transform 2s linear 2s;


Cara paling sederhana menuliskan kode transisi


Tanpa menyebutkan transition property dan timing function:

-o-transition: 1s 700ms;
-moz-transition: 1s 700ms;
-webkit-transition: 1s 700ms;

Transisi berlaku untuk semua property:

-o-transition: all 0.5s ease-in 0.8s;
-moz-transition: all 0.5s ease-in 0.8s;
-webkit-transition: all 0.5s ease-in 0.8s;

Transisi berlaku untuk semua property tanpa delay:

-o-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;

Catatan - Khusus Opera


  • Untuk sementara ini penulisan property border dan border-radius sebaiknya tidak dilakukan di Opera (CSS3 Transition-property), karena justru merusak desain yang telah dirancang.
  • Background property ditulis sebagai: background-color.
    contoh:
    -o-transition: background-color 2s ease-out 400ms;

DEMO berikut Kode CSS dan xHTML


Beberapa bentuk transisi dengan memanfaatkan seluruh komponen dan property di CSS3 transition seperti transition-delay, transition-timing-function, transition-property dan transition-duraton telah aku siapkan dalam bentuk demo beserta kode CSS dan xHTMl-nya. Silahkan buka link di bawah ini untuk melihat dan copy kodenya:



Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :








» Happy Blogging - gubhugreyot «


Bila tak pegal di tangan
silahkan tulis sebuah komentar!

gubhug reyot

 
GR | Edited by | gubhug reyot