MEMBUAT KOTAK ROUND CORNER DENGAN CSS

Posted by MarketingCCC , Wednesday 18 September 2013 21:17

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:
  1. 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:
    


    

    2. 

  2. 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:
    3. 

    .top_right{
  background-image:url(cornerImages/corner-topright9x9.gif);
  width:9px;
  height:9px;
  float:right;
 }

HTML:
<div class="top_right"></div>

    

    

    

Hasil:
    

    

    

    

    

    

  3. 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:
    4. 

    .top_right{
  background-image:url(cornerImages/corner-topright9x9.gif);
  width:9px;
  height:9px;
  float:right;
 }

    

    

    

    

    

    

    

    

  4. 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:
    5. 

    .top_left{
  background-image:url(cornerImages/corner-topleft1024x9.gif);
  height:9px;
  margin-right:9px;
 }

    

    

    

    

  5. 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:
    6. 

    .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:
    

    

    

    

    

    

    

  6. 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:
    7. 

    

    .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:
    

    

    

    

    

    

  7. 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:
    8. 

    .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:
    

    

    

    

    

  8. 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:
    9. 

    .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>



    

    

    
























































0 Response to "MEMBUAT KOTAK ROUND CORNER DENGAN CSS"
        












Post a Comment

























Subscribe to:
Post Comments (Atom)