Round corner
merupakan istilah dalam css untuk membuat sebuah kotak yang ujung-ujungnya
tumpul. Dengan menggunakan CSS3 pembuatan round corner sangatlah mudah, hanya
saja tidak semua browser support akan peritah tersebut. Tips kali ini akan
menjelaskan bagaimana caranya membuat round corner dengan css dan foto. Berikut
adalah langkah-langkahnya:
- Pembuatan kotak dimulai dengan membuat bagian sudut kiri atas. Kali ini kita akan menggunakan foto dengan ukuran tingginya adalah 9px dan lebarnya adalah 1024px. Dengan menggunakan ukuran lebar foto 1024, maka kotak bisa ditampilkan secara fleksibel dalam ukuran maksimal 1024px. Berikut adalah perintah CSSnya:
<style> .top_left{ background-image:url(cornerImages/corner-topleft1024x9.gif); height:9px; } HTML: <div class="top_left">
</div> Hasil:
- Langkah berikutnya adalah membuat sudut bagian kanan atas. Background foto yang digunakan ukurannya adaah 9x9px, Agar tampilannya rata kanan, maka perlu diberikan perintah float:right. Berikut adalah perintah css-nya:
- Terihat sudut pada samping kanan atas tersebut masih berada di bawah sudut kiri atas, hal ini dikarenakan sifat DIV adalah berupa block sehingga selalu membuat baris yang baru. Untuk memperbaiki ini, berikan margin-top:-9px. Nilai -9px difungsikan agar div class top_right bergeser ke arah atas sejauh 9px.Berikut adalah code CSS top right setelah diperbaiki:
- Setelah sudut kanan atas naik sejauh 9px, ujung garis kiri atas lewat sejauh 9px. Untuk memperbaiki ini perlu dimodifikasi sedikit kode css top_leftnya dengan memberikan margin-right sebesar 9px. Berikut adalah perbaikan kode cssnya:
- Sampai tahap ini garis atas dan sudut kiri kanannya sudah selesai, selanjutnya tinggal membuatkan garis pinggir kanan kirinya dengan jarak padding 0px atas bawah dan 10px kanan kirinya. Berikut adalah perintah css-nya:
- Pada gambar di atas terlihat ada jarak antara garis di atas dengan paragrafnya, hal ini disebabkan oleh pengaruh margin-atas tag <p>. Untuk menghilangkan pengaruh tersebut perlu dibuatkan sebuah class css dengan nilai margin atasnya 0px. Berikut adalah kode yang dimaksud:
- Untuk membuat sudut kiri bawah dan kanan bawah prosesnya hampir sama seperti membuat sudut di atas atas, hanya saja gambar yang digunakan harusdibalik. Berikut adalah kode css-nya:
- Sekali lagi, terlihat masih ada jarak antara text dengan pinggir bawah frame. Untuk menghilangkan ini maka css top gap mesti diperbaiki dengan menambahkan kode margin-bottom:0px. Berikut adalah kode css-nya:
.top_right{
background-image:url(cornerImages/corner-topright9x9.gif);
width:9px;
height:9px;
float:right;
}
HTML:
<div class="top_right"></div>
Hasil:
.top_right{
background-image:url(cornerImages/corner-topright9x9.gif);
width:9px;
height:9px;
float:right;
}
.top_left{
background-image:url(cornerImages/corner-topleft1024x9.gif);
height:9px;
margin-right:9px;
}
.inner{
border-left:solid 1px #c00000;
border-right:solid 1px #c00000;
padding:0px 10px;
background-color:#efefef;
}
HTML:
<div class="inner">
<p>Computer Course Center menyediakan kursus Dasar Komputer,
Komputer Aplikasi Bisnis dan Administrasi Perkantoran, Desain Grafis,
Web Desain, Pemrograman Web dengan Codeigniter dan Internet Marketing.</p>
</div>
Hasil:
.topgap{
margin-top:0px;
}
HTML:
<div class="inner">
<p class="topgap">Computer Course Center menyediakan kursus Dasar
Komputer, Komputer Aplikasi Bisnis dan Administrasi Perkantoran, Desain
Grafis, Web Desain, Pemrograman Web dengan Codeigniter dan Internet
Marketing.</p>
</div>
Hasil:
.bottom_left{
background-image:url(cornerImages/corner-bottomleft1024x9.gif);
height:9px;
margin-right:9px;
}
.bottom_right{
background-image:url(cornerImages/corner-bottomright9x9.gif);
height:9px;
width:9px;
margin-top:-9px;
float:right;
}
HTML:
<div class="bottom_left"></div>
<div class="bottom_right"></div>
Hasil:
.topgap{
margin-top:0px;
margin-bottom:0px;
}
Hasil:
Sampai tahap ini proses pembuatan kotak round corner sudah selesai, semoga tutorial ini bisa membantu.Untuk lebih jelasnya berikut adalah kode CSS dan HTML selengkapnya:<html> <head> <style> body{ width:700px; margin:20px auto; } .top_left{ background-image:url(cornerImages/corner-topleft1024x9.gif); height:9px; margin-right:9px; } .top_right{ background-image:url(cornerImages/corner-topright9x9.gif); width:9px; height:9px; float:right; margin-top:-9px; } .inner{ border-left:solid 1px #c00000; border-right:solid 1px #c00000; padding:0px 10px; background-color:#efefef; } .topgap{ margin-top:0px; margin-bottom:0px; } .bottom_left{ background-image:url(cornerImages/corner-bottomleft1024x9.gif); height:9px; margin-right:9px; } .bottom_right{ background-image:url(cornerImages/corner-bottomright9x9.gif); height:9px; width:9px; margin-top:-9px; float:right; } </style> </head> <body> <div class="top_left"></div> <div class="top_right"></div> <div class="inner"> <p class="topgap">Computer Course Center menyediakan kursus Dasar Komputer, Komputer Aplikasi Bisnis dan Administrasi Perkantoran, Desain Grafis, Web Desain, Pemrograman Web dengan Codeigniter dan Internet Marketing.</p> </div> <div class="bottom_left"></div> <div class="bottom_right"></div> </body> </html>
