โค้ดตัวอย่าง html และโค้ด css ที่รวมอยู่ด้านล่างนี้ รูปภาพที่ใช้ในโค้ดคือ fd.jpg คัดลอกโค้ดและตั้งชื่อรูปภาพ fd.jpg เพื่อดูเอฟเฟกต์ทั้งหมด
<!DOCTYPE HTML PUBLIC "- //W3C //DTD HTML 4.01 เฉพาะกาล//EN">
<html>
<หัว>
<title>เอฟเฟกต์ตัวกรอง CSS.html</title>
<meta http-equiv="คำหลัก" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="นี่คือหน้าของฉัน">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
.อัลฟ่า
-
ตัวกรอง:อัลฟา(ความทึบ=0,ความสมบูรณ์=100,สไตล์=1,startx=0,starty=85,finishx=150,finishy=85);
-
.เบลอ
-
ตระกูลฟอนต์:lucida ลายมือตัวเอียง;
ขนาดตัวอักษร:72px;
รูปแบบตัวอักษร: ตัวหนา;
สี:#336600;
width:350px;/*แอตทริบิวต์นี้จำเป็น ไม่เช่นนั้นจะไม่สามารถมองเห็นเอฟเฟกต์ได้*/
ตัวกรอง: เบลอ (เพิ่ม = true, ทิศทาง = 90, ความแรง = 25);
-
.โครม่า
-
ตระกูลฟอนต์:lucida ลายมือตัวเอียง;
ขนาดตัวอักษร:72px;
รูปแบบตัวอักษร: ตัวหนา;
สี:สีแดง;
ความกว้าง:350px;
ตัวกรอง: โครมา (สี = สีแดง);
-
.dropshadows
-
ตระกูลฟอนต์:lucida ลายมือตัวเอียง;
ขนาดตัวอักษร:72px;
รูปแบบตัวอักษร: ตัวหนา;
สี:#336600;
ความกว้าง:350px;
ตัวกรอง: dropshadow (สี = สีแดง, offx = 15, offy = 10, บวก = 1);
-
.พลิก
-
ตระกูลฟอนต์:lucida ลายมือตัวเอียง;
ขนาดตัวอักษร:72px;
รูปแบบตัวอักษร: ตัวหนา;
สี:#336600;
ความกว้าง:350px;
ตัวกรอง: พลิก;
-
.flipvs
-
ตระกูลฟอนต์:lucida ลายมือตัวเอียง;
ขนาดตัวอักษร:72px;
รูปแบบตัวอักษร: ตัวหนา;
สี:#336600;
ความกว้าง:350px;
ตัวกรอง:flipv;
-
.เรืองแสง
-
ตระกูลฟอนต์:lucida ลายมือตัวเอียง;
ขนาดตัวอักษร:72px;
รูปแบบตัวอักษร: ตัวหนา;
สี:#336600;
ความกว้าง:350px;
ตัวกรอง:เรืองแสง(สี=สีน้ำเงิน,ความแข็งแรง=15);
-
.สีเทา
-
ตระกูลฟอนต์:lucida ลายมือตัวเอียง;
ขนาดตัวอักษร:72px;
รูปแบบตัวอักษร: ตัวหนา;
สี:#336600;
ความกว้าง:350px;
ตัวกรอง:สีเทา;
-
.กลับด้าน
-
ตระกูลฟอนต์:lucida ลายมือตัวเอียง;
ขนาดตัวอักษร:72px;
รูปแบบตัวอักษร: ตัวหนา;
สี:#336600;
ความกว้าง:350px;
ตัวกรอง: กลับด้าน;
-
.มาสก์
-
ตระกูลฟอนต์:lucida ลายมือตัวเอียง;
ขนาดตัวอักษร:72px;
รูปแบบตัวอักษร: ตัวหนา;
สี:#336600;
ความกว้าง:350px;
ตัวกรอง: หน้ากาก (สี = สีเขียว);
-
.เงา
-
ตระกูลฟอนต์:lucida ลายมือตัวเอียง;
ขนาดตัวอักษร:72px;
รูปแบบตัวอักษร: ตัวหนา;
สี:#336600;
ความกว้าง:350px;
ตัวกรอง:เงา(สี=แดง,ทิศทาง=225);
-
.คลื่น
-
ตระกูลฟอนต์:lucida ลายมือตัวเอียง;
ขนาดตัวอักษร:72px;
รูปแบบตัวอักษร: ตัวหนา;
สี:#336600;
ความกว้าง:350px;
ตัวกรอง: คลื่น (เพิ่ม = true, ความถี่ = 3, ความแรงของแสง = 100, เฟส = 45, ความแรง = 20);
-
.xrays
-
ตระกูลฟอนต์:lucida ลายมือตัวเอียง;
ขนาดตัวอักษร:72px;
รูปแบบตัวอักษร: ตัวหนา;
สี:#336600;
ความกว้าง:350px;
ตัวกรอง:เอ็กซ์เรย์;
-
</สไตล์>
</หัว>
<ร่างกาย>
<ความกว้างของตาราง=1000 เส้นขอบ=1>
<tr><td width=100>คุณสมบัติตัวกรอง</td><td width=100>คำอธิบาย</td><td width=400>พารามิเตอร์และค่า</td><td width=400>ตัวอย่างเอฟเฟกต์< /td ></tr>
<tr><td><span class=alpha>Alpha</span></td><td>ตั้งค่าเอฟเฟกต์ความโปร่งใส</td><td>ความทึบ: ระดับความโปร่งใส 0 ถึง 100, 0 คือความโปร่งใสโดยสมบูรณ์<br>
style: ระบุลักษณะรูปร่างของพื้นที่โปร่งใส 0 คือการกระจายแบบสม่ำเสมอ 2 คือรัศมี 3 คือความเสร็จสิ้นแบบสี่เหลี่ยม: ตั้งค่าความโปร่งใสที่ส่วนท้ายของการไล่ระดับสีเพื่อให้ได้เอฟเฟกต์การไล่ระดับสี ค่าคือ จาก 0 ถึง 100<br>
startX, startY: พิกัดเริ่มต้นของเอฟเฟกต์ความโปร่งใสของการไล่ระดับสี<br>finishX, finishY: พิกัดสิ้นสุดของเอฟเฟกต์ความโปร่งใสของการไล่ระดับสี</td><td><p><img src="fd.jpg" class="alphas"/ ></p ></td></tr>
<tr><td>เบลอ</td><td>สร้างเอฟเฟกต์เบลอ</td><td>เพิ่ม: ระบุว่าควรเปลี่ยนรูปภาพเป็นเอฟเฟกต์เบลอ จริงหรือเท็จ<br>
ทิศทาง: กำหนดทิศทางการเบลอ 0 องศาหมายถึงแนวตั้งขึ้น ทุก 45 องศาเป็นหน่วย ค่าเริ่มต้นคือ 270 องศาไปทางซ้าย<br>ความแรง: หมายถึงจำนวนพิกเซลความกว้างที่ได้รับผลกระทบจากการเบลอ ค่าเริ่มต้นคือ 5< /td>
<td><div class="blrs">โชคดี !</div></td></tr>
<tr><td>Chroma</td><td>ตั้งค่าสีที่ระบุให้โปร่งใส</td><td>สี: ระบุสีโปร่งใส</td><td>chroma<div class="chromas">ตัวอย่าง < /div></td></tr>
<tr><td>DropShadow</td><td>สร้างโครงร่างภาพออฟเซ็ต นั่นคือ ใส่เงา</td><td>สี: สีของการฉายภาพ<br>offx, offy: เงาใน ชดเชยทิศทาง x, y<br>
บวก: true สร้างเงาสำหรับพิกเซลที่ไม่โปร่งใส false สร้างเงาสำหรับพิกเซลโปร่งใส</td><td><div class="dropshadows">ตัวอย่าง dropshadow</div></td></tr>
<tr><td>FlipH</td><td>พลิกแนวนอน</td><td>ไม่มี</td><td><div class="fliphs">พลิกแนวนอน</div></td >< /tr>
<tr><td>FlipV</td><td>พลิกแนวตั้ง</td><td>ไม่มี</td><td><div class="flipvs">พลิกแนวตั้ง</div></td >< /tr>
<tr><td>เรืองแสง</td><td>เพิ่มเอฟเฟกต์แสงไปที่ขอบเขตด้านนอกของวัตถุ</td><td>สี: ระบุสีของแสง<br>
ความแข็งแรง: ความเข้มของการส่องสว่าง</td><td><div class="glows">ตัวอย่างเรืองแสง</div></td></tr>
<tr><td>สีเทา</td><td>ลดสีของภาพและเปลี่ยนเป็นระดับสีเทา</td><td>ไม่มี</td><td><img src="fd.jpg" คลาส ="สีเทา"/></td></tr>
<tr><td>กลับด้าน</td><td>กลับค่าสี ความอิ่มตัว และความสว่างโดยสิ้นเชิงเพื่อสร้างเอฟเฟกต์เชิงลบ</td><td>ไม่มี</td><td><img src="fd .jpg" class="กลับหัว"/></td></tr>
<tr><td>แสงสว่าง</td><td>ฉายแสงไปที่วัตถุ</td><td>ไม่</td><td>ไม่</td></tr>
<tr><td>มาสก์</td><td>สร้างมาสก์โปร่งใสสำหรับวัตถุ</td><td>สี: ระบุสีของมาสก์</td><td><div class="masks" >ตัวอย่างหน้ากาก</div></td></tr>
<tr><td>เงา</td><td>สร้างโครงร่างที่ชัดเจนของวัตถุ ซึ่งก็คือเอฟเฟกต์เงา</td><td>สี: สีฉายภาพ<br>ทิศทาง: ทิศทางการฉายภาพ</td> <td>< div class="shadows">ตัวอย่างเงา</div></td></tr>
<tr><td>คลื่น</td><td>ใช้ระลอกคลื่นไซน์เพื่อรบกวนภาพในทิศทางของแกน X และแกน Y</td><td>เพิ่ม: จริง หมายถึงการรบกวนภาพในรูปแบบคลื่น เท็จ ไม่ใช่ รบกวนมัน<br >
freq: ความถี่ของการสร้างระลอกคลื่น (จำนวนระลอกคลื่นที่ถูกสร้างขึ้น)<br>ความแรงของแสง: ปรับปรุงเอฟเฟกต์ของระลอกคลื่นที่สร้างขึ้น (ค่าคือ 0 ถึง 100)<br>
เฟส: ตั้งค่าออฟเซ็ตที่จุดเริ่มต้นของคลื่นไซน์ โดยทั่วไป 0 ถึง 100<br>ความแรง: ตั้งค่าความกว้างของคลื่นไซน์</td><td><div class="waves">ตัวอย่าง WAVE</ div> </ td></tr>
<tr><td>Xray</td><td>แสดงเฉพาะโครงร่างของวัตถุ</td><td>ไม่มี</td><td><img src="fd.jpg" class="xrays" /> </td></tr>
</ตาราง>
</ร่างกาย>
</html>