CSS3 Radial Effect

Cascading Style Sheets sekarang sudah mencapai level CSS3. Dimana dengan segala kelebihan yang dimiliki oleh CSS3 ini lebih memberi warna ragam guna melatih kreativitas kita dalam menulis dengan rumus CSS supaya lebih full stylish sob. Seperti membuat gambar dikasih efek rotate (berputar), skew (miring) dan lain-lain. Dengan bahasa baru ini semoga sobat dapat lebih tertarik akan dunia HTML. Sumber untuk mempelajari ilmu ini sangatlah banyak diluaran sana! Ini Beben si bloglang nu ganteng kalem tea ada koleksi web HTML dan juga CSS. Masuk ke inti postingan, mempelajari efek hasil dari CSS Radial. Contoh ah :P

Prodigy of Head
Beben Koben

CSS3 rotate dengan radius border.

Prodigy of Head - Beben Koben

CSS3 text shadow effects.

Masih banyak deh pokoknya sob :) Satu hal yang mesti diingat oleh sobat sekalian, bahwasannya fitur dari CSS3 ini belum support secara merata pada setiap browsingan. Untuk mengetahui issue informasi browser bisa sobat lihat di Browser Information dan referensi CSS3nya di CSS3 Reference.
Back to CSS3 RADIAL...;)

Perhatikan contoh berikut ini sob (telaah perpaduan warnanya)

<a href="http://beben-koben.blogspot.com/" title="Prodigy of Head" target="_blank">Prodigy of Head</a>

Tekan Ctrl+C untuk Copy dan Ctrl+V untuk Paste!

Inti isi dari atribut kode CSS3 ini sebagai berikut...-moz-radial-gradient(center 80% , circle farthest-corner, #efefef 0%, rgb(100,110,110) 100%) repeat scroll 0 0 transparent;

-webkit-gradient(radial, 50% 80%, 200, 50% 40%, 1000, from(#efefef), to(rgb(100,110,110)))Kode -moz- dan -webkit- biasanya support terhadap browsingan Mozilla, Google Chrome and Safari. Secara pastinya saya juga tidak tauk ini kode CSS3 radial ini sudah support kemana saja :D Kodenya saja dapat dari forum sih ;)) Dikarenakan Beben moziller, maka disini yang saya beberkan versi mozillanya saja yak sob, wong bukan ahlinya juga sih :))

-moz-radial-gradient(center 50% , circle farthest-corner, #99C2FF 60%, rgb(0,102,255) 90%)
no-repeat scroll 0 0 transparent;

>> center: Variasi efek gradient nanti yang akan timbul. Kalau mau kiri = left, kanan = right.
>> 50%: Satuan dalam persentase efek blur warna biru muda ditengah pada demo diatas. Pixel (px) juga bisa, terserah.
>> circle: Tidak tauk ini merujuk kemana, dan yg pasti ada di artikel mengenai SVG shapes. Atribute yg bisa digunakan circle sama ellipse.
>> 60%: Efek gradient juga, semakin besar angka persentasenya maka akan pudar (menghilang) efek gradientnya.
>> 90%: Pendukung efek gradient (efek ke-2) setelah efek gradient yg 60%.
>> no-repeat: Bisa dirubah dengan repeat. Jika kita merubah ke no-repeat maka perhatikan variasi kode transparent setelahnya itu! Kalau kita memberi warna, maka sisa daerah yang kosong nanti akan ditimpa dengan warna yg kita pasangkan.

Begitulah penjelasan mengenai CSS3 gradient radial. Jangan pernah mencoba menghapus/merubah atribut kode CSS3 diatas yg tidak Beben jabarkan penjelasannya sob! Tidak berfungsi nantinya...hehehe.
Happy CSS3 \m/