04
Aug | 2010

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.

GusdwiCSS 3, Web Design 0 Komentar

02
Aug | 2010

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

GusdwiCSS 3 0 Komentar

24
Dec | 2009

Membuat kolom paragraf dengan css 3

kolom paragrafSaya yakin yang membaca Tulisan ini tahu bentuk artikel dalam surat kabar (koran).
Pada umumnya, paragraf dalam suatu artikel di surat kabar dibagi menjadi beberapa kolom, biasanya 3 sampai 4 kolom. Menurut Saya, Tujuannya adalah untuk memudahkan para pembaca melihat semua isi yang ditampilkan dalam sebuah koran. (Lanjut…)

GusdwiCSS 3 1 Komentar

06
Nov | 2009

Belajar CSS 3

css-3

Apa itu CSS 3 ?

Sambutlah Jaman Baru dengan teknik baru. Ketika jaman terus berkembang maka mau tidak mau kita harus mengikutinya jika kita tidak mau disebut ketinggalan jaman.
Sekarang kita seharus sudah mulai belajar teknik baru tentang CSS.  CSS 3 telah memberikan kita cara-cara yang mudah untuk membuat efek / style pada sebuah elemen HTML dengan meninggalkan cara lama yang dibantu oleh Javascript dan JQuery. (Lanjut…)

GusdwiCSS 3 5 Komentar