Contoh kode html dan kode css yang disertakan di dalamnya diberikan di bawah ini. Gambar yang digunakan di dalamnya adalah fd.jpg. Salin kode dan beri nama gambar fd.jpg untuk melihat efek penuh
<!DOCTYPE HTML PUBLIC "- //W3C //DTD HTML 4.01 Transisi//EN">
<html>
<kepala>
<title>Efek filter CSS.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="ini halaman saya">
<meta http-equiv="content-type" content="teks/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<gaya tipe="teks/css">
.alpha
{
filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=85,finishx=150,finishy=85);
}
.mengaburkan
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350px;/*Atribut ini penting, jika tidak, efeknya tidak akan terlihat*/
filter:blur(tambahkan=benar,arah=90,kekuatan=25);
}
.chromas
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna: merah;
lebar:350 piksel;
filter:chroma(warna=merah);
}
.dropshadows
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
filter:dropshadow(warna=merah,offx=15,offy=10,positif=1);
}
.fliphs
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
filter:membalik;
}
.flipvs
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
penyaring:flipv;
}
.bersinar
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
filter:cahaya(warna=biru,kekuatan=15);
}
.abu-abu
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
penyaring: abu-abu;
}
.membalikkan
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
filter:membalikkan;
}
.masker
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
filter:topeng(warna=hijau);
}
.bayangan
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
filter:bayangan(warna=merah,arah=225);
}
.ombak
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
filter:gelombang(tambahan=benar,freq=3,kekuatan cahaya=100,fase=45,kekuatan=20);
}
.xrays
{
font-family: lucida tulisan tangan miring;
ukuran font:72px;
gaya font: tebal;
warna:#336600;
lebar:350 piksel;
filter: sinar X;
}
</gaya>
</kepala>
<tubuh>
<lebar tabel=1000 batas=1>
<tr><td width=100>Properti filter</td><td width=100>Deskripsi</td><td width=400>Parameter dan nilai</td><td width=400>Contoh efek< /td ></tr>
<tr><td><span class=alpha>Alpha</span></td><td>Setel efek transparansi</td><td>opasitas: tingkat transparansi, 0 hingga 100, 0 sepenuhnya transparan<br>
gaya: Menentukan karakteristik bentuk area transparan, 0 adalah distribusi seragam; 1 linier; 2 radial; 3 persegi panjang<br>finishopasitas: mengatur transparansi di ujung gradien untuk mencapai efek gradien, nilainya adalah dari 0 hingga 100<br>
startX, startY: koordinat awal efek transparansi gradien<br>finishX, finishY: koordinat akhir efek transparansi gradien</td><td><p><img src="fd.jpg" class="alphas"/ ></p ></td></tr>
<tr><td>Blur</td><td>Membuat efek buram</td><td>tambahkan: Tentukan apakah gambar harus diubah menjadi efek buram, benar dan salah<br>
arah: Mengatur arah keburaman, 0 derajat berarti vertikal ke atas, setiap 45 derajat adalah satuan, defaultnya adalah 270 derajat ke kiri<br>kekuatan: mewakili berapa lebar piksel yang dipengaruhi oleh keburaman, defaultnya adalah 5< /td>
<td><div class="blrs">SEMOGA BERHASIL !</div></td></tr>
<tr><td>Chroma</td><td>Setel warna yang ditentukan menjadi transparan</td><td>warna: Tentukan warna transparan</td><td>chroma<div class="chromas">Contoh < /div></td></tr>
<tr><td>DropShadow</td><td>Membuat kerangka gambar offset, yaitu memberikan bayangan</td><td>color: warna proyeksi<br>offx, offy: bayangan di dalam x, offset arah y<br>
positif: true membuat bayangan untuk piksel apa pun yang tidak transparan, false membuat bayangan untuk piksel transparan</td><td><div class="dropshadows">contoh dropshadow</div></td></tr>
<tr><td>BalikH</td><td>Balik Horizontal</td><td>Tidak Ada</td><td><div class="fliphs">Balik Horizontal</div></td >< /tr>
<tr><td>FlipV</td><td>Balik Vertikal</td><td>Tidak Ada</td><td><div class="flipvs">Balik Vertikal</div></td >< /tr>
<tr><td>Cahaya</td><td>Tambahkan efek cahaya pada batas luar objek</td><td>warna: Menentukan warna cahaya<br>
kekuatan: intensitas cahaya</td><td><div class="glows">Contoh GLOW</div></td></tr>
<tr><td>Abu-abu</td><td>Kurangi warna gambar dan ubah menjadi skala abu-abu</td><td>Tidak ada</td><td><img src="fd.jpg" class ="abu-abu"/></td></tr>
<tr><td>Balikkan</td><td>Sepenuhnya membalikkan nilai warna, saturasi, dan kecerahan untuk menciptakan efek negatif</td><td>Tidak ada</td><td><img src="fd .jpg" class="membalikkan"/></td></tr>
<tr><td>Cahaya</td><td>Memproyeksikan cahaya pada objek</td><td>tidak</td><td>tidak</td></tr>
<tr><td>Mask</td><td>Membuat topeng transparan untuk suatu objek</td><td>warna: Menentukan warna topeng</td><td><div class="masks" >Contoh MASKER</div></td></tr>
<tr><td>Bayangan</td><td>Membuat garis luar objek yang solid, yaitu efek bayangan</td><td>warna: warna proyeksi<br>arah: arah proyeksi</td> <td>< div class="shadows">Contoh BAYANGAN</div></td></tr>
<tr><td>Gelombang</td><td>Gunakan riak sinusoidal untuk mengganggu gambar pada arah sumbu X dan sumbu Y</td><td>tambahkan: true berarti mengganggu gambar dalam gelombang, false bukan mengganggunya<br >
freq: Frekuensi pembangkitan riak (berapa banyak riak yang dihasilkan)<br>kekuatan cahaya: Meningkatkan efek riak yang dihasilkan (nilainya 0 hingga 100)<br>
fase: Atur offset di awal gelombang sinus, umumnya 0, hingga 100<br>kekuatan: Atur amplitudo gelombang sinus</td><td><div class="waves">Contoh GELOMBANG</ div> </ td></tr>
<tr><td>Xray</td><td>Hanya menampilkan garis luar objek</td><td>Tidak ada</td><td><img src="fd.jpg" class="xrays" /> </td></tr>
</tabel>
</tubuh>
</html>