CSS Background Gradien
Kekagumanku pada peLangi tidak dan takkan pernah habis, bagaimana tidak, Pelukis Agung teLah membuat mahakarya yang sangat menakjubkan. Setelah beberapa waktu lalu sempat meLihat peLangi indah mengelilingi buLan, memainkan fLip book bergaya peLangi, sekarang saatnya mengkoLaborasikan indahnya peLangi dengan CSS. Kita dapat membuat gradien warna sebagai background dengan CSS.
<div style="background: -moz-linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
background: -webkit-gradient(linear, left bottom, right top, from(red), color-stop(16%,orange), color-stop(32%,yellow), color-stop(48%,green), color-stop(64%,blue), color-stop(80%,indigo), to(violet));"> Contoh Isi Teks</div>
See? indah bukan?
Sahabat bisa menentukan sendiri jumLah warna untuk background gradien: dua, tiga, dan seterusnya. Sahabat juga bisa menggunakan kode warna semisaL ‘#FF0000’, ‘#336699’, dan lain-lain sebagai warna gradien. Sahabat tentu juga bisa dengan mudah menggganti arah gradien yang lain, yaitu dengan mengganti besar sudut (45deg) menjadi niLai diantara 0deg sampai 360deg, dan ganti juga ‘left bottom’, dan ‘right top’ sesuai keinginan.:
Contoh lain:
<div style="background: -moz-linear-gradient(top, #FF0000, #FFFF00);
background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FFFF00));"> Contoh Isi Teks</div>
Selamat bereksperimen.
Tested on: Firefox 3.6.2, Chrome 4.1, Safari 4.0.5
makasih info-nya…
sangat berguna bagi saya…
Kirain si ariel mo tobat nasyuha di sel, ternyata belum, , katanya dia gak pernah puasa tuh, wedew,, semoga cepet selesai deh kasusnya
Pingback: CSS Border Image | Hari Mulya
terima kasih infonya mas bro..berkunjung saja
makasi gan atas postingannya…
berguna banget ne…
Mantaab, thank’s tutornya om ๐
lam kenal http://www.qveblog.co.cc ๐