Thursday, July 12, 2012

Cara Membuat Background Linear

Kali ini saya akan membahas mengenai warna atau pewarnaan menggunakan CSS, pada bahasan kali ini saya akan membahas tentang Background Linear Gradient di mana cara ini bisa diterapkan ke dalam background blog/web. Pertama yang saya bahas adalah saya ambil contoh cara memberi warna pada background blog sebenarnya tidak terpaku pada background blog saja tapi cara ini juga dapat diterapkan pada elemen lain seperti tombol navigasi dan lainnya.
Langsung saja pertama saya akan sedikit menbahas apa yang sudah saya ketahui mengenai background linear ini, di bawah ini contohnya:


background:-webkit-linear-gradient(red 25%, green 50%, blue 100%);
background:-moz-linear-gradient(red 25%, green 50%, blue 100%);
background:-ms-linear-gradient(red 25%, green 50%, blue 100%);
background:-o-linear-gradient(red 25%, green 50%, blue 100%);
background:linear-gradient(red 25%, green 50%, blue 100%);
height:100px;
width:400px;
Artinya dalam elemen tersebut dengan tinggi 100px dan lebar 400px, dengan warna background yang diterapkan yaitu warna merah 25%, warna hijau 50%, dan warna biru 100%. Jadi diantara batas warna merah dan hijau terdapat warna campuran antar warna merah dan hijau. Begitu juga dengan batas antara warna hijau dan biru. 

Membuat batas antar warna

Selain itu kita juga dapat memberi batas pada masing-masing warna untuk lebih jelasnya dapat dilihat:


background:-webkit-linear-gradient(red 35%, green 35%, green 65%, blue 65%);
background:-moz-linear-gradient(red 35%, green 35%, green 65%, blue 65%);
background:-ms-linear-gradient(red 35%, green 35%, green 65%, blue 65%);
background:-o-linear-gradient(red 35%, green 35%, green 65%, blue 65%);
background:linear-gradient(red 35%, green 35%, green 65%, blue 65%);
height:100px;
width:400px;
Hampir sama dengan yang tadi hanya saja terdapat batas antara warna satu dengan warna lainnya, warna merah 35% dan dibatasi dengan warna hijau 35% juga. Artinya background yang berwarna merah sebesar 35% dari tinggi elemen dan di berhentikan oleh warna hijau pada 35% nya lalu dilanjutkan dengan warna hijau dari 35% sampai 65% beigtu seterusnya. Kurang lebih seperti itulah begitu seterusnya. Dengan sedikit menambah kode maka background akan terlihat rapi. 
Sampai sini saja dulu ntar kapan-kapan dilanjut :D

28 comments:

  1. keren sob..! ada yg mirip bendera palestina....

    btw.,cahaya putih yg letakx pd bagian atas tuh gmn klo dibikin kayak petir pasti terlihat lbh keren..! \o/

    ReplyDelete
    Replies
    1. wkwkw ntar lah klo udah dapet ilmunya :D

      Delete
  2. wow, ikutan belajar masbro :D

    content-wrappernya jadi main-wrapper yah mas? hihi. Kok kayaknya gak keikut mediaqueries T_T .Jadinya pas sy kecilkan dibawah 400 *kayaknya, jadi gak ke ikut melebar T_T

    ReplyDelete
    Replies
    1. kayaknya ngga, klo ga salah #main-wrapper ada, #content-wrapper juga ada. jdi gmana nih solusinya?? :)

      Delete
    2. Kalau nge-resizenya sehabis nge-toggle sidebar, media queries jadi rusak. Toggle sidebar nggak cocok untuk tema responsif.

      Delete
    3. owh, iya bener hihi :D
      okok, tapi saya masih bingung sama fontnya pas di resize ga ikut berubah :(

      Delete
    4. pake flittext.js kan? atau pakai skala persen? :\

      Delete
    5. apanya mas?? ngga mksudnya font size nya saat di resize ga berubah.

      Delete
  3. ehh mas... kok demonya dalam bentuk gambar...
    mungkin lebih bagusnya langsung live aja.

    ReplyDelete
    Replies
    1. oh ya sih tadinya pengen langsung, thank's sarannya :)

      Delete
  4. ikut nyimak diskusix para master..., :)

    ReplyDelete
  5. tambah keren sob blognya saya suka tampilanya

    ReplyDelete
  6. gradientnya bagus :D bisa kaya garis gitu kapan2 ngepost pake gradient yang kaya gini ah :D bosen pake linier gradient sama radial gradient sekali2 mau yang kaya gini :D nice posting bang mire tahu bacem *eh tempe. :p

    ReplyDelete
    Replies
    1. emg baru tau gtu?? ahh brcandanya jelek :p

      Delete
  7. Aku tahu yang lebih gampangnya, coba lewat ColorZilla
    he,, he,, aku biasanya lewat situ kalau mau ngambil gradient :p

    ReplyDelete
    Replies
    1. owh sip2, tpi saya lebih tertantang dengan manual supaya tambah stress :p

      Delete
  8. wah mantap nih....
    Makasih ilmunya bos. Sangat berguna.

    ReplyDelete
  9. tisp yang berguna sobat, cocok untuk pengetahuan pengkodean warna,, top deh pokoknya..

    sory banget sobat baru bisa berkunjung,, maklum kesibukan (alasan aja ni)hahahahaahahhaa

    ReplyDelete
  10. Kang kok pas diliat di Home, tgl postingannya dah bulan Agustus ya wkwkwk padahal Puasa aja belum :p

    Salam kenal btw

    ReplyDelete
    Replies
    1. iya saya lupa setting tgl postingnya hehe

      Delete