CSS3 gradient tanpa gambar

Didalam CSS3 sekarang kita dapat menggunakan 'gradient' untuk membuat efek gradient tanpa menggunakan gambar, tentu saja metode ini sangat menghemat bandwidth dan membuat loading halaman menjadi lebih cepat.

Contoh cara penulisan 'gradient' yang digunakan didalam property 'background':

background: -webkit-gradient(linear, left top, left bottom, from(warna_atas), to(warna_bawah));
background: -moz-linear-gradient(top,  warna_atas,  warna_bawah);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='warna_atas', endColorstr='warna_bawah');

• -webkit-gradient -> kompatibilitas browser webkit (Opera,Chrome,Safari)
• -moz-linear-gradient -> kompatibilitas untuk firefox/mozilla
• filter: progid:DXImageTransform.Microsoft.gradient -> kompatibilitas IE (hack)

Note: jika pada IE font terlihat kasar tambahkan property 'position: relative'.

contoh penulisan kode CSS dalam elemen class="gradient":

.gradient {
     position: relative;
     background: -webkit-gradient(linear, left top, left bottom, from(#e0e8c2), to(#ffffff));
     background: -moz-linear-gradient(top,  #e0e8c2,  #ffffff);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e8c2', endColorstr='#ffffff');
}

POST TGL: 6 October 2010
KATEGORI: Web

Ganti background login Ubuntu 9.10 (Karmic Koala) Windows: Error menghapus key didalam registry