Tips HTML: Membuat Gradient Background

         
Gradient background adalah warna yang berubah secara halus dari satu warna ke warna yang lain. Efek ini berguna untuk memperindah tampilan halaman web. Untuk membuatnya cukup mudah, silahkan mengikuti langkah-langkah berikut:

Pertama, kita harus membuat sebuah image yang sudah berisi gradient warna. Gunakan program menggambar untuk membuatnya seperti photoshop, gimp, atau yang lain. Jika warnanya berubah secara vertikal, maka lebar image cukup 1px ~ 5 px. Sebaliknya kalau horizontal maka tinggi image cukup 1px ~ 5 px. Image dibuat selangsing mungkin agar ukuran filenya lebih kecil. Contoh berikut adalah gradient warna vertikal dengan warna merah dan putih (5px):

Selanjutnya agar image tersebut melebar, maka digunakan kode CSS HTML berikut:

Untuk image dengan gradient vertikal:

style="background-image: url(http://www.contoh.com/gradient.jpg); background-repeat: repeat-x;"

Untuk image dengan gradient horizontal:

style="background-image: url(http://www.contoh.com/gradient.jpg); background-repeat: repeat-y;"

Catatan: anda tinggal mengubah url (teks berwarna merah) dengan url image anda.

Contoh penggunaan:

Berikut ini sebuah tabel yang akan menggunakan image gradient merah putih sebagai background. Kodenya adalah sebagai berikut:

<table style="border: 1px solid rgb(153, 153, 153); background-image: url(http://img203.imageshack.us/img203/9353/tipshtmlgradient01.jpg); background-repeat: repeat-x; width: 50%; height: 100px;"> <tbody><tr> <td style="vertical-align: middle; text-align: center;"> Tabel ini menggunakan gradient background. </td> </tr></tbody> </table>

Hasilnya adalah sebagai berikut:

Tabel ini menggunakan gradient background.

        

Thanks for reading & sharing INFO COMPUTER