27 June 2007

Aero on The Web

Transparansi di sebuah halaman web adalah suatu hal yang menarik, karena dengannya anda bisa membuat elemen di dalam situs anda memiliki efek aero yang ada pada sistem operasi terbaru milik Microsoft, Windows Vista. Tidak percaya, lihat contoh dibawah ini.



Text



Berikut adalah source kodenya:


<style>

.bg {

background: #fff url(images/colortable.gif) no-repeat center center;

width: 279px;
height: 57px;
padding: 5px;
}

#text {

opacity: 0.7;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
height: 30px;
width: 100px;
background: #fff;
border: 3px solid #666;

}




Memang banyak kode di situ, namun yang perlu anda perhatikan adalah pada bagian yang diapit oleh tag <style> dan </style>, terutama pada 3 baris setelah #text, karena yang kita pelajari kali ini adalah kode" yang berhubungan dengan transparansi tersebut.

Langsung saja, opacity adalah kode dasar transparansi untuk semua browser, filter:alpha(opacity=); digunakan untuk menentukan tingkat tembus pandang pada browser Internet Explorer, sedangkan -moz-opacity digunakan khusus untuk browser Firefox milik keluarga monster. Nilai 0.7 dan 70 pada tiap-tiap kode berarti objek yang diberikan kode tersebut memiliki tingkat transparansi sebesar 70% dari objek aslinya, nilai ini bisa diganti dengan 0.1 - 1.0 ataupun 0 - 100, dimana semakin kecil nilai yang diberikan pada objek tersebut, maka semakin transparan objek itu, begitu juga sebaliknya.

No comments:

Post a Comment