Membuat sudut Border Bulat pada tampilan template

Membuat sudut Border Bulat pada tampilan template

Jujur saja saya katakana, Ilmu ini saya dapatkan dari hasil ngintip template blog kang fatur yang di pake saat ini. Trus saya telaah sampai mudeng. Coba perhatikan gambar di bawah ini.

------------------------ gambar di sini -------------------------------------------------

Heder kang fatur ada 3 buah. Yang kiri bulat, Tengah persegi panjang, dan yang kanan bulat. Potongan Kode data dari ketiga heder tersebut sebagai berikut.

Header Bagian Kanan ( bulat )

#header-wrapper1{float:left;margin:10px 0px 12px 0px;padding:0px 0px 0px 0px;width:170px;height:160px;background:#0b3b0b url(http://i649.photobucket.com/albums/uu217/teaade/bgbuled.png)no-repeat center center;border-top:10px solid #0A2A0A;border-bottom:10px solid #0A2A0A;border-left:10px solid #92c174;border-right:10px solid #92c174;-moz-border-radius-topleft:95px;-moz-border-radius-topright:95px;-moz-border-radius-bottomleft:95px;-moz-border-radius-bottomright:95px}

Header Bagian Tengah ( segi empat )

#header-wrapper2{float:left;margin:10px 5px 12px 5px;padding:0px 0px 0px 0px;width:570px;height:160px;background:#0b3b0b;border-top:10px solid #92c174;border-bottom:10px solid #92c174;border-left:10px solid #0A2A0A;border-right:10px solid #0A2A0A}

Header Bagian Kiri ( bulat )

#header-wrapper3{float:left;margin:10px 0px 12px 0px;padding:0px 0px 0px 0px;width:170px;height:160px;background:#0b3b0b url(http://i649.photobucket.com/albums/uu217/teaade/bgbuled.png)no-repeat center center;border-top:10px solid #0A2A0A;border-bottom:10px solid #0A2A0A;border-left:10px solid #92c174;border-right:10px solid #92c174;-moz-border-radius-topleft:95px;-moz-border-radius-topright:95px;-moz-border-radius-bottomleft:95px;-moz-border-radius-bottomright:95px}

Kalau mau membuat yang seperti ini gimana ???

-------------- gambar di sini ---------------------

Mari belajar sama-sama.

Sobat harus bener-bener jeli ( jadi mudeng ) memperhatikan tulisan yang berwarna biru pada ketiga data heder diatas. Itulah data border. Kalau kita mau bikin Bulatan gampang aja. Tingal kopy tulisan warna hijau yang ada pada potongan code heder yang kanan atau yang kiri diatas. Besar kecilnya bulatan tergantung nilai tinggi dan lebar ( contoh nilai perhatikan tulisan warna merah pada ke tiga potongan kode header di atas . untuk membuat bulatan,Nilai antara tinggi dan lebar tidak boleh terpaut jauh. Kalau nilai tinggi dan lebar terpaut jauh jadinya bukan bulatan, tapi segi panjang bersiku bulat, Mudeng bukan. Berarti kalau mau bikin persegi panjang yang bersiku bulat kita hanya perlu Kopas potongan data heder yang kiri ( header1 ) atau kanan Header3 ), terus merubah nilai agar nilai tinggi dan lebar terpaut jauh. Ok mudah bukan. Jangan keburu mudeng, saya yakin sobat belum mudeng. Perhatikan perbedaan ketiga code header di atas.

Code header1 dan header3 ( bulat )

border-top:10px solid #0A2A0A;

border-bottom:10px solid #0A2A0A;

border-left:10px solid #92c174;

border-right:10px solid #92c174;

-moz-border-radius-topleft:95px;

-moz-border-radius-topright:95px;

-moz-border-radius-bottomleft:95px;

-moz-border-radius-bottomright:95px}

Code header2 ( persegi panjang )

border-top:10px solid #92c174;

border-bottom:10px solid #92c174;

border-left:10px solid #0A2A0A;

border-right:10px solid #0A2A0A}

Perbedaanya di mana ???

Kalau membuat persegi panjang ngga pake kode di bawah ini, sedangkan kalau bikin bulatan atau segi panjang yang sikunya bulat harus pakai kode di bawah ini.

-moz-border-radius-topleft:95px;

-moz-border-radius-topright:95px;

-moz-border-radius-bottomleft:95px;

-moz-border-radius-bottomright:95px}

contoh nyata code Header2 ( persegi panjang )

#header-wrapper2{float:left;margin:10px 5px 12px 5px;padding:0px 0px 0px 0px;width:570px;height:160px;background:#0b3b0b;border-top:10px solid #92c174;border-bottom:10px solid #92c174;border-left:10px solid #0A2A0A;border-right:10px solid #0A2A0A}

Kalau ditambah kode

-moz-border-radius-topleft:95px;

-moz-border-radius-topright:95px;

-moz-border-radius-bottomleft:95px;

-moz-border-radius-bottomright:95px}

Kode nya jadi seperti ini

#header-wrapper2{float:left;margin:10px 5px 12px 5px;padding:0px 0px 0px 0px;width:570px;height:160px;background:#0b3b0b;

border-top:10px solid #92c174;

border-bottom:10px solid #92c174;

border-left:10px solid #0A2A0A;

border-right:10px solid #0A2A0A}

-moz-border-radius-topleft:95px;

-moz-border-radius-topright:95px;

-moz-border-radius-bottomleft:95px;

-moz-border-radius-bottomright:95px}

Di jamin hasilnya Persegi panjang yang bersisi bulat. Kayak heder punya ku. Sog sih lihat ke atas. Bener mbok. Ini baru mudeng. Semoga bermanfaat …

-0O0-

Search Post

Label :