Kenalan Dengan Border Lengkung

Untuk Kali ini saya akan membahas tentang Border Lengkung. Sobat semua tau maksud dari lengkung atau bisa di bilang dengan bengkok, nah jadi disini saya akan menjelaskan tentang Garis Bengkok pada Template, maaf y sedikit kasar bahasa saya soalnya nilai bahasa saya pas-pasan jadi kurang baik gytu bahasa Indonesia-nya (Ngaku orang Indonesia tapi.... ) y Sudahlah tidak usah membahas nilai bahasa Indonesia saya kan jadi malu .

Mungkin sudah lama y saya tidak meng-update blog ini di karenakan aktifitas sekolah yang sibuk dan PC terjangkit virus, oke saya ceritakan sebentar y kenapa blog saya terjangkit virus. Begini ceritanya, pada suatu hari di hari yang cerah untuk ngeblogging dan menulis datang lah sebuah virus yang mencoba menyelinap ke dalam PC saya, saya berusaha berkata kepadanya, "Tolong dong jangan masuk ke PC aku, nanti data-data qu hilang dan aku tidak bisa nge-blogging (sambil menangis)" sang virus berkata, "jeuh eta mah Derita maneh, aing mah nte hayang nyaho". Walaupun saya sudah memohon-mohon si virus tetap saja masuk ke dalam PC qu yang tidak ada antibodinya sama sekali dan tiba-tiba PC nge-blank lalu cesss (seperti bunyi kentut) tercium bau gosong, waktu saya cek owh tidak mainboard qu bau gosong gytu deh padahal baru beli tuh, tapi untung masih ada garansi jadi tak harus beli lagi deh .

Begitulah cerita yang tidak penting dan tak berguna, sekarang kembali lagi ke Border Lengkung. Disini saya tidak menjelaskan cara pemasangan pada template namun disini saya akan menjelaskan nilai-nilai dari Garis Bengkok (Border Radius), sebelumnya garis bengkok ini hanya bisa di lihat di firefox saja (Percobaan saya).

Pada dasarnya Border ditulis dengan border: 1px solid #0f0; kurang lebih seperti itu sekarang karna sudah populernya CSS3 yang bisa mengurangi penggunaan JS dan berdampak pada keringanan pada template. Pada CSS3 border lengkung di tulis seperti : -moz-border-radius: 30px; dan dapat di atur dengan menambahkan topleft, topright, bottomleft, atau bottomright dan nilai dari border lengkung tersebut adalah px jadi semakin besar px maka semakin lengkung border tersebut, seandainya sobat ingin melengkungkan border di bagian atas kiri maka sobat harus menulis seperti -moz-border-radius-topleft: 30px; dan hasilnya akan menjadi seperti di bawah ini :

Contoh dari Border lengkungan atas kiri

Kode yang di gunakan :


<div style="padding-top:40px;height:50px;background: none repeat scroll 0% 0% rgb(0, 0, 0); -moz-border-radius-topleft: 30px;color: rgb(0, 255, 0); -moz-box-shadow: 3px 3px 4px rgb(88, 88, 88); text-align: center;">Contoh dari Border lengkungan atas kiri</div>


Nah kalau untuk memasangkan ke dalam Template saya akan contohkan Cara pemasangan di Main-Wrapper

kode umum main-wrapper kurang lebih seperti di bawah ini :


#main-wrapper {
width: 560px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


dan apabila ingin memberi lengkungan akan menjadi seperti


#main-wrapper {
width: 560px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
-moz-border-radius-topleft: 30px;color: rgb(0, 255, 0);
}


Nah mungkin di atas adalah sebagian contoh kecilnya saja, kalau sobat dapat menguasai border lengkung mungkin sobat dapat menggunakannya bukan hanya di daerah main-wrapper saja namun di bagian lain-lainnya, mungkin hanya sekian saja dari Border lengkung yang dapat saya jelaskan. Termia kasih dan Happy Blogging .

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg