Hari Mulyanto
28

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

Filed in: Blogging, How It Works Tags: , , , , , , , , , BACKGROUND INDAH, css gradien, gradien html, 

28 Responses to "CSS Background Gradien"

  1. eric says:

    :)
    salam kenal

  2. Pojok Pradna says:

    walah..ketinggalan soyo adoh..

  3. Alwi says:

    Tadi sore sempat gak bisa diakses …

    Kemaren sempat tak coba di dreamweaver gak muncul gradiennya, barusan saya coba dah bisa …..

    Thank kreasinya sewaktu-waktu pingin mengganti background bisa dimanfaatkan tanpa menggunakan gambar supaya lebh ringan

  4. Irawan says:

    Ah bola dah mulai, kembali ke layar televisi

  5. Shanty says:

    Hasilnya keren juga!!!
    Makasih pak tutorialnya… :)

  6. budiarnaya says:

    Wah…mantap nich…trims mas, teruslah berkreasi dan bagikan sama kami yang belum mengetahui

  7. nice
    blue like pelangi
    salam hangat dari blue

  8. bidikcom says:

    sip… sebagai bahan masukan untuk diterapkan pada design blogku nantinya… thanks

    o.k.

  9. isi blognya bagus2.. lam kenal.. :D

    saLam kenaL juga dari PurbaLingga…

  10. Pencerah says:

    berat gak ya nantinya?

Leave a Reply

Submit Comment

© 2009-2016 Hari Mulya. All rights reserved. XHTML / CSS Valid.
Your Left Brain Can Analyze It While Your Right Brain Let You Feel It