Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

CSS3 Linear Gradient

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
DireksiTampilan
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
SudutTampilan
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:

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 2 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!