Apa itu Rounded corners?
Untuk lebih jelasnya perhatikan gambar di bawah ini:
Kita dapat melihat bahwa setiap sudutnya memiliki lengkungan yang rapi. Biasanya untuk membuat lengkungan tersebut kita 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:
#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 Rounded corners (garis 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
ini.
Kemudian sekarang kita akan menambah div untuk konten, jika menggunakan warna latar yang berbeda kita harus membuat pengaturan CSS tersendiri untuk lengkungan atau Rounded cornersnya, 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
ini.
Berikut adalah contoh komplit dengan header, konten, navigasi dan footer.
Jadi intinya adalah setelah kita mengatur layoutnya, kita cukup menyelipkan kode untuk membuat rounded corners (lengkungan) tersebut di antara div awal dan div akhir.
Untuk melihat atau jika ingin mendownload contoh-contoh dari layout template yang menggunakan rounded corner ini maupun layout template yang biasa, anda bisa mendapatkannya di
free css layout.
0 komentar:
Posting Komentar