Cara membuat sudut lengkung dengan CSS

Sudut lengkung atau dalam bahasa Inggris-nya rounded corners dulunya biasa dibuat dengan menggunakan gambar.

CSS test1

Namun dengan adanya CSS, kita bisa membuat sudut lengkung ini 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 maka bisa menghasilkan efek lengkung.

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

#halaman {width:80%; margin: 0 auto; }
#judul {margin:0;background:#fff; }
.judul-teks {height:60px;margin:0;color:#fff;background:#090; }
p {margin:0; padding-left:20px;}

Berikut ini adalah kode pengaturan CSS untuk membuat sudut lengkung pada setiap sudut div:

.line1, .line2, .line3, .line4 {display:block;background:#090;}
.line1 {height:1px; margin:0 5px;}
.line2 {height:1px; margin:0 3px;}
.line3 {height:1px; margin:0 2px;}
.line4 {height:2px; margin:0 1px;}

Sekarang kita akan membuat kodenya di dalam dokumen html, buka notepad salin kode berikut kemudian simpan ke komputer anda dengan nama "css-test1.html"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test CSS</title>
<style type="text/css">
<!--
#halaman {width:80%; margin: 0 auto; }
p {margin:0; padding-left:20px;}
#judul {margin:0px;background:#fff; }
.judul-teks {height:60px;margin:0;color:#fff;background:#090; }
.line1, .line2, .line3, .line4 {display:block;background:#090;}
.line1 {height:1px; margin:0 5px;}
.line2 {height:1px; margin:0 3px;}
.line3 {height:1px; margin:0 2px;}
.line4 {height:2px; margin:0 1px;}
-->
</style>
</head>
<body>
<div id="halaman">
<div id="judul">
<b class="line1"></b><b class="line2"></b><b class="line3"></b><b class="line4"></b>
<div class="judul-teks">
<p>Testing membuat rounded corners dengan CSS</p>
</div>
<b class="line4"></b><b class="line3"></b><b class="line2"></b><b class="line1"></b>    </div>
</div>
</body>
</html>

Selanjutnya dengan browser kita buka file tersebut, maka hasilnya adalah seperti berikut:

Preview CSS sudut lengkung 01.

Kemudian sekarang kita akan menambah div untuk konten, jika menggunakan warna latar yang berbeda kita harus membuat pengaturan CSS tersendiri untuk sudut lengkungnya, namun jika sewarna anda bisa membuatnya tanpa perubahan.

Kita akan membuat dengan latar yang berbeda sehingga kita harus membuat pengaturan CSS tersendiri dengan nama class yang berbeda, tambahkan kode berikut di dalam style CSS:

#konten { margin-top: 14px;margin-bottom: 14px;float: left; width: 100%; background:#fff;}
.konten-teks { height: 100%;color:#000; background:#ccc;}
.line1a, .line2a, .line3a, .line4a {display:block;background:#ccc;}
.line1a {height:1px; margin:0 5px;}
.line2a {height:1px; margin:0 3px;}
.line3a {height:1px; margin:0 2px;}
.line4a {height:2px; margin:0 1px;}

Dan kode berikut ini kita tambahkan ke dalam tag elemen body:

<div id="konten">
<b class="line1a"></b><b class="line2a"></b><b class="line3a"></b><b class="line4a"></b>
<div class="konten-teks">
<p>Berikut adalah cara membuat rounded corners tanpa menggunakan gambar (image). 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. Hasilnya adalah seperti yang anda lihat sekarang.</p>
</div>
<b class="line4a"></b><b class="line3a"></b><b class="line2a"></b><b class="line1a"></b>
</div>

Atau anda bisa menyalin kode berikut, sebagai kode komplitnya setelah di masukkan ke dokumen html, simpan file tersebut dengan nama "css-test2.html"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test CSS</title>
<style type="text/css">
<!--
#halaman {width:80%; margin: 0 auto; }
p {margin:0px; padding-left:20px;}
#judul {margin:0px;background:#fff; }
.judul-teks {height:60px;margin:0px;color:#FFF;background:#090; }
.line1, .line2, .line3, .line4 {display:block;background:#090;}
.line1 {height:1px; margin:0 5px;}
.line2 {height:1px; margin:0 3px;}
.line3 {height:1px; margin:0 2px;}
.line4 {height:2px; margin:0 1px;}
#konten { margin-top: 14px;margin-bottom: 14px;float: left; width: 100%; background:#fff;}
.konten-teks { height: 100%;color:#000; background:#ccc;}
.line1a, .line2a, .line3a, .line4a {display:block;background:#ccc;}
.line1a {height:1px; margin:0 5px;}
.line2a {height:1px; margin:0 3px;}
.line3a {height:1px; margin:0 2px;}
.line4a {height:2px; margin:0 1px;}
-->
</style>
</head>
<body>
<div id="halaman">
<div id="judul">
<b class="line1"></b><b class="line2"></b><b class="line3"></b><b class="line4"></b>
<div class="judul-teks">
<p>Testing membuat lengkungan pada sudut div dengan CSS</p>
</div>
<b class="line4"></b><b class="line3"></b><b class="line2"></b><b class="line1"></b>    </div>
<div id="konten">
<b class="line1a"></b><b class="line2a"></b><b class="line3a"></b><b class="line4a"></b>
<div class="konten-teks">
<p>Berikut adalah cara membuat garis lengkungan pada setiap sudut div tanpa menggunakan gambar (image). 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. Hasilnya adalah seperti yang anda lihat sekarang.</p>
</div>
<b class="line4a"></b><b class="line3a"></b><b class="line2a"></b><b class="line1a"></b>
</div>
</div>
</body>
</html>

Kembali kita buka file tersebut dengan menggunakan browser, maka hasilnya adalah seperti berikut:

Preview CSS sudut lengkung 02.

Berikut adalah contoh komplit dengan header, konten, navigasi dan footer.

Preview CSS sudut lengkung 03

Jadi intinya adalah setelah kita mengatur layoutnya, kita cukup menyelipkan kode untuk membuat sudut lengkung tersebut di antara div awal dan div akhir.



No comments:

Post a Comment