CSS3 Linear Gradient

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