Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Senin, 10 Mei 2010

Kenalan Dengan Border Lengkung

Kategori : ,
Css border radiusUntuk 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 :argh: 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

15 Komentar untuk Kenalan Dengan Border Lengkung

ini semacem Rounded Corner yah sob ? keren sih kalau d bikin gt, tp sayangnya kl d buka d IE / Opera g melengkung

kok contohnya gak lengkung kang.. ?

he..eh...kirain cewek body melengkung ...makaciih tipsnya gan :3:

@Rizky2009 => Border Lengkung ini hanya bisa di lihat di firefox dan google crhome untuk yang lain telah saya coba tapi tetap tak kelihatan atau tak berefek

@Secangkir teh dan sekerat roti => coba sobat lihat dengan mozilla 3.6 ke atas pasti kelihatan.

Terima kasih ^_^

Info yang menarik sobat. :) Thanks telah berkunjung :)

mksih infonya son,,,lo melengkung emang bgus

Baca juga sob....

http://roxx-share.blogspot.com/2010/04/rounded-corners-dalam-css.html

Iya, sudah aku praktekan di blog aku.
memang betul, tutorial di atas hanya untuk mozilla, tp sebenarnya ada kode khusus untuk Opera

blognya gaya sekarang..sippp!!! :12:

siip dengan border melengkung jadi tidak monoton.. trims sobat ilmunya

kasusnya seperti apa???
CSS eksternal tuh yg kek apaan yah, lopa nih..heuheuehuehuehue

Trik CSS3 ya?

Emang makin manteb kalo blog kita dihiasi dengan CSS3. Selain enteng karena sedikit make gambar juga lebih keliatan minimalis. Nice Post :D

@Septian => benar sob ini menggunakan css3 selain membuat blog menjadi lebih ringan dapat juga membuat blog kita menjadi lebih elegant, Tetapi tidak semua browser dapat melihat css3 ini terutama IE yang sangat cool hehehehehehe

bro, tutonya kurang lengkap tuh
kl buat safari / google chrome pke : -webkit-border-radius
mozilla : -moz-border-radius
opera : border-radius

nah masalahnya gw blum ketemu kl buat IE,
kl tau tolong kabarin k email gw ya! thanx