Membuat Gradient Effect dengan CSS

Postingan ini adalah postingan pertama saya di domain baru www.devbook.net. Tampilan blog ini pun sedikit saya rubah untuk menyesuaikan dengan tema baru blog ini yang lebih bersifat personal blog. Design dan warna blog ini pun saya buat secara custom dan "suka-suka" untuk menyesuaikan dengan karakter pribadi saya. Untuk kedepannya insya allah blog ini akan lebih fokus membahas mengenai tutorial blog dan tutorial web design walaupun tentu saja di selingi dengan beberapa review untuk tetap menghidupi blog ini :D Mudah-mudahan saja kedepannya blog ini bisa lebih bermanfaat buat teman-teman blogger semua.

Pada postingan kali ini saya akan membahas bagaimana cara membuat efek gradasi dengan menggunakan CSS. Permainan warna tentu saja jadi kunci utama dalam mendesign tampilan sebuah web ataupun blog, buat saya sendiri CSS merupakan kode yang menurut saya sangat brilian, bayangkan saja dari 1 buah layout HTML kita dapat membuat beribu-ribu tampilan web yang berbeda-beda hanya dengan mengedit kode CSS-nya. Salah satu contohnya adalah situs social network friendster yang dulu sempat booming, dari 1 buah kode layout, member dapat merubah tampilan profile mereka hanya dengan memodifikasi kode CSS. Dari beribu-ribu kode CSS yang ada, ternyata ada beberapa fitur baru CSS yang masih jarang sekali digunakan, salah satunya adalah fungsi CSS gradient yang akan saya terangkan dibawah ini.

Untuk membuat efek gradasi kebanyakan orang menggunakan background image yang telah mereka buat di photoshop atau software-software image editing lainnya. Kekurangannya tentu saja akan memperlambat loading web atau blog kita. Sebenarnya CSS telah menambahkan fitur gradient yang dapat mempermudah kita dalam membuat effect gradient, hanya saja fitur ini baru disupport oleh browser-browser versi baru, untuk mozilla sendiri fitur CSS gradient baru bisa digunakan di versi 3.6 ke atas. Dibawah ini kode yang bisa teman-teman gunakan untuk membuat efek gradasi dengan CSS.
background: #222;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#222222');
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#222));
background: -moz-linear-gradient(top, #000, #222);

Keterangan:
background: #222;Berfungsi menampilkan warna background solid bila browser tidak mendukung.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#222222');Berfungsi untuk internet explorer. startColorstr adalah warna awal gradasi dan endColorstr adalah warna akhir gradasi.

background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#222));Berfungsi untuk browser webkit seperti safari, chrome, dll. linear adalah tipe gradasi, dapat dirubah menjadi radial, angle, dll. from adalah warna awal gradasi dan to adalah warna akhir gradasi.

background: -moz-linear-gradient(top, #000, #222);Berfungsi untuk browser keluaran mozilla. linear adalah tipe gradasi, dapat dirubah menjadi radial, angle, dll. Warna awal gradasi ditulis pertama (#000) dan warna akhir gradasi ditulis kedua (#222) dipisahkan dengan koma (,)

Mudah-mudahan bermanfaaf buat teman-teman blogger semua, selamat mencoba dan selamat berkreasi :)

Artikel Terkait di Bawah posting