Membuat Background Efek Gradient Dengan CSS3

Bukan pada hari minggu ku turut ayah ke kota.. hahaha.. Namun pada hari minggu ini saya akan kembali memberikan artikel mengenai "Membuat Background Efek Gradient" yang tentunya menggunakan CSS3. Ohiya, saya kira semua browser support, akan tetapi, ternyata Opera tidak.. Ntah kenapa katanya sih nanti pada Opera versi berikutnya akan diberikan untuk fitur Efek Gradient. Nah, untuk contohnya berikut adalah gambaran mengenai Efek gradient pada background blog.

(Template Sebelum 16 November 2010/. Click to zoom)

Nah, untuk membuatnya sebenarnya gampang gampang susah. Langsung saja
1. Login ke blog anda --> Design --> Edit HTML -->
2. Berikut ini adalah kode CSSnya (Berdasarkan tampilan gambar diatas) yang nantinya bisa anda edit.

background: #151515;
background: -moz-linear-gradient(top, #151515, white);
background: -webkit-gradient(linear, left top, left bottom, from(#151515), to(white));

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#151515, endColorstr=white);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#151515, endColorstr=white)";

*KETERANGAN

background: #151515;
Background disini adalah background untuk browser Opera atau yang Tidak Support Efek Gradient

background: -moz-linear-gradient(top, #151515, white);
Background disini adalah untuk browser Mozilla Firefox.
(top, #151515, white) #151515 disini adalah warna pertama (yang diatas) dan disusul oleh white untuk warna kedua untuk yang dibawah..
Silahkan ganti linear dengan Angle, Radial, dll.

background: -webkit-gradient(linear, left top, left bottom, from(#151515), to(white));
Background disini adalah untuk browser berbasis Webkit seperti Google Chrome, Safari dsb.
(linear, left top, left bottom, from(#151515), to(white)) #151515 disini adalah warna pertama (yang diatas) dan disusul oleh white untuk warna kedua untuk yang dibawah..
Silahkan ganti linear dengan Angle, Radial, dll.

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#151515, endColorstr=white);
Nah, Filter disini adalah tampilan background untuk browser IE 8, dan 9 yang saat ini masih dalam beta version.
(GradientType=0, startColorstr=#151515, endColorstr=white) #151515 disini adalah warna pertama (yang diatas) dan disusul oleh white untuk warna kedua untuk yang dibawah.. GradientType=0, ini adalah untuk efek gradient Linear atas bawah atau dari warna 1 (atas) ke warna 2 (bawah). Bisa anda ganti nominalnya menjadi GradientType=1, untuk efek gradient kiri kanan yang mana warna 1 adalah yang di kiri dan warna 2 di kanan.

Dan

-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#151515, endColorstr=white)";
Adalah untuk browser IE 7 kebawah. (GradientType=0, startColorstr=#151515, endColorstr=white) #151515 disini adalah warna pertama (yang diatas) dan disusul oleh white untuk warna kedua untuk yang dibawah.. GradientType=0, ini adalah untuk efek gradient Linear atas bawah atau dari warna 1 (atas) ke warna 2 (bawah). Bisa anda ganti nominalnya menjadi GradientType=1, untuk efek gradient kiri kanan yang mana warna 1 adalah yang di kiri dan warna 2 di kanan.

* NOTE!
background: -moz-linear-gradient(top, #151515, white);
yang bewarna biru adalah warna pertama (1) dan yang bewarna ungu adalah warna kedua (2).
3. Nah,  next adalah pemasangannya.. Sebagai contoh pada header, maka

#header-wrapper {
background: #151515;
background: -moz-linear-gradient(top, #151515, white);
background: -webkit-gradient(linear, left top, left bottom, from(#151515), to(white));

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#151515, endColorstr=white);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#151515, endColorstr=white)"; }

Save..
Sekian, semoga bermanfaat!

Tweet

Artikel Terkait: