CSS3 Radial Gradient

Pembaharuan: 23 Januari 2012

BAB 1: Perkenalan

Penulisan gradien radial secara umum untuk masing-masing peramban dapat dituliskan seperti ini:

div {
  /* Chrome & Safari 4+ */
  background-image:-webkit-radial-gradient(posisi, ukuran dan sifat, color stop/baris warna);

 /* Firefox 3.6+ */
  background-image:-moz-radial-gradient(posisi, ukuran dan sifat, color stop/baris warna);

 /* Internet Explorer 10+ (Setahu Saya Masih Draft) */
  background-image:-ms-radial-gradient(posisi, ukuran dan sifat, color stop/baris warna);

 /* Opera 12 (Setahu Saya Masih Draft) */
  background-image:-o-radial-gradient(posisi, ukuran dan sifat, color stop/baris warna);

 /* W3C */
  background-image:radial-gradient(posisi, ukuran dan sifat, color stop/baris warna);
}

BAB 2: Perkenalan Nilai Pembangun

1. Posisi

Posisi adalah tentang di sebelah mana gradien akan ditampilkan. Berhubung radial gradient adalah gradien berbentuk lingkaran, maka posisi juga wajib untuk ditentukan. Menentukan posisi umumnya dapat dituliskan menggunakan satuan persen atau piksel dengan mengambil sudut pandang sumbu-x dan sumbu-y:

Default / Menerapkan Baris Warna tanpa Mendeklarasikan Posisi

div {
  background:-webkit-radial-gradient(blue 30px, whitesmoke 100%);
  background:-moz-radial-gradient(blue 30px, whitesmoke 100%);
  background:-ms-radial-gradient(blue 30px, whitesmoke 100%);
  background:-o-radial-gradient(blue 30px, whitesmoke 100%);
  background:radial-gradient(blue 30px, whitesmoke 100%);
}

Menerapkan Baris Warna dan Mendeklarasikan Posisi 50% 50%

div {
  background:-webkit-radial-gradient(50% 50%, blue 30px, whitesmoke 100%);
  background:-moz-radial-gradient(50% 50%, blue 30px, whitesmoke 100%);
  background:-ms-radial-gradient(50% 50%, blue 30px, whitesmoke 100%);
  background:-o-radial-gradient(50% 50%, blue 30px, whitesmoke 100%);
  background:radial-gradient(50% 50%, blue 30px, whitesmoke 100%);
}

Mendeklarasikan Posisi Offset

Di sini Saya tambahkan juga sifat radial gradien. Karena jika tidak, efek offset tidak akan terlalu jelas terlihat dan dikhawatirkan ini akan membingungkan Anda pada bagian ini. Yang penting jangan pedulikan deklarasi sifat gradien untuk saat ini. Fokus saja pada offsetnya dan bangun logikamu sendiri. Sifat gradien akan dibahas lebih detail setelah ini:

div {
  background:-webkit-radial-gradient(30% 100%, circle closest-corner, blue 30px, whitesmoke 100%);
  background:-moz-radial-gradient(30% 100%, circle closest-corner, blue 30px, whitesmoke 100%);
  background:-ms-radial-gradient(30% 100%, circle closest-corner, blue 30px, whitesmoke 100%);
  background:-o-radial-gradient(30% 100%, circle closest-corner, blue 30px, whitesmoke 100%);
  background:radial-gradient(30% 100%, circle closest-corner, blue 30px, whitesmoke 100%);
}

Koordinat Posisi

2. Sifat-Sifat dan Penentuan Bentuk

Mulai dari sini penjelasannya akan semakin rumit. Bersiaplah!!! WARRRGGHH!!!!

closest-side / contain

Mendeklarasikan closest-side akan membuat dimensi gradien menyesuaikan diri berdasarkan batas area (sisi-sisi area). Saat gradien menyebar dari pusat, maka akhirnya akan berhenti pada sisi area terdekat. Nilai closest-side memiliki arti yang sama dengan contain.

div {
  background:-webkit-radial-gradient(50% 50%, closest-side, blue 30px, whitesmoke 100%);
  background:-moz-radial-gradient(50% 50%, closest-side, blue 30px, whitesmoke 100%);
  background:-ms-radial-gradient(50% 50%, closest-side, blue 30px, whitesmoke 100%);
  background:-o-radial-gradient(50% 50%, closest-side, blue 30px, whitesmoke 100%);
  background:radial-gradient(50% 50%, closest-side, blue 30px, whitesmoke 100%);
}

closest-corner

Mendeklarasikan closest-corner akan membuat dimensi gradien menyesuaikan diri berdasarkan sudut terdekat area. Saat gradien menyebar dari pusat, maka gradien akan terus menembus melewati sisi-sisi area hingga salah satu sisi diagonal radialnya menyentuh ujung area terdekat, pada saat itu penyebaran akan berhenti.

div {
  background:-webkit-radial-gradient(50% 50%, closest-corner, blue 30px, whitesmoke 100%);
  background:-moz-radial-gradient(50% 50%, closest-corner, blue 30px, whitesmoke 100%);
  background:-ms-radial-gradient(50% 50%, closest-corner, blue 30px, whitesmoke 100%);
  background:-o-radial-gradient(50% 50%, closest-corner, blue 30px, whitesmoke 100%);
  background:radial-gradient(50% 50%, closest-corner, blue 30px, whitesmoke 100%);
}

Sifat closest-side dan closest-corner

closest-side dan closest-corner

farthest-side

Mendeklarasikan farthest-side akan membuat dimensi gradien menyesuaikan diri berdasarkan sisi terjauh area. Saat gradien menyebar dari pusat, maka akhirnya akan berhenti pada sisi area terjauh. Sisi area terdekat diabaikan dan akan terus dilewati. Akan sangat mudah mengetahui sifatnya jika kita terapkan gradien menyudut dengan bentuk elips (elips di sini maksudnya adalah bentuk radial menyesuaikan diri berdasarkan ukuran area dengan lebar dan tinggi yang tidak sama:

div {
  background:-webkit-radial-gradient(10% 50% ,farthest-side, blue 30px, whitesmoke 100%);
  background:-moz-radial-gradient(10% 50%, farthest-side, blue 30px, whitesmoke 100%);
  background:-ms-radial-gradient(10% 50%, farthest-side, blue 30px, whitesmoke 100%);
  background:-o-radial-gradient(10% 50%, farthest-side, blue 30px, whitesmoke 100%);
  background:radial-gradient(10% 50%, farthest-side, blue 30px, whitesmoke 100%);
}

farthest-corner / cover

Mendeklarasikan farthest-corner akan membuat dimensi gradien menyesuaikan diri berdasarkan sudut terjauh area. Saat gradien menyebar dari pusat, maka gradien akan terus menembus melewati sisi-sisi dan ujung-ujung area terdekat hingga salah satu sisi diagonal radialnya menyentuh ujung area terjauh, pada saat itu penyebaran akan berhenti. farthest-corner bersinonim dengan cover:

div {
  background:-webkit-radial-gradient(10% 50%, farthest-corner, blue 30px, whitesmoke 100%);
  background:-moz-radial-gradient(10% 50%, farthest-corner, blue 30px, whitesmoke 100%);
  background:-ms-radial-gradient(10% 50%, farthest-corner, blue 30px, whitesmoke 100%);
  background:-o-radial-gradient(10% 50%, farthest-corner, blue 30px, whitesmoke 100%);
  background:radial-gradient(10% 50%, farthest-corner, blue 30px, whitesmoke 100%);
}

Sifat farthest-side dan farthest-corner

farthest-side dan farthest-corner

Konstan	Deskripsi
closest-side / contain	Akhir gradien akan berhenti pada batas area paling dekat dengan pusat (untuk circle) atau memenuhi kedua sisi vertikal dan horizontal terdekat dari pusat gradien (untuk elips).
farthest-side	Berlawanan dengan closest-side. Akhir gradien akan berhenti pada sudut terjauh dari pusat gradien (akan terlihat jelas perbedaannya jika letak gradien tidak berada tepat di tengah).
closest-corner	Akhir gradien akan berhenti tepat pada sudut terdekat area dari pusat gradien.
farthest-corner / cover	Akhir gradien akan bernenti pada sudut terjauh dari pusat gradien.

3. Baris Warna & Color Stop

Baris warna dan pengertian color-stop bisa Anda pelajari pada artikel sebelumya.

BAB 3: Duplikasi Gradien

Seperti halnya CSS3 Linear Gradient, duplikasi gradien dapat dibuat dengan cara menambahkan imbuhan/affiks repeating pada deklarasi gradien radial:

div {
  background:-webkit-repeating-radial-gradient(center, closest-side, indigo, gray 5%, darkgreen 10%, darkred 15%, darkblue 20%);
  background:-moz-repeating-radial-gradient(center, closest-side, indigo, gray 5%, darkgreen 10%, darkred 15%, darkblue 20%);
  background:-ms-repeating-radial-gradient(center, closest-side, indigo, gray 5%, darkgreen 10%, darkred 15%, darkblue 20%);
  background:-o-repeating-radial-gradient(center, closest-side, indigo, gray 5%, darkgreen 10%, darkred 15%, darkblue 20%);
  background:repeating-radial-gradient(center, closest-side, indigo, gray 5%, darkgreen 10%, darkred 15%, darkblue 20%);
}

BAB 4: Tambahan

Selain menggunakan persentase dan piksel, nilai posisi gradien juga bisa dituliskan dengan direksi seperti biasa (top, right, bottom, left, top left, top right, bottom left, bottom right, center):

div {
  background:-webkit-radial-gradient(top left, farthest-corner, blue 30px, whitesmoke 100%);
  background:-moz-radial-gradient(top left, farthest-corner, blue 30px, whitesmoke 100%);
  background:-ms-radial-gradient(top left, farthest-corner, blue 30px, whitesmoke 100%);
  background:-o-radial-gradient(top left, farthest-corner, blue 30px, whitesmoke 100%);
  background:radial-gradient(top left, farthest-corner, blue 30px, whitesmoke 100%);
}

circle dan ellipse bisa ditambahkan sebelum menuliskan sifat untuk sekedar mempertegas bentuk radial dari gradien. Apakah akan tetap mempertahankan bentuknya yang bulat sempurna meski area tidak sama tinggi dan lebar, ataukah memilih untuk membentuk elips, atau membiarkan mereka menyesuaikan diri dengan lingkungannya (ellipse sebenarnya tidak begitu penting):

div {
  background:-webkit-radial-gradient(30% 30%, circle closest-corner, white, black);
  background:-moz-radial-gradient(30% 30%, circle closest-corner, white, black);
  background:-ms-radial-gradient(30% 30%, circle closest-corner, white, black);
  background:-o-radial-gradient(30% 30%, circle closest-corner, white, black);
  background:radial-gradient(30% 30%, circle closest-corner, white, black);
}

div {
  background:-webkit-radial-gradient(30% 30%, ellipse closest-corner, white, black);
  background:-moz-radial-gradient(30% 30%, ellipse closest-corner, white, black);
  background:-ms-radial-gradient(30% 30%, ellipse closest-corner, white, black);
  background:-o-radial-gradient(30% 30%, ellipse closest-corner, white, black);
  background:radial-gradient(30% 30%, ellipse closest-corner, white, black);
}

Referensi:

• The Art Of Web - CSS: Radial Gradients Syntax
• Surfin' Safari - CSS3 Gradients
• Developer Mozilla - Radial Gradient
• IEBlog - CSS3 Gradients in IE10 Platform Preview 1
• Developer Opera - CSS3 Radial Gradient