Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

CSS3 Radial Gradient

Pembaharuan: 23 Januari 2012

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

CSS3 radial Farthest Side dan Farthest Corner
farthest-side dan farthest-corner
KonstanDeskripsi
closest-side / containAkhir 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-sideBerlawanan 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-cornerAkhir gradien akan berhenti tepat pada sudut terdekat area dari pusat gradien.
farthest-corner / coverAkhir 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:

  

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!