Rounded corners menggunakan CSS


Suatu ketika saya berpikir, kenapa kok bentuk layout itu kok hanya persegi dimana tiap sudutnya lancip?kenapa sudutnya itu melengkung mungkin akan lebih menari!!!Kemudian muncul istilah rounded corners, apa itu rounded corners?fungsinya seperti apa? akhirnya saya menemukan jawabannya. Untuk lebih jelasnya perhatikan gambar di bawah ini:

ccs_test1

Kita dapat melihat bahwa setiap sudutnya memiliki lengkungan yang rapi. Biasanya untuk membuat lengkungan tersebut kita juga dapat menggunakan gambar (image), namun kita dapat membuat rounded corners tersebut dengan hanya menggunakan CSS. Bagaimana caranya? ikuti langkah-langkah berikut ini.

Inilah kehebatan dari CSS, dengan hanya menggunakan tag elemen HTML b dengan CSS diatur agar berupa blok (display:block) dan membuat warna latar belakang blok tersebut sesuai dengan halaman web kemudian memanipulasi posisinya dengan menggunakan margin.

Yang pertama kita lakukan adalah membuat pengaturan div untuk halaman dan judul serta paragraf:

#page-wraper {
 margin-top:10px;
 margin-left:20px;
 margin-right:20px;
 margin-bottom:10px;
 height:auto;
 padding:auto;
 background-position:bottom;        
 width:730px;
 }
 #page-bg {
 margin:0px;
 background:transparent;
 }
 #bungkus {
 height:auto;
 margin:0px;
 padding:10px;
 color:#FFF;
 background:#feeed9;
 }
 .site1, .site2, .site3, .site4 {
 display:block;
 background:#feeed9;
 }
 .site1 {
 height:1px;
 margin:0 5px;
 }
 .site2 {
 height:1px;
 margin:0 3px;
 }
 .site3 {
 height:1px;
 margin:0 2px;
 }
 .site4{
 height:2px;
 margin:0 1px;
 }

Berikut ini adalah kode pengaturan CSS untuk membuat Rounded corners (garis lengkung) pada setiap sudut div:

<div id="page-wraper">
<div id="page-bg">
 <b class="site1"></b><b class="site2"></b><b class="site3"></b><b class="site4"></b>
<div id="bungkus">

PT Excelcomindo Pratama Tbk.  (&ldquo;XL&rdquo; atau &ldquo;Perseroan&rdquo;) didirikan pada tanggal 6 Oktober 1989 dengan nama PT  Grahametropolitan Lestari yang bergerak di bidang perdagangan dan jasa umum.

Pada tahun 1995, seiring  dengan kerjasama antara Rajawali Group &ndash; pemegang saham &ndash; dengan beberapa  investor asing (Nynex, AIF dan Mitsui), PT Grahametropolitan Lestari mengubah  nama menjadi PT Excelcomindo Pratama dengan kegiatan utama usahanya&nbsp; sebagai  penyelenggara jasa teleponi dasar.
XL mulai beroperasi secara  komersial pada tanggal 8 Oktober 1996 dengan menyediakan jasa teleponi dasar  menggunakan teknologi&nbsp; GSM 900. Dalam perkembangannya, XL juga memperoleh  Izin Penyelenggaraan Jaringan Bergerak Seluler untuk teknologi DCS 1800, Izin  Penyelenggaraan Jaringan Tetap Tertutup, Izin Penyelenggaraan Jasa Internet  (Internet Services Protocol/ISP) dan Izin Penyelenggaraan Jasa Internet  Teleponi untuk Keperluan Publik (Voice over Internet Protocol/VoIP). Pada tahun  2006, XL memperoleh Izin Penyelenggaraan Seluler untuk teknologi 3G dan  meluncurkannya secara komersial pada bulan September 2006.
Hingga saat ini, XL telah  mendirikan lebih dari 13.000 menara Base Transceiver Station (BTS) di seluruh  Indonesia untuk melayani&nbsp;22 juta pelanggannya. Dan XL berkomitmen untuk  terus meningkatkan kualitas dan cakupan wilayah selulernya di masa mendatang,  agar kebutuhan komunikasi para pelanggan dapat senantiasa berjalan kapanpun, di  manapun.
Untuk memberikan pelayanan  dan dukungan terbaik bagi para pelanggannya, hingga kwartal I tahun 2007 telah  tersedia lebih dari 156 gerai XL Centerdi seluruh Indonesia, didukung oleh  layanan Contact Center yang selalu siap menyediakan informasi kepada pelanggan  selama 24 jam sehari, tujuh hari seminggu. Pada tahun 2006, XL resmi memperoleh  lisensi 3G, dan selain menggelar layanan 3G yang inovatif, pelanggan XL semakin  dimanjakan dengan hadirnya dukungan Video Contact Center, layanan dukungan  pelanggan berbasis teknologi 3G.
Dengan penyediaan  produk, layanan dan dukungan pelanggan tersebut, berbagai penghargaan bergengsi telah diraih oleh XL. Penghargaan  ini sebagai bukti komitmen XL untuk senantiasa meningkatkan kualitas dan  inovasi produk serta layanannya.</div>
<b class="site4"></b><b class="site3"></b><b class="site2"></b><b class="site1"></b></div>
</div>

maka hasilnya seperti berikut:

melengkung

literatur:

http://masimnet.awardspace.com/membuat-rounded-corners-menggunakan-css

http://subagya.blogspot.com/2008/09/mengenal-border-lengkung.html

Posted on Mei 5, 2009, in CSS and tagged , , , , , . Bookmark the permalink. 2 Komentar.

  1. boleh ni ilmu nya heheheh
    makasih ya

  2. Hello! dkefcka interesting dkefcka site! I’m really like it! Very, very dkefcka good!

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: