15 April 2012
Efek Gradasi Menggunakan CSS3 (Tanpa Gambar)
"..Gradient Effect atau Efek Gradasi merupakan declarator yang baru digunakan pada CSS3..."
Salah satu manfaat dari adanya declarator ini adalah kita bisa menghemat bandwidth server, karena kita tidak lagi membutuhkan gambar sebagai background dari sebuah element di web atau blog kita.
Pada CSS3, value dan properties CSS nya terbagi menjadi 3 bagian untuk menjalankan perintah di tiga jenis browser yang berbeda, yaitu; Webkit, Firefox, dan Internet Explorer
Webkit Browser
-
Fimadani menyajikan artikel dan berita keislaman yang Insya Allah bermanfaat.
www.fimadani.com
-
Ingin membangun bisnis online? Jangan anggap remeh kekuatan Facebook.
www.vatih.com
-
Review singkat tentang MacBook Pro
www.vatih.com
Kode dibawah ini nantinya akan menjalankan perintah di Chrome, Safari, Rockmelt, dll. Dalam contoh dibawah, saya akan memberitahukan cara membuat gradasi dari atas (top) ke bawah (bottom).
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
Mozilla Firefox
Browser ini mulai mendukung CSS3 mulai dari versi 3.6. Jadi kalau Firefox yang Anda gunakan belum pada versi itu atau diatasnya, maka kode ini tidak akan bisa dijalankan.
background: -moz-linear-gradient(top, #ccc, #000);
Internet Explorer
Perintah “filter” hanya akan dibaca oleh Internet Explorer. Bagi saya pribadi, browser ini adalah browser paling sampah buruk yang saya sudah lupa berapa tahun lamanya saya tidak menggunakan broser ini -_-’
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
Di dalam CSS3 ada banyak sekali properties yang bisa kita gunakan untuk membuat tampilan sebuah website menjadi elegan tanpa harus menggunakan gambar (image) sebagai background-element.
Di bawah ini merupakan contoh elemen yang murni hanya menggunakan CSS3. Yaitu text-shadow, radius-border, and box-shadow. Tanpa gambar dan javascript.
Demikian sedikit pembelajaran kali ini tentang CSS3. Saatnya beraksi dan berkreasi, kawan.
Image credits: webdesignerwall.com, spotgeek.net