Jika Anda sering berselancar ke dunia maya, ,mngkin Anda sering menjumpai beberapa halaman web yang bergaya glassy dimana pada web tersebut Anda masih dapat melihat background web pada sebuah konten.
Ok, langsung saja tanpa basa basi kita langsung mulai saja. pertama-tama, bukalah Dreamwever kesayangan Anda (disini saya memakai DW CS4).
Selanjutnya, buatlah sebuah file CSS dan buatlah link dari halaman php sebelumnya ke halaman CSS tersebut :
<link href="glass.css" rel="stylesheet" type="text/css" />
Jika sudah siapkanlah sebuah gambar yang nantinya akan kita jadikan background. Disini, penulis menggunakan gambar tulip yang ada pada windows 7 (sebaiknya gambar ini direname terlebih dahulu dengan menghilangkan spasi dan menjadi huruf kecil semua agar tidak mengalamai error pada saat upload—jika ada rencana).
Selanjutnya, ketikan kode berikut pada file CSS Anda untuk memberikan latar belakang pada website Anda.
body{
background:url(tulip.jpg);
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}
Selanjutnya, tambahkan;ah sebuah tag DIV pada tag . Tag div ini kita gunakan untuk melakukan formatting degnan gaya glassy nantinya.
Kemudian, tambahkan style formatting untuk kelas tersebut pada file CSS tersebut.<div class="glass">
Sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample<br />
sample sample sample sample sample ssample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample
</div>
.glass {
float: left;
width: 650px;
text-align:justify;
padding:5px;
margin-top:10px;
background-color:#ffffff;
opacity:0.6;
}
Nah.. coba sekarang anda buka file Anda dengan browser Anda. jika tidak ada kesalahan seharusnya halaman Anda akan terlihat seperti gambar dibawah ini :
Kuncinya dalam pembuatan halaman ini adalah property opacity. Property ini merupakan property dalam CSS 3 yang berguna untuk membuat halaman div bergaya glassy. Nah.. Sampai disini dulu tutorial saya kali ini. Sampai jumpa di tutorial selanjutnya.. :p
Ronald Rusli
YM : jambispirit@yahoo.co.id
GMAIL : jambispirit@gmail.com
Website : http://jambispirit.com
Dapat Source Code Disini
YM : jambispirit@yahoo.co.id
GMAIL : jambispirit@gmail.com
Website : http://jambispirit.com
Dapat Source Code Disini
Posting Komentar