Firefox 4 beta(2) hadir dengan CSS 3 Transition-nya

Mozilla mengumumkan kedatangan Firefox 4 Beta 2 akhir pekan lalu, hanya tiga minggu setelah merilis Beta 1. Rilis ini diperbarui mencakup dua peningkatan besar atas rilis beta pertama, terutama peningkatan kinerja dan peningkatan dukungan untuk CSS3 Transition.
Anda dapat men-download rilis terbaru di sini.

Peningkatan Kinerja

Firefox 4 Beta 2 memperkenalkan mekanisme membangun Halaman Baru: Retained Layers.
Menurut Mozilla Hacks Blog:

Mekanisme ini memberikan kecepatan lebih cepat terlihat untuk halaman web dengan konten dinamis, dan bergulir lebih halus. Juga, kami masih bereksperimen dengan akselerasi hardware: menggunakan GPU untuk membuat dan membangun beberapa bagian dari halaman web.

Peningkatan Dukungan untuk CSS 3 Transition

CSS3 Transition, memungkinkan Web Developer untuk menghidupkan perubahan ke properti CSS, ini telah diperkenalkan untuk Firefox 4 di rilis beta sebelumnya, namun sekarang versi beta kedua memungkinkan untuk penggunaan CSS3 Transition dalam Mentransformasi CSS3 (eg. scale, translate, skew)
Berikut adalah contoh dasar CSS 3 Transition yang diambil dari Mozilla Hacks Blog:

See this box? Move your mouse over it, and its position transform: rotate(5deg); will transform transform: rotate(350deg) scale(1.4) rotate(-30deg); through a smooth animation.

Membuat Button Emboss dengan CSS 3

css 3 button embossSebelum kelahiran Css 3, biasanya para web developer atau web designer akan membuat button emboss dengan tehnik grafis (background images) yang dibuat di photoshop ataupun program pengolah gambar lainnya.

Sekarang bagi yang belum mampu mengolah gambar/grafis dengan baik, jangan khawatir karena CSS 3 akan mengerjakannya dengan Sempurna.

Demo

Dengan menggunakan kode CSS seperti dibawah ini akan menghasilkan sebuah button emboss yang cantik tanpa harus menggunakan background images:

.button{
margin: 0.1em;
text-align:center;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
width:140px;
padding:0.3em;
}

#b1 {
background:#ddd;
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;}

#b1 a {
text-decoration:none;
color:#888;}

#b1 a:hover {
color:#555;}

Catatan:Cara ini belum didukung oleh Browser IE
Example