Cara membuat warna gradasi ( Gradient Collor ) dengan CSS

Manufacturers

Pernah nggak sih lu bro, ngalamin dimana lu sedang buat website, desain latar belakang dari template, table maupun form adalah gambar bitmap dengan warna gradasi, ( misal biru gelap dengan gradasi biru terang ) tiba-tiba dengan tempo yang singkat client atau atasan kita minta untuk diganti warna dari desain tersebut saat itu juga...?

Wih...udah kebayang dong rempongnya mesti rubah lagi warna dari desain layout yang dibuat di Photoshop, Coreldraw atau Illustrator, agak mendingan kalo kita pegang file mentah gambarnya dalam bentuk PSD, DWG, atau AI, paling tinggal buka file terus cocokin dengan komposisi warna yang diminta Client/Atasan kita, klak-klik, ukur sana, ukur sini jadi deh, gampang ye...cuman yang jadi mimpi buruk adalah kalo kita kagak megang sama sekali file mentahnya, ajigile..! udah berbayang tuh yang namanya tracing, ngukur ama slicing, ugh...dah gitu skill desain grafis pas-pasan lagi, pengen minta tolong ama anak desain di satu kantor tengsin juga, masa anak TI nggak bisa desain grafis...wekekeke, yo wis dari pada parno nggak puguh mending kite cari solusinya cuy.

Pertama, dari pada bikin gambar background gradasi yang pake acara tracing, ngukur ama slicing mending pake coding, emang bisa ? - Bisa cuy, tau kan CSS ? nah pake script CSS kita bisa bikin warna latar belakang jadi gradasi, alias hampir mirip kalo pake GRADIENT TOOL di Photoshop, nggak percaya ? ( gw juga tadinya begitu ), ini beberapa contoh baris skrip yang bisa dieksekusi di browser-browser yang begitu tampil dilayar akan terbentuk warna gradasi / gradient color ;

/* IE10 */
background-image: -ms-radial-gradient(left top, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-radial-gradient(left top, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-radial-gradient(left top, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, left top, 0, left top, 1020, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(left top, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Proposed W3C Markup */
background-image: radial-gradient(left top, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);

nah begitu tampil dilayar kira-kira begini gambarnya :

CSS GRADIENT

Kedua, Saran gw, biar skrip code jalan di semua browser, mending di pake semua source-code buat semua browser yang diatas tadi untuk kemudian ditaro di satu file CSS yang sama, nggak usah khawatir skrip-nya bakal error atau bentrok, toh yang akan dieksekusi adalah salah satu baris skrip yang dibuka oleh browser yang bersangkutan, nah disini gw juga bakal share beberapa Tools Online yang bakal bantu lu buat menggenerate dan membuat skrip CSS Gradient collor tadi, nih dia alamat webnya bro, cekidot :

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

http://gradients.glrzad.com/

Nah ntu 2 doang yang jadi andalan gw, sisanya lu bisa cari sendiri di gudangnya Mbah Google...Ok ? Gw rasa itu aja dulu, good luck bro...