CSS : Membuat Warna Latar Gradien dengan CSS3

Sebelum CSS3 diterbitkan untuk membuat latar belakang web dengan warna gradien, para web master menggunakan gambar. Kemudian gambar tersebut diupload ke web hosting. Namun cara ini akan membuat loading halaman website menjadi sedikit lambat dikarenakan ada gambar background.

Sekitar tahun 2010 CSS3 sudah mulai digunakan oleh kalangan web master. Setelah hadirnya CSS3 banyak sekali perbedaan desain web dari tahun-tahun sebelumnya. CSS3 mampu membuat tampilan warna lebih menarik dan lembut dipandang mata.

Salah satu contoh CSS3 yang cukup menarik tampilan website adalah warna latar gradien. Penerapan warna gradien bisa pada semua tag HTML. Seperti latar belakang tombol, kolom tertentu ataupun latar belakang halaman body.

Penggunaan memang menurut saya belum sepenuhnya efektif atau tepat sasaran. Pasalnya dalam penggunaanya kita masih harus menuliskan kode untuk setiap jenis browser. Jadi dalam penggunaan CSS3 para pengembang web browser belum sepenuhnya sepakat cara pengkodeannya.


background: #F3EFEF; /* For browsers that do not support gradients */
   background: -webkit-linear-gradient(#EFEFEF,white); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(#EFEFEF,white); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(#EFEFEF,white); /* For Firefox 3.6 to 15 */
   background: linear-gradient(#EFEFEF,white); /* Standard syntax */


Seperti pada kode diatas, terlihat jelas kita harus menuliskan kode untuk masing-masing jenis browser. Harapannya para pengembang web browser dapat sepakat dalam penggunaan kode gradien, sehingga lebih menghemat resource dan perfomance website.



EmoticonEmoticon