Membuat Gradient dengan CSS

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 explorerstartColorstr 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 (,)

Bererapa tutorial gradient dan gradient generator

http://gradients.glrzad.com/

http://www.westciv.com/tools/gradients/index.html

http://www.tankedup-imaging.com/css_dev/css-gradient.html

http://webdesignerwall.com/tutorials/cross-browser-css-gradient

http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

semoga bermanfaat🙂

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: