نموذج كود html ورمز CSS المتضمن فيه موضحان أدناه. الصورة المستخدمة فيه هي fd.jpg انسخ الكود وقم بتسمية صورة fd.jpg لرؤية التأثير الكامل
<!DOCTYPE HTML PUBLIC "- //W3C. //DTD HTML 4.01 Transitional//EN">
<أتش تي أم أل>
<الرأس>
<title>تأثير مرشح CSS.html</title>
<meta http-equiv="keywords" 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">-->
<نمط النوع = "نص/CSS">
.ألفا
{
مرشح: alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=85,finishx=150,finishy=85);
}
.يطمس
{
عائلة الخط: lucida handwirting مائل؛
حجم الخط: 72 بكسل؛
نمط الخط: غامق؛
اللون: #336600؛
width:350px;/*هذه السمة ضرورية، وإلا فلن يكون التأثير مرئيًا*/
مرشح: طمس (إضافة = صحيح، الاتجاه = 90، القوة = 25)؛
}
.chromas
{
عائلة الخط: lucida handwirting مائل؛
حجم الخط: 72 بكسل؛
نمط الخط: غامق؛
اللون: أحمر؛
العرض: 350 بكسل؛
الفلتر: صفاء (اللون = أحمر)؛
}
.dropshadows
{
عائلة الخط: lucida handwirting مائل؛
حجم الخط: 72 بكسل؛
نمط الخط: غامق؛
اللون: #336600؛
العرض: 350 بكسل؛
filter:dropshadow(color=red,offx=15,offy=10,positive=1);
}
.flipphs
{
عائلة الخط: lucida handwirting مائل؛
حجم الخط: 72 بكسل؛
نمط الخط: غامق؛
اللون: #336600؛
العرض: 350 بكسل؛
مرشح: فليب.
}
.flipvs
{
عائلة الخط: lucida handwirting مائل؛
حجم الخط: 72 بكسل؛
نمط الخط: غامق؛
اللون: #336600؛
العرض: 350 بكسل؛
عامل التصفية: فليبف؛
}
.يضيء
{
عائلة الخط: lucida handwirting مائل؛
حجم الخط: 72 بكسل؛
نمط الخط: غامق؛
اللون: #336600؛
العرض: 350 بكسل؛
الفلتر: توهج (اللون = أزرق، القوة = 15)؛
}
.الرمادي
{
عائلة الخط: lucida handwirting مائل؛
حجم الخط: 72 بكسل؛
نمط الخط: غامق؛
اللون: #336600؛
العرض: 350 بكسل؛
الفلتر: رمادي؛
}
.يقلب
{
عائلة الخط: lucida handwirting مائل؛
حجم الخط: 72 بكسل؛
نمط الخط: غامق؛
اللون: #336600؛
العرض: 350 بكسل؛
مرشح: عكس؛
}
.أقنعة
{
عائلة الخط: lucida handwirting مائل؛
حجم الخط: 72 بكسل؛
نمط الخط: غامق؛
اللون: #336600؛
العرض: 350 بكسل؛
عامل التصفية: قناع (اللون = أخضر)؛
}
.الظلال
{
عائلة الخط: lucida handwirting مائل؛
حجم الخط: 72 بكسل؛
نمط الخط: غامق؛
اللون: #336600؛
العرض: 350 بكسل؛
مرشح: الظل (اللون = أحمر، الاتجاه = 225)؛
}
.موجات
{
عائلة الخط: lucida handwirting مائل؛
حجم الخط: 72 بكسل؛
نمط الخط: غامق؛
اللون: #336600؛
العرض: 350 بكسل؛
مرشح: موجة (إضافة = صحيح، التكرار = 3، قوة الضوء = 100، المرحلة = 45، القوة = 20)؛
}
.الأشعة السينية
{
عائلة الخط: lucida handwirting مائل؛
حجم الخط: 72 بكسل؛
نمط الخط: غامق؛
اللون: #336600؛
العرض: 350 بكسل؛
مرشح: الأشعة السينية.
}
</نمط>
</الرأس>
<الجسم>
<عرض الجدول=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>
النمط: يحدد خصائص الشكل للمنطقة الشفافة، 0 هو توزيع منتظم؛ 1 خطي؛ 2 شعاعي؛ 3 مستطيل.<br>السعة النهائية: تعيين الشفافية في نهاية التدرج لتحقيق تأثير التدرج، والقيمة هي من 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><div class="blrs">حظ سعيد!</div></td></tr>
<tr><td>الصفاء</td><td>اضبط اللون المحدد على شفاف</td><td>اللون: حدد اللون الشفاف</td><td>الصفاء<div class="chromas">مثال < /div></td></tr>
<tr><td>DropShadow</td><td>إنشاء مخطط تفصيلي للصورة، أي إلقاء ظل</td><td>اللون: لون الإسقاط<br>offx، offy: الظل في إزاحة الاتجاه x، y<br>
إيجابي: صحيح ينشئ ظلًا لأي بكسل غير شفاف، وينشئ خطأ ظلًا لوحدات البكسل الشفافة</td><td><div class="dropshadows">مثال Dropshadow</div></td></tr>
<tr><td>FlipH</td><td>القلب الأفقي</td><td>لا شيء</td><td><div class="fliphs">القلب الأفقي</div></td >< /تر>
<tr><td>FlipV</td><td>قلب عمودي</td><td>لا شيء</td><td><div class="flipvs">قلب عمودي</div></td >< /تر>
<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="inverts"/></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>
التكرار: تردد توليد التموجات (كم عدد التموجات المتولدة)<br>قوة الضوء: تعزيز تأثير التموجات المتولدة (القيمة من 0 إلى 100)<br>
المرحلة: اضبط الإزاحة في بداية الموجة الجيبية، بشكل عام 0، حتى 100<br>القوة: اضبط سعة الموجة الجيبية</td><td><div class="waves">مثال WAVE</ شعبة> </ td></tr>
<tr><td>أشعة X</td><td>عرض الخطوط العريضة للكائن فقط</td><td>لا شيء</td><td><img src="fd.jpg" class="xrays" /> </td></tr>
</الجدول>
</الجسم>
</html>