Membuat sebuah web , tentu tidaklah merupakan hal yan sulit apabila kita berkeinginan untuk encari tau . Kali ini saya akan sedikit mengulas tentang cara sederhana membuat sebuah halaman web dengan sudut berbentuk oval .
Berikut adalah contohnya :
Border dari halaman web tersebut terlihat menawan tatkala diberi sentuhan berbentuk oval ,, cara untuk mendapatkan hasil yang demikian tentu sangat mudah .
Buka halaman notepad dan sejenisnya yang anda miliki ,simpan dengan format .html serta halaman lain yang anda simpan dengan nama style.css dan perhatikan atau copy paste source code di bawah ini ,
Untuk style.css anda cukup menuliskan, sebagai contoh :
body {
background : #FFF7E6; /*untuk background berwarna*/
font-family:Verdana, Geneva, sans-serif;
}
#header {
background:url(header.jpg) no-repeat left;/*pilih salah satu gambar dan tulis seperti itu*/
border : 3px solid black;
-moz-border-radius : 25px;
-webkit-border-radius : 25px;
float: left;
height: 125px;
width: 846px;
}
Selanjutnya, kembalilah ke file html 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">
</div>
Selesai ,, mudah kan ?? Selamat mencoba dan semoga berhasil .
Berikut adalah contohnya :
Border dari halaman web tersebut terlihat menawan tatkala diberi sentuhan berbentuk oval ,, cara untuk mendapatkan hasil yang demikian tentu sangat mudah .
Buka halaman notepad dan sejenisnya yang anda miliki ,simpan dengan format .html serta halaman lain yang anda simpan dengan nama style.css dan perhatikan atau copy paste source code di bawah ini ,
Untuk style.css anda cukup menuliskan, sebagai contoh :
body {
background : #FFF7E6; /*untuk background berwarna*/
font-family:Verdana, Geneva, sans-serif;
}
#header {
background:url(header.jpg) no-repeat left;/*pilih salah satu gambar dan tulis seperti itu*/
border : 3px solid black;
-moz-border-radius : 25px;
-webkit-border-radius : 25px;
float: left;
height: 125px;
width: 846px;
}
Selanjutnya, kembalilah ke file html 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">
</div>
Selesai ,, mudah kan ?? Selamat mencoba dan semoga berhasil .
thanks..
BalasHapus