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

28 thoughts on “CSS Background Gradien

  • 8 June 2010 at 13:55
    Permalink

    CSS 3 emang top markotop, gak perlu pake gambar lagi buat bikin background gradient…

    bisa lebih enteng…

    Reply
  • 8 June 2010 at 18:17
    Permalink

    Pak Mars benar, kita hanya tinggal mengkreasikan saja

    ** :bundo: dengan gaya sok iye ngerti.

    tapi ini pasti bisa, pasti gampang ya Har..

    kaLi ini bener-bener gampang kok, Bund…

    Reply
    • 9 June 2010 at 10:48
      Permalink

      Bun, ntar klo dah bisa, ajarin nDa ya… ;))

      mbecak wae durung lancar kok meh doLanan CSS… ๐Ÿ˜€

      Reply
  • 8 June 2010 at 20:51
    Permalink

    rika kok pinter banget sih, nyong diajari to

    angger kon ngajari tah nyong ora teyeng… ๐Ÿ˜€

    Reply
  • 9 June 2010 at 12:30
    Permalink

    asik juga yah…belum sempet nih nyobain css 3

    ya disempet-sempetin dunk.. sekaLian HTML5 nya…

    Reply
  • 9 June 2010 at 12:42
    Permalink

    Mas hari.. sukses, titip ikut menjaga rumah saya ya.. saya pastikan bulan depan tidak akan terdaftar menjadi top komentator disini….

    pasti masih kedaftar, kan maish banyak tuh modaLnya…

    Reply

Leave a Reply to nDa Cancel reply