شنبه ۲۹ دي ۱۴۰۳
Tut24 آموزش برنامه نویسی و مجله تخصصی فناوری ورود/عضویت

آموزش CSS - جلوه های متن و تصویر

می‌توانید از فیلترهای CSS برای افزودن جلوه‌های ویژه به متن، تصاویر و سایر جنبه‌های یک صفحه وب بدون استفاده از تصاویر یا سایر گرافیک‌ها استفاده کنید. فیلترها فقط در اینترنت اکسپلورر 4.0 کار می کنند. اگر سایت خود را برای چندین مرورگر توسعه می دهید، ممکن است استفاده از فیلترهای CSS ایده خوبی نباشد زیرا این امکان وجود دارد که مزیتی به همراه نداشته باشد.در این درس، جزئیات هر فیلتر CSS را بررسی خواهیم کرد. البته ممکن است این فیلترها در مرورگر شما کار نکنند.

Alpha Channel

Alpha channel در CSS به شما این امکان را می‌دهد که یک عنصر HTML یا یک تصویر PNG شفاف (transparency) داشته باشد. این شفافیت با استفاده از مقدار alpha یا به عبارت دیگر مقدار opacity کنترل می‌شود. با افزودن alpha channel، شما می‌توانید برخی از عناصر را به صورت شفاف نمایش دهید و پس‌زمینه یا عناصر دیگری که زیر آن هستند را نمایان کنید.برای تعیین شفافیت یک عنصر با استفاده از alpha channel، می‌توانید از مقدار opacity استفاده کنید. این مقدار بین 0 و 1 قرار دارد، که 0 به معنای کاملاً شفاف و 1 به معنای کاملاً نامشخص (غیر شفاف) است. مقدارهای بین این دو، شفافیت متناسب با آن مقدار را نشان می‌دهند.

شماره  پارامتر و توضیحات
1

opacity

سطح opacity= 0 کاملا شفاف است، 100= opacity غیر شفاف است.
2

finishopacity

 معمولاً این پارامتر نقش در کنترل شفافیت یا آلفا در یک قسمتی  از شیء (object) را دارد. "finishopacity" به عنوان یک پارامتر انتهایی یا پایانی درتعیین شفافیت اجسام مورد استفاده قرار می‌گیرد. این پارامتر می‌تواند نشان‌دهنده میزان شفافیت در انتهای یک شیء باشد، به عبارت دیگر، شیء در یک نقطه خاص از خود می‌تواند شفاف یا ناشفاف باشد.به عنوان مثال، در برنامه‌های گرافیکی یا ویرایش تصویر، ممکن است شما بخواهید تعیین کنید که در انتهای یک شیء (object)، شفافیت به یک حد خاصی برسد. این حد می‌تواند توسط پارامتر "finishopacity" کنترل شود.
3

style

 این پارامتر مربوط به کنترل شکل شفافیت یا آلفا  گرادیان  در یک عنصر گرافیکی است. این پارامتر به عنوان "style" یا "gradient style" نامیده شده است و شکلی از شفافیت گرادیان را مشخص می‌کند. پارامتر های style می‌توانند به شکل زیر باشند:

1- (Uniform): اگر این مقدار برابر با صفر باشد، گرادیان  به صورت یکنواخت در سراسر عنصر استفاده می‌شود، به این معنا که تغییرات شفافیت به صورت یکسان در همه جهات اعمال می‌شود.
 2- (Linear): اگر مقدار برابر با یک باشد،گرادیان به صورت خطی اعمال می‌شود. این به معنای این است که تغییرات شفافیت در جهت خطی اعمال می‌شود، ممکن است از یک نقطه به نقطه دیگر یا در یک جهت خاص باشد.
3- (Radial): اگر مقدار برابر با دو باشد، گرادیان به صورت شعاعی اعمال می‌شود. این به معنای این است که شفافیت از مرکز به سمت لبه‌ها یا برعکس اعمال می‌شود.
4- (Rectangular): اگر مقدار برابر با سه باشد، گرادیان به صورت مستطیلی اعمال می‌شود. این ممکن است به معنای تغییرات شفافیت در یک جهت مستطیلی باشد.
4

startX

مربوط به شروع شفافیت گرادیان با مختصات X است، این ممکن است در محیطی گرافیکی یا نرم‌افزارهای ویرایش تصویر به کار رفته باشد. این پارامتر به شما امکان می‌دهد که مختصات شروع شفافیت گرادیان  را در جهت افقی (محور X) تعیین کنید.مختصات X نقطه شروع شفافیت گرادیان نشان‌دهنده افقی بودن موقعیت این نقطه است. این مختصات معمولاً در یک سیستم مختصات با نقطه (0،0) در گوشه سمت چپ بالا قرار دارد و به افزایش به سمت راست افزایش می‌یابد.

برای مثال:

اگر "startX" برابر با 0 باشد، گرادیان از سمت چپ شروع می‌شود.
اگر "startX" برابر با عدد مثبتی باشد، گرادیان از سمت راست این نقطه شروع می‌شود.
اگر "startX" برابر با عدد منفی باشد، گرادیان از سمت چپ این نقطه شروع می‌شود.
5

startY

پارامتر "startY" به مختصات Y برای شروع  شفافیت یا الفا گرادیان اشاره دارد. این به این معناست که شروع شفافیت گرادیان  از یک نقطه خاص در محور عمودی (Y) تعیین می‌شود.مختصات Y نقطه شروع  شفافیت گرادیان  نشان‌دهنده موقعیت عمودی این نقطه است. مختصات عمودی معمولاً در یک سیستم مختصات با نقطه (0،0) در گوشه سمت چپ بالا قرار دارد و به افزایش به سمت پایین افزایش می‌یابد.

برای مثال:

اگر "startY" برابر با 0 باشد، گرادیان از سمت بالا شروع می‌شود.
اگر "startY" برابر با عدد مثبتی باشد، گرادیان از سمت پایین این نقطه شروع می‌شود.
اگر "startY" برابر با عدد منفی باشد، گرادیان از سمت بالا این نقطه شروع می‌شود.
6

finishX

پارامتر "finishX" به مختصات X برای پایان شفافیت یا الفا گرادیان اشاره دارد. این به این معناست که پایان شفافیت گرادیان  از یک نقطه خاص در محور افقی (X) تعیین می‌شود.مختصات X نقطه پایان شفافیت گرادیان نشان‌دهنده موقعیت افقی این نقطه است. مختصات افقی معمولاً در یک سیستم مختصات با نقطه (0،0) در گوشه سمت چپ بالا قرار دارد و به افزایش به سمت راست افزایش می‌یابد.

برای مثال:

اگر "finishX" برابر با 0 باشد، گرادیان در افق از سمت چپ به سمت راست به پایان می‌رسد.
اگر "finishX" برابر با عدد مثبتی باشد، گرادیان در افق از سمت چپ به سمت راست به پایان می‌رسد.
اگر "finishX" برابر با عدد منفی باشد، گرادیان در افق از سمت راست به سمت چپ به پایان می‌رسد
7

finishY

پارامتر "finishY" به مختصات Y برای پایان  شفافیت یا آلفا گرادیان اشاره دارد. این به این معناست که پایان شفافیت  گرادیان  از یک نقطه خاص در محور عمودی (Y) تعیین می‌شود.مختصات Y نقطه پایان شفافیت گرادیان  نشان‌دهنده موقعیت عمودی این نقطه است. مختصات عمودی معمولاً در یک سیستم مختصات با نقطه (0،0) در گوشه سمت چپ بالا قرار دارد و به افزایش به سمت پایین افزایش می‌یابد.

برای مثال:

اگر "finishY" برابر با 0 باشد، گرادیان در افق از سمت بالا به پایین به پایان می‌رسد.
اگر "finishY" برابر با عدد مثبتی باشد، گرادیان در افق از سمت بالا به پایین به پایان می‌رسد.
اگر "finishY" برابر با عدد منفی باشد، گرادیان در افق از سمت پایین به بالا به پایان می‌رسد.

مثال

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" alt = "CSS Logo" 
         style = "Filter: Alpha(Opacity=100, 
         FinishOpacity = 0, 
         Style = 2, 
         StartX = 20, 
         StartY = 40, 
         FinishX = 0, 
         FinishY = 0)" />
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: blue;
         Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>
   </body>
</html>

Motion Blur

Motion Blur یک افکت گرافیکی است که باعث ایجاد  blur در تصاویر یا متن می‌شود، به نحوی که انگار اشیاء در حرکت هستند. این افکت بسیار معمول در طراحی گرافیکی، انیمیشن، یا حتی در عکاسی به منظور ایجاد حس حرکت استفاده می‌شود. در زیر، پارامترهای معمولاً مورد استفاده در فیلتر Motion Blur توضیح داده شده‌اند:

شماره پارامتر و توضیحات
1

add

پارامتر "add" که با مقدار "true" یا "false" قابل تنظیم است، مشخص می‌کند که آیا تصویر اصلی به تصویر متحرک تار افزوده شود یا نه. این پارامتر تعیین می‌کند که آیا blur اعمال شده به تصویر اصلی افزوده شود یا نه.اگر "add" برابر با "true" باشد: تصویر اصلی به تصویر تار افزوده می‌شود. این به معنای این است کهblur اعمال شده به تصویر اصلی افزوده می‌شود و تصویر نهایی حاصل از افزایشblur با تصویر اصلی ترکیب می‌شود.اگر "add" برابر با "false" باشد: تصویر اصلی به تصویر تار افزوده نمی‌شود. در این حالت، تصویر نهایی فقط شامل اثر blur  است بدون افزوده شدن تصویر اصلی.
این پارامتر برای کنترل نحوه ترکیب تصویر اصلی و تصویر تار در اثر Motion Blur بسیار کاربردی است.
2

direction

پارامتر "direction" در افکت Motion Blur مشخص می‌کند که جهت  blur به چه سمتی باشد. این پارامتر معمولاً به درجه‌ها تنظیم می‌شود و به صورت گرد شده به 45 درجه افزایش می‌یابد. مقادیر معمولاً با توجه به جهت عقربه‌های ساعت از 0 تا 360 درجه تعیین می‌شوند. در زیر توضیحاتی در مورد جهت‌های مختلف با توجه به این پارامتر آورده شده است:

0= (Top): blur به سمت بالا اعمال می‌شود.
45= (Top right): blur به سمت بالا و راست اعمال می‌شود.
90= (Right): blur به سمت راست اعمال می‌شود.
135= (Bottom right): blur به سمت پایین و راست اعمال می‌شود.
180= (Bottom): blur به سمت پایین اعمال می‌شود.
225= (Bottom left): blur به سمت پایین و چپ اعمال می‌شود.
270= (Left): blur به سمت چپ اعمال می‌شود. (مقدار پیش‌فرض)
315= (Top left): blur به سمت بالا و چپ اعمال می‌شود.
مقادیر این پارامتر به شکل دلخواه قابل تنظیم نیستند و بر اساس مقادیر ثابت مشخص شده‌اند. این جهت‌ها به طور معمول در حالت‌هایی که می‌خواهید حرکت یک جسم را شبیه‌سازی کنید یا جهتی خاص برای blur نیاز دارید مورد استفاده قرار می‌گیرند.
3

strength

پارامتر "strength" در افکت Motion Blur نشان‌دهنده تعداد پیکسل‌هایی است که  blur در آن سمت قرار می‌گیرد. این پارامتر تعیین می‌کند که  blur چقدر گسترده باشد و به عبارت دیگر، میزان افتراق میان تصویر اصلی و تصویر تار.

اگر "strength" برابر با 5 باشد (مقدار پیش‌فرض):  blur به اندازه 5 پیکسل در سمت تعیین شده توسط پارامتر "direction" گسترده می‌شود.
اگر "strength" با مقدار بیشتر تنظیم شود،  blur بیشتری افزایش پیدا کرده و تأثیر  blurبر تصویر قوی‌تر خواهد بود.
اگر "strength" با مقدار کمتر تنظیم شود،  blur کمتری گسترش پیدا کرده و تأثیر  blurبر تصویر ضعیف‌تر خواهد بود.
این پارامتر به شما امکان می‌دهد تا میزان تاثیرگذاری افکت Motion Blur را بر تصویر کنترل کنید و تصمیم بگیرید که  blur چقدر گسترده و قوی باشد.

مثال

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" alt = "CSS Logo" 
         style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: blue; 
         Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials
      </div>
   </body>
</html>

Chroma Filter

فیلتر کروما یک ابزار گرافیکی است که برای حذف یا شفاف کردن یک رنگ خاص در تصاویر استفاده می‌شود. این فیلتر معمولاً در ویرایش تصویر و پردازش تصاویر برنامه‌های گرافیکی مورد استفاده قرار می‌گیرد.

 یک پارامتر معمولاً مورد استفاده در فیلتر کروما :

شماره پارامتر و توضیحات
1

color

 رنگی که می‌خواهید از تصویر حذف شود یا شفاف شود. این معمولاً با استفاده از کد رنگی یا نام رنگ مشخص می‌شود.
با تنظیم این پارامتر، می‌توانید رنگ مورد نظر خود را از تصویر حذف کرده و اجزای غیرضروری را شفاف کنید. این کار معمولاً برای ایجاد تصاویر با پس‌زمینه شفاف، حذف یا تغییر پس‌زمینه و یا ایجاد افکت‌های ویژه استفاده می‌شود.

مثال

<html>
   <head>
   </head>
   
   <body>
      <p>مثال تصویر:</p>
      
      <img src = "/images/css.gif" 
         alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">
      
      <p>نمونه متن:</p>
      
      <div style = "width: 580; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: #3300FF; 
         Filter: Chroma(Color = #3300FF)">آموزش های CSS</div>
   </body>
</html>

Drop Shadow Effect

Drop Shadow یک افکت گرافیکی است که یک سایه به یک شیء اضافه می‌کند و به آن ابعاد عمودی و افقی می‌بخشد. این افکت معمولاً در طراحی گرافیکی و UI/UX برای افزودن ابعاد و عمق به شیء مورد استفاده قرار می‌گیرد

پارامترهای زیر را می توان در این فیلتر استفاده کرد

شماره پارامتر و توضیحات
1

Shadow Color

 رنگی که باعث ایجاد سایه می‌شود. این می‌تواند به صورت کد رنگی یا نام رنگ مشخص شود.
2

Offset X

مقدار افست در جهت افقی (از چپ به راست یا برعکس) برای سایه.
3

Offset Y

 مقدار افست در جهت عمودی (از بالا به پایین یا برعکس) برای سایه. 
4

positive

پارامتر "positive" که با مقدار "true" یا "false" قابل تنظیم است، مشخص می‌کند که کدام پیکسل‌ها از شیء دارای افکت Drop Shadow باشند. این پارامتر در واقع مشخص می‌کند که آیا پیکسل‌های شفاف یا پیکسل‌های غیرشفاف افکت سایه را ببینند.

- اگر "positive" برابر با "true" باشد (مقدار پیش‌فرض): تمام پیکسل‌های غیرشفاف شیء دارای افکت Drop Shadow خواهند بود.

- اگر "positive" برابر با "false" باشد: تمام پیکسل‌های شفاف شیء دارای افکت Drop Shadow خواهند بود.

با استفاده از این پارامتر، می‌توانید تعیین کنید که افکت Drop Shadow بر روی پیکسل‌های شفاف یا پیکسل‌های غیرشفاف اعمال شود.

مثال

<html>
   <head>
   </head>
   
   <body>
      <p>نمونه تصویر:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter:drop-shadow(2px 2px 1px #FF0000);">
      
      <p>نمونه متن:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter:drop-shadow(3px 3px 2px #000000);">آموزش های CSS</div>
   </body>
</html>

Flip Effect

افکت Flip برای ایجاد تصویر آینه از یک شیء استفاده می‌شود. با این افکت، می‌توانید تصویر یک شیء را به صورت افقی یا عمودی برعکس کنید. در زیر، پارامترهای معمولاً مورد استفاده در افکت Flip آورده شده‌اند:

 

شماره پارامتر و توضیحات
1

FlipH

یک تصویر آینه افقی ایجاد می کند
2

FlipV

یک تصویر آینه عمودی ایجاد می کند

مثال

<html>
   <head>
   </head>
   
   <body>
      <p>نمونه تصویر:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: FlipH">
      
      <img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipV">
      
      <p>نمونه متن:</p>
      
      <div style = "width: 300; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: FlipV">آموزش های CSS</div>
   </body>
</html>

Glow Effect

افکت Glow برای ایجاد درخشش و نور در اطراف یک شیء یا جسم مورد استفاده قرار می‌گیرد. این افکت به تصویر یک لایه نوری افزوده و اغلب در طراحی گرافیکی و انیمیشن‌ها برای ایجاد جلوه‌های ویژه استفاده می‌شود. در زیر، پارامترهای معمولاً مورد استفاده در افکت Glow آورده شده‌اند:

 

شماره پارامتر و توضیحات
1

color

 رنگی که میخواهید  نور درخشش ایجاد کند. این معمولاً به صورت کد رنگی یا نام رنگ مشخص می‌شود.
 
2

strength  

پارامتر "strength" در افکت Glow نشان‌دهنده شدت یا قدرت درخشش است. این پارامتر معمولاً به عنوان یک عدد صحیح از 1 تا 255 تنظیم می‌شود.

مثال

<html>
   <head>
   </head>
   
   <body>
      <p>نمونه تصویر:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">
      
      <p>نمونه متن:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Glow(Color=#00FF00, Strength=20)">آموزش های CSS</div>
   </body>
</html>

Grayscale Effect

افکت Grayscale برای تبدیل تصویر به یک تصویر خاکستری (گری‌اسکیل) با 256 سطح خاکستری مورد استفاده قرار می‌گیرد. این افکت با حذف اطلاعات رنگی، تصویر را به سطوح مختلف خاکستری تبدیل می‌کند.

شماره پارامتر و توضیحات
1

grayscale

پارامتر "grayscale" در افکت Grayscale مشخص می‌کند که آیا تصاویر رنگی را به 256 سطح خاکستری تبدیل کند یا خیر.

مثال

<html>
   <head>
   </head>
   
   <body>
      <p>نمونه تصویر:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: grayscale(50%)">
      
      <p>نمونه متن:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: grayscale(50%)">آموزش های CSS</div>
   </body>
</html>

Invert Effect

افکت Invert برای تبدیل رنگ‌های یک شی به مقادیر مخالف آنها در طیف رنگ استفاده می‌شود، این افکت معمولاً با  برعکس کردن  مقادیر RGB (قرمز، سبز، آبی) هر پیکسل در تصویر، تغییر رنگ‌ها را به  مقادیر مخالفشان آن تبدیل می‌کند.

شماره  پارامتر و توضیحات
1

Invert

 این پارامتر تعیین می‌کند که آیا رنگ‌های شیء باید به مقادیر مخالفشان در طیف رنگ نگاشت شوند یا خیر.

اگر "Invert" برابر با "true" باشد: رنگ‌های شیء به مقادیر مخالفشان در طیف رنگ نگاشت می‌شوند، یعنی رنگ قرمز به سبز تبدیل می‌شود و برعکس.
اگر "Invert" برابر با "false" باشد: تغییری در رنگ‌های شیء ایجاد نمی‌شود و رنگ‌ها در حالت اولیه باقی می‌مانند.

 

مثال

<html>
   <head>
   </head>
   
   <body>
      <p>نمونه تصویر:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: invert(100%)">
      
      <p>مثال متن:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: invert(100%)">آموزش های CSS</div>
   </body>
</html>

Mask Effect

افکت Mask برای تبدیل پیکسل‌های شفاف به یک رنگ مشخص استفاده می‌شود و همچنین می‌تواند پیکسل‌های مات (غیرشفاف) را به شفاف تبدیل کند.

شماره پارامتر و توضیحات
1

color

 رنگی که به پیکسل‌های شفاف یا مات اعمال می‌شود. این می‌تواند به صورت کد رنگی یا نام رنگ مشخص شود.
 

مثال

 

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Mask(Color=#00FF00)">آموزش های CSS
      </div>
   </body>
</html>

Shadow Filter

فیلتر Shadow برای ایجاد یک سایه ضعیف در جهت و رنگ مشخص شده استفاده می‌شود. این فیلتر به شما امکان می‌دهد تا یک جلوه سایه به شیء خود اضافه کنید. در زیر، پارامترهای معمولاً مورد استفاده در فیلتر Shadow آورده شده‌اند:

شماره پارامتر و توضیحات
1

color

 رنگ سایه که میخواهیم ایجادشود. این معمولاً به صورت کد رنگی یا نام رنگ مشخص می‌شود.
 
2

direction

 جهتی که سایه ایجاد می‌شود، به عنوان یک زاویه. این زاویه معمولاً به صورت درجه (degree) مشخص می‌شود.
 

0 = Top

45 = Top right

90 = Right

135 = Bottom right

180 = Bottom

225 = Bottom left

270 = Left

315 = Top left

مثال

<html>
   <head>
   </head>
   
   <body>
      <p>نمونه تصویر:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
      
      <p>نمونه متن:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: 
         Arial Black; 
         color: red; 
         filter: Shadow(Color=#0000FF, Direction=225)">آموزش های CSS
      </div>
   </body>
</html>

Wave Effect

افکت Wave برای ایجاد اعوجاج موج سینوسی بر روی یک جسم استفاده می‌شود، تا جسم به نظر ویژگی‌هایی از یک موج سینوسی داشته باشد. این افکت معمولاً برای ایجاد حرکت یا جلوه‌های خاص در طراحی گرافیکی و انیمیشن استفاده می‌شود. در زیر، پارامترهای معمولاً مورد استفاده در افکت Wave آورده شده‌اند:

شماره پارامتر و توضیحات
1

add

مقدار 1 تصویر اصلی را به تصویر موج دار اضافه می کند، 0 نه.
2

freq

 تعداد دوره‌های موج در یک واحد طول. این پارامتر مشخص می‌کند چقدر موج در یک واحد طول تکرار می‌شود.
 
3

light

قدرت نور روی موج که بین میتواند ( 0 تا 100) باشد را تعیین می کند.
4

phase

 فاز اولیه موج، که موقعیت اولیه موج را در مسیر زمان تعیین می‌کند.
5

strength

شدت اثر موج را تعیین میکند 

مثال

<html>
   <head>
   </head>
   
   <body>
      <p>نمونه تصویر:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) 
         Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">
      
      <p>نمونه متن:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">آموزش های CSS
      </div>
   </body>
</html>

X-Ray Effect

 افکت X-Ray معمولاً منجر به ایجاد تصاویر با مقیاس خاکستری شده و  باعث کاهش عمق رنگ می‌شود.این افکت با اعمال تغییرات به کانال‌های رنگی تصویر، مانند کاهش شدت رنگ و افزایش کنتراست، منجر به تصاویری می‌شود که به نظر ویژگی‌های خاصی از دیدگاه X-Ray شباهت دارند.با این افکت، رنگ‌ها به سفید و سیاه تبدیل می‌شوند و مقیاس خاکستری در تصویر ایجاد می‌شود. این کار با کاهش تفاوت‌های رنگی و افزایش تفاوت‌های سطح خاکستری در تصویر انجام می‌شود.

شماره پارامتر و توضیحات
1

xray

 ایجاد تصاویر با مقیاس خاکستری شده و باعث کاهش عمق رنگ می‌شود

مثال

<html>
   <head>
   </head>
   
   <body>
      <p>نمونه تصویر:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Xray">
      
      <p>نمونه متن:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Xray">آموزش های CSS
      </div>
   </body>
</html>

 

  قوانین( Rules@) - درس قبلی
درس بعدی - انواع رسانه ها