CSS3 Linear Gradient

Tabel Konten

1. BAB 1: Perkenalan Sintaks 
   1. Chrome & Safari 4+ 
   2. Chrome 10+ & Safari 5.1+ 
   3. Firefox 3.6+ 
   4. Opera 10+ 
   5. W3C 
   6. Internet Explorer 6 - 9 
   7. Internet Explorer 10+ 
2. BAB 2: Direksi dan Sudut 
   1. A. Direksi 
      1. Contoh Sintaks Lengkap 
   2. B. Sudut 
      1. Contoh Sintaks Lengkap 
3. BAB 3: Warna Berganda 
4. BAB 4: Color Stop 
5. BAB 5: Kelebihan Satuan Pengukuran Persentase dan Satuan Mutlak 
   1. Menggunakan Persentase: Gradien Lebih Fleksibel 
   2. Menggunakan Piksel/Satuan Mutlak: Gradien Tidak Fleksibel namun Terukur 
6. BAB 6: Duplikasi Gradien 
7. Referensi: 

BAB 1: Perkenalan Sintaks 

Chrome & Safari 4+ 

background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));

Pertama kali, sintaks gradien Webkit dimulai dengan awalan -webkit-gradient. Tipe gradien masih dipisahkan. left top dan left bottom adalah start point. Atau Saya lebih suka menyebutnya sebagai kedatangan/awal pertama kali gradien diproduksi. Apakah dari kiri atas, kiri bawah atau yang lainnya.

Chrome 10+ & Safari 5.1+ 

background: -webkit-linear-gradient(top, #fff, #000);

Sintaks Webkit berikutnya mengalami perubahan dengan menuliskan tipe gradien di depan prefiks itu sendiri. top adalah direksi bahwa gradien akan tumbuh mulai dari atas menuju ke bawah.

Firefox 3.6+ 

background: -moz-linear-gradient(top,  #fff,  #000);

Aturannya sama dengan -webkit-linear-gradient.

Opera 10+ 

background: -o-linear-gradient(top, #fff, #000);

Aturannya sama dengan -webkit-linear-gradient.

W3C 

background: linear-gradient(top, #fff, #000);

Aturannya sama dengan -webkit-linear-gradient. Atau lebih tepatnya: Webkit, Firefox, IE 10+ dan Opera mengikuti peraturan W3C ini.

Internet Explorer 6 - 9 

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');

GradientType ada dua: 0 dan 1.
0 akan memberikan direksi gradien dari atas ke bawah, 1 akan memberikan direksi gradien dari kiri ke kanan.

Internet Explorer 10+ 

background: -ms-linear-gradient(top, #fff, #000);

Aturannya sama dengan -webkit-linear-gradient.

BAB 2: Direksi dan Sudut 

A. Direksi 

Contoh Sintaks Lengkap 

div {
  background:-webkit-linear-gradient(left top, red, blue);
  background:-moz-linear-gradient(left top, red, blue);
  background:-ms-linear-gradient(left top, red, blue);
  background:-o-linear-gradient(left top, red, blue);
  background:linear-gradient(left top, red, blue);
}

START POINT: RED END POINT: BLUE
Direksi	Tampilan
top
right
bottom
left
left top
left bottom
right top
right bottom

B. Sudut 

• 0deg sama dengan left.
• 90deg sama dengan bottom.
• 180deg sama dengan right.
• 270deg sama dengan top.
• 360deg sama dengan left.

Contoh Sintaks Lengkap 

div {
  background:-webkit-linear-gradient(90deg, red, blue);
  background:-moz-linear-gradient(90deg, red, blue);
  background:-ms-linear-gradient(90deg, red, blue);
  background:-o-linear-gradient(90deg, red, blue);
  background:linear-gradient(90deg, red, blue);
}

START POINT: RED END POINT: BLUE
Sudut	Tampilan
0deg
45deg
77deg
90deg

BAB 3: Warna Berganda 

Kemampuan CSS Gradient tidak hanya sebatas menerjemahkan dua warna saja sebagai warna dasar gradien, tetapi juga bisa lebih dari itu. Aturannya sangat sederhana: Warna awal dimulai dari kiri begitu seterusnya menuju ke kanan:

div {
  background:-webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
  background:-moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
  background:-ms-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
  background:-o-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
  background:linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
}

BAB 4: Color Stop 

Color Stop digunakan untuk mengubah keseimbangan pembagian ruang pada masing-masing warna. Secara normal, jika terdapat dua warna dalam satu area, maka warna pertama akan mendapatkan bagian sebesar 0% dari ruangan sedangkan warna yang ke dua akan mendapatkan 100%. (?)
Dengan color stop, Anda bisa mengatur pembagian ruangan baik dengan persentase maupun piksel:

div {
  background:-webkit-linear-gradient(left, red 0%, green 75%, blue 100%);
  background:-moz-linear-gradient(left, red 0%, green 75%, blue 100%);
  background:-ms-linear-gradient(left, red 0%, green 75%, blue 100%);
  background:-o-linear-gradient(left, red 0%, green 75%, blue 100%);
  background:linear-gradient(left, red 0%, green 75%, blue 100%);
}

div {
  background:-webkit-linear-gradient(left, red 50px, green 90px, blue);
  background:-moz-linear-gradient(left, red 50px, green 90px, blue);
  background:-ms-linear-gradient(left, red 50px, green 90px, blue);
  background:-o-linear-gradient(left, red 50px, green 90px, blue);
  background:linear-gradient(left, red 50px, green 90px, blue);
}

BAB 5: Kelebihan Satuan Pengukuran Persentase dan Satuan Mutlak 

Coba Anda ubah ukuran <textarea> di bawah ini dan temukan perbedaannya:

Menggunakan Persentase: Gradien Lebih Fleksibel 

Menggunakan Piksel/Satuan Mutlak: Gradien Tidak Fleksibel namun Terukur 

BAB 6: Duplikasi Gradien 

Gradien juga bisa diduplikasi dengan cara menerapkan sintaks duplikasi gradien. Duplikasi gradien idealnya menggunakan satuan piksel, meskipun beberapa ada juga yang menggunakan persentase. Sekedar untuk memastikan bahwa satu baris gradien yang terbentuk tidak akan memenuhi ruangan, melainkan akan diduplikasikan:

div {
  background:-webkit-repeating-linear-gradient(-45deg, black, orangered 10px, forestgreen 10px, antiquewhite 20px);
  background:-moz-repeating-linear-gradient(-45deg, black, orangered 10px, forestgreen 10px, antiquewhite 20px);
  background:-ms-repeating-linear-gradient(-45deg, black, orangered 10px, forestgreen 10px, antiquewhite 20px);
  background:-o-repeating-linear-gradient(-45deg, black, orangered 10px, forestgreen 10px, antiquewhite 20px);
  background:repeating-linear-gradient(-45deg, black, orangered 10px, forestgreen 10px, antiquewhite 20px);
}
/* Khusus sintaks IE, Saya masih belum yakin karena Saya masih belum menemukan referensi yang tepat */

Referensi: 

• Surfin' Safari - CSS Gradients
• Developer Mozilla - Linear Gradient
• Developer Mozilla - Repeating Linear Gradient
• Developer Opera - CSS Linear Gradient
• MSDN - Gradient Filter