CSS3 Radial Gradient

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%);
}

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 

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 

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