27 June 2007

Vista Window

Di tulisan saya sebelumnya, saya menjelaskan bahwa dengan menggunakan efek transparansi dari kode-kode CSS, anda bisa membuat suatu elemen di halaman situs anda menyerupai tampilan jendela aplikasi yang setengah transparan milik windows vista. Masalahnya adalah bagian yang ada di dalam elemen yang diberi efek aero itu juga ikut transparan, sehingga teks yang seharusnya hitam pun, menjadi keabu-abuan. Masalah itu bisa diselesaikan dengan 3 kode CSS lainnya, yaitu position, top dan left.

Coba anda ketikkan kode dibawah ini di notepad anda, lalu simpan dengan nama "file.html", dengan sebelumnya mengganti pilihan Save as type ke All files.

<html>

<head>

<style>

body {

background: url(planning/images/Sasuke.jpg) center center;

}



.window {

background: #03f url(images/tab_blue.png) repeat-x top center;

-moz-opacity: 0.6;

padding: 20px 5px 5px 5px;

height: 125px;

width: 200px;

}



.content_box {

background-color: #fff;

position: relative;

top: -125px;

left: 0;

height: 120px;

width: 200px;

}

</style>

</head>

<body>

<center>

<div class="window">

</div>

<div class="content_box">

Teks

</div>

</center>

</body>

</html>

Bila anda benar menuliskan kodenya, maka hasil tampilan dari file tadi akan terlihat seperti gambar di bawah ini.

Tapi sayangnya anda tidak mungkin menyamai hasil seperti dibawah ini, karena anda tidak mempunyai file gambar Sasuke.jpg dan tab_blue.png yang saya "sematkan" di kode2 tadi, karena file itu hanya ada di desktop saya. Namun anda bisa mengganti kedua gambar tadi dengan gambar apapun yang anda mau.

No comments:

Post a Comment