Beberapa tahun lalu, saya ingat ketika itu saya masih membuat sebuah gambar sendiri dengan menggunakan Photoshop atau aplikasi lain sejenis. Saya melakukan itu semata mata untuk memperindah tampilan web Saya. Untuk memudahkan nolstalgia Anda, Coba perhatikan gambar berikut :
Pada gambar diatas, saya sengaja membuat sudut yang tumpul untuk memperindah tampilan yang terkadang mungkin terasa merepotkan. Namun lain dulu lain sekarang, Sekarang untuk membuat hal tersbut, pejam sebelah mata pun bisa. hehehe..
Ah benar ne.?! Mari simak bahasan berikut ini kalau tidak pecaya. :p
Pertama- tama bukalah Dreamwever CS kesayangan Anda (Dalam kasus ini penulis masih menggunakan DW CS4 sebagai pamungkas)
Selanjutnya seperti biasa buatlah sebuah file css. dalam file tersebut ketikanlah kode dibawah ini dan kemudian beri nama style.css
body {
background : #FFF7E6;
font-family:Verdana, Geneva, sans-serif;
}
#header {
background:url(../image/header.jpg) no-repeat left;
border : 3px solid black;
-moz-border-radius : 25px;
-webkit-border-radius : 25px;
float: left;
height: 125px;
width: 846px;
}
Baris yang saya cetak tebal pada kode yang menentukan pembuatan menuoval lewat CSS. perlu diingat sebaiknya Anda menyiapkan sebuah gambar sebagai background agar hasilnya lebih terlihat jelas.
Selanjutnya, kembalilah ke file php dan buatlah link di antara tag head untuk menghubungkan ke dalam file CSS yang telah kita buat dengan menggunakan kode berikut ini.
<link href="sudut.css" rel="stylesheet" type="text/css" />
Ok, sampai disini kita tinggal melakukan finishing dimana kira memerlukan selector untuk menandakan dimana CSS tersebut ditampilkan. Ketiklah kode berikut ini didalam tag body :
<div id="header">Nah.. jika tidak ada kesalahan maka seharusnya tampilan Anda akan terlihat seperto gambar di bawah ini :
</div>
Pada gambar diatas dapat Anda lihat sudut dari gambar tersebut telah berbentuk oval dimana kita sudah tidak perlu lagi memotong gambar tersebut secara manual. Cara ini dapat mempercepat waktu kita dalam mengerjakan tampilan sebuah halaman website. hehehe
Ok, sampai disini dulu ulasan penulis, Be Creative, Be Innovation, Keep Creatian.
:p
Ronald Rusli
http://jambispirit.com
jambispirit@yahoo.co.id
Download Souce Code Disini
Posting Komentar