Membuat CSS Gradient Background

gradientAda beberapa pilihan untuk mempercantik tampilan sebuah website, diantaranya yaitu kita terbiasa menggunakan background image (gambar) untuk menampilkan gradasi warna agar tampilan website terlihat menarik, namun hal tersebut akan membuat klien meload halaman website kita sedikit lebih lama/berat, apalagi menggunakan banyak gambar di dalam satu halaman penuh dengan didukung juga dengan koneksi negara kita yang masih kurang stabil. Smile with tongue out

Solusi dari hal tersebut adalah kita dapat menampilkan background gradasi warna dengan menggunakan script CSS3, hanya sayangnya script ini didukung atau hanya dapat terbaca oleh browser-browser tipe terbaru. Ada beberapa user yang memang masih nyaman dengan browser lama, sehingga masih saja bertahan dengan browser-browser yang sudah usang, dan ada juga tipe user yang ingin selalu terlihat up to date (seperti saya Open-mouthed smile) sehingga selalu ingin komputernya menggunakan software-software up to date juga.

Script yang digunakan untuk masing-masing vendor browser juga berbeda, namuin paling tidak browser yang digunakan sudah mensupport CSS3. Namun anda tidak perlu khawatir untuk mempelajari banyaknya script yang berbeda untuk tipe browser yang berbeda, karena sudah ada website yang dapat mengenerate gradien warna untuk setiap browser yang support CSS3.

Ada banyak website yang dapat mengenerate gradien warna, tapi yang biasa saya gunakan adalah yang dari Microsoft.

CSS Gradient

Disini kita cukup tentukan warna yang kita inginkan, seperti gradasi warna start hingga stop dan juga nilai offset untuk gradasi warna. setelah itu, pada bagian CSS markup akan langsung mengenerate code yang dapat digunakan untuk menampilkan gradien warna tersebut.