Border-radius: Membuat pojok yang tidak lancip dengan CSS3
Aku sendiri sebenarnya baru beberapa hari tahu tentang css3, perkenalanku dengan css3 pun setelah aku membaca tentang blogazine dan akhirnya aku mencoba membuat sebuah blog dengan konsep blogazine menggunakan platform blogger. Itu pun akhirnya terbengkalai karena banyak kerjaan. Yah moga-moga suatu hari bisa menyelesaikan blog scriptjs dengan baik. Mengenai css3, kali ini saya ingin berbagi mengenai sebuah code sederhana yang akan membuat pojok-pojok sebuah box terlihat cekung/fillet/rounded dan tidak lancip. code yang saya maksud adalah border-radius. Mozila/Firefox, Google chrome dan Safari sudah meng-implementasikan code ini.
Ini adalah contoh box yang menggunakan code border-radius. Jika kamu tidak melihat sebuah pojok-pojok yang cekung/fillet/rounded, maka kamu harus mengganti browser kamu dengan Mozila/Firefox, Google chrome atau Safari terbaru.
Untuk membuat sebuah box seperti diatas code css yang saya gunakan adalah:
<div style="-moz-border-radius: 10px 10px 10px 10px;-webkit-border-radius: 10px 10px 10px 10px; background-color: #b4ff00; border: 2px solid rgb(108, 159, 0); color: #ab0000; font-family: Arial,Sans-serif; font-weight: bold; padding: 10px; text-shadow: 1px 1px 1px rgba(47, 47, 47, 0.8);">
<span style="font-size: large;">Ini adalah contoh box yang menggunakan code <i><span style="color: black;">border-radius</span></i>. Jika kamu tidak melihat sebuah pojok-pojok yang cekung/fillet, maka kamu harus mengganti browser kamu dengan Mozila/Firefox, Google chrome atau Safari terbaru</span></div>
Busyett dah banyak banget tu tulisan ya?? Oke deh saya akan coba membuatnya lebih sederhana. Untuk membuat sebuah box yang ujung/pojoknya rounded/fillet maka yang kita butuhkan adalah sebuah code seperti ini "border-radius: 10px 10px 10px 10px;" tapi masalahnya ada dua browser besar yang sekarang ini banyak di gunakan oleh visitor, yaitu Mozila/Firefox dan Google chrome. Sedangkan kedua browser tersebut menggunakan dua engine yang berbeda, yang tentu saja membuat kita harus membedakan code yang kita tulis. Caranya gampang, kita tinggal menambahkan code
-moz- untuk Mozila/Firefox dan -webkit- untuk Google chrome. nah bunyinya kan seperti ini "-moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; "
Ini adalah contoh box yang menggunakan code :
"-moz-border-radius: 10px 0px 0px 0px;
-webkit-border-radius: 10px 0px 0px 0px;"
"-moz-border-radius: 10px 0px 0px 0px;
-webkit-border-radius: 10px 0px 0px 0px;"
Ini adalah contoh box yang menggunakan code :
"-moz-border-radius: 0px 10px 0px 0px;
-webkit-border-radius: 0px 10px 0px 0px;"
"-moz-border-radius: 0px 10px 0px 0px;
-webkit-border-radius: 0px 10px 0px 0px;"
Ini adalah contoh box yang menggunakan code :
"-moz-border-radius: 0px 0px 10px 0px;
-webkit-border-radius: 0px 0px 10px 0px;"
"-moz-border-radius: 0px 0px 10px 0px;
-webkit-border-radius: 0px 0px 10px 0px;"
Ini adalah contoh box yang menggunakan code :
"-moz-border-radius: 0px 0px 0px 10px;
-webkit-border-radius: 0px 0px 0px 10px;"
"-moz-border-radius: 0px 0px 0px 10px;
-webkit-border-radius: 0px 0px 0px 10px;"
Dengan begitu maka kita bisa mengartikan seperti ini :
Jika kita menulis kode css yang seperti ini :
border-radius: 10px 10px 10px 10px;
maka artinya kurang lebih :
border-radius: 10px(radius pojok kiri atas) 10px(radius pojok kanan atas) 10px(radius pojok kanan bawah) 10px(radius pojok kiri bawah);
Jika kita tidak ingin membuat salah satu pojok rounded/fillet maka yang kita lakukan tinggal mengisi nilai salah satu pojok dengan "0 (nol)". Oia jangan lupa untuk menambahkan -moz- dan -webkit- didepan border
Sekian dari saya semoga bisa membantu..
Untuk Implementasi dalam template blogger anda bisa melihatnya di
www.nuvent.co.cc
loh ente ini gimana sih..ente kan kasih value berulang sperti 10px lanjut 0px lanjut 0px lanjut 0px..
itu kan sama right, left, bottom, top..
saya pernah membahasnya di cara membuat text-shadow.. tapi kalu di w3c seperti yang saya perdebatkan dengan fadly, itu tidak di terima value yang berulang,, dia menerima sfesifikasi value, sperti right, top, left, bottom yang di ikut sertakan.. lagipula kalu berkereasi sulit juga dengan pengulangan, oleh sebab itu standarnya mereka merapatkan di moz
-moz-border-radius-bottomleft:40px
-webkit-border-bottom-right-radius:40px;
silahkan di teliti mereka jarang memberikan value yang berulang karena itu masih penerapan css 2.1 bukan yang ke 3 kalau pun ada mereka memberi 0 tidak di ikuti px, em, dan sebagainya..
hehehe iya yah.. aku kok jadi bingung.. emang dasar bego.. itu kan sama aja, persis kaya kita menulis margin, padding dll... untung tanya sana sini, abis aku lihat disana sini bentuknya kaya punya mas hendro sih. dulu jg pas aku nulis template untuk www.nuvent.co.cc aku masih kaya caranya mas hendro, tapi kok pas aku nyobain "menyederhanakan" kok hasilnya sama.. ya udah akhirnya aku tulis kaya gitu aja..
eh tapi aku jd ada satu pertanyaan lagi...
kalau (minimal hasil visual mata) hasilnya sama, apakah kemudian tutorial saya menjadi salah?? toh pada akhirnya dilihat oleh mata hasilnya akan sama...
masalah terdeteksi...
akan saya perbaiki segera...
(lg banyak kerjaan ofline neh)
terimakasih sudak berkunjung ke blog aku ini...
Hasil pasti lebih baik seperti ini, dengan visual mata,,seperti membuat multi kolom misalnya,, coba kalau ga ada webkit pastinya di chrome tidak bekerja,, tapi tenang aja css3 itu masih penyesuaian seperti demo2 yang di lakukan para seniman web tidak semua mendukung aku lihat di mozila saja tidak bisa apalagi IE!!
maka nya aku pernah membuat lukisan monalisa dengan penyesuaian webkit dan moz,, nah sekarang mungkin value berulang akan masih di terjang visual mata tapi bagaimana kalau sudah di tetapkan standarnya atau lebih di ringkas? mau ga mau kita menulis kode agak panjang sedikit, mungkin value penyerta yang agak hilang..
-webkit-box-shadow:0 20px 30px rgba(0,0,0,0.5);
-moz-box-shadow:0 20px 30px rgba(0,0,0,0.5);
box-shadow:0 20px 30px rgba(0,0,0,0.5);
Dari contoh di atas 0 di berikan tidak ada value penyerta px dan dengan bala bantuan
box-shadow:0 20px 30px rgba(0,0,0,0.5);
Agar lebih yakin sepertinya kalau kita pikir untuk apa di sertakan itu untuk IE kah, untuk Opera kah atau sekedar bala bantuan???
masih bingung...