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 yakni 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 yakni 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 menawarkan direksi gradien dari atas ke bawah, 1 akan menawarkan 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 dipakai untuk mengubah keseimbangan pembagian ruang pada masing-masing warna. Secara normal, kalau terdapat dua warna dalam satu area, maka warna pertama akan mendapat belahan sebesar 0% dari ruangan sedangkan warna yang ke dua akan mendapat 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 memakai satuan piksel, meskipun beberapa ada juga yang memakai 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 sebab Saya masih belum menemukan tumpuan yang sempurna */

Referensi:

Sumber https://www.dte.web.id/