CSS3 Linear Gradient
Tabel Konten
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 denganleft
.90deg
sama denganbottom
.180deg
sama denganright
.270deg
sama dengantop
.360deg
sama denganleft
.
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 */
2 Komentar
Unknown
mantap di jelaskan secara lengkap di sini , saya biasanya pake tools kalo buat gradient , saya coba bang
Anonim
efek gradient memang dapat mempercantik tampilan blog v sayang menimbulkan warning di validasi CSS3