iseng iseng dengan background css3 gradient

 hari ini saya benar benar terpukau sama sebuah website yang bagus dan apik dalam menerapkan css3 didalamnya serta kombinasi warna dan tata letak yang pas kalo blog saya ini amburadul ckckckck gpp lah yang penting hasil utak atik sendiri sedikit demi sedikit tentunya kalo langsung semua nanti bisa gag ketampung malah muntah.
 sekarang saya mau share saja tadi sebetulnya saya nyari nyari tentang css3 gradient akhir nya alhamdulliah saya bisa ngerti juga dalam menerapkan css nya kedalam template saya ini dan hasilnya gabungan dengan yang kemaren saya bahas tentang bermain dengan si cantik css rounded corner kalo ketinggalan membaca nya silahkan sob baca terlebih dahulu

silahkan baca bermain dengan si cantik css rounded corner

Dan salah satu hasilnya adalah sebagai berikut

 saya memasukan background css3 gradient kedalam komentar balasan di gabungkan dengan efek hover jadi bila kursor mau replay maka otomatis css hover terpanggil,dan bisa dilihat dinavigasi diatas diblog ini juga sama.
 mari kita mulai eksperimen background css3 gradient ini mudah mudahan bisa lancar
catatan untuk pengaturan setiap css di berbeda browser silahkan baca di bermain dengan si cantik css rounded corner

 hmm apa ya terasa bingung baik kita contohkan saja, misal kita punya source html seperti ini

<div id="sopyannc">CONTOH 1</div>

untuk menggunakan background css3 gradient kita tambahkan css nya di css tentuna

#sopyannc {
background-color: #ececec;
background: -webkit-gradient(linear, left top, right top, from(#2F2727), to(#ececec));
background: -webkit-linear-gradient(left, #ececec, #2F2727);
background: -moz-linear-gradient(left, #ececec, #2F2727);
background: -ms-linear-gradient(left, #ececec, #2F2727);
background: -o-linear-gradient(left, #ececec, #2F2727);
}

maka hasilnya seperti dibawah ini

CONTOH 1

kita explore lagi background css3 gradient karena css bisa lebih banyak lagi variasi nya tinggal sobat yang menentukan warna nya
 untuk css nya seperti ini

background: -moz-linear-gradient(left center , #2F2727, #ececec, #2F2727, #ececec, #2F2727) repeat scroll 0% 0% transparent;
    background-color: transparent;
    background-image: -moz-linear-gradient(left center , #2F2727, #ececec, #2F2727, #ececec, #2F2727);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;

maka hasilnya seperti ini

CONTOH 2
background css3
 gradient

Ada 4 tipe gradient yang bisa digunakan, yakni

Linear Gradient
Radial Gradient
Repeating Linear Gradient, dan
Repeating Radial Gradient.

 kita bisa kembangkan lagi motif motif dari pada penggunaan gradient ini karena kita bisa meminimalisir penggunaan gambar tentunya bisa kita contohkan lagi

CONTOH 3
background css3
 gradient

dengan css nya ini

background: -webkit-radial-gradient(top,red,yellow,green);
background: radial-gradient(at top,red,yellow,green);

saya rasa tinggal anda mengembangkannya sendiri dan menerapkannya kedalam blog sobat dan tentunya agar menarik lagi tanpa gambar dan javascript yang memberatkan blog sobat.