ویژگی فیلتر استایل

تعریف و کاربرد

فیلتر ویژگی برای افزودن اثرهای ویژه به تصاویر (مثل تارکنی و ساترناسی) استفاده کنید.

لطفاً به:

دستورالعمل CSS:ویژگی فیلتر

مثال

رنگ تصویر را به سیاه و سفید (100% خاکستری) تغییر دهید:

document.getElementById("myImg").style.filter = "grayscale(100%)";

تجربه کنید

نحوه‌ی نوشتن

بازگشت ویژگی فیلتر:

شیء.style.filter

تنظیم کردن ویژگی فیلتر:

شیء.style.filter = "هیچ‌چیزی | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

توابع فیلتر

نوٹ:فیلتر با استفاده از مقادیر درصدی (مثلاً 75%) نیز مقادیر ده‌دهی (مثلاً 0.75) را می‌پذیرد.

فیلتر توضیح
هیچ‌چیزی بدون اثر تعیین می‌شود.
blur(پیکسلس)

تصویر پر از اثر تارکنی بنویسید. مقادیر بزرگتر تارکنی بیشتری ایجاد می‌کنند.

اگر نمونہ مقدار مخصوص نہ کردیگا تو 0 کردیگا.
اگر نمونہ مقدار مخصوص نہ کردیگا تو 0 کردیگا.%)

brightness(

0% تصویر کو پورا سورئال کردیگا.

100% (1) نمونہ مقدار کا تعین کردیگا، جو اصلي تصویر کو ظاہر کردیگا.

100% سے زیادہ کا مقدار دینا تو زیادہ روشن کا نتیجہ دیگا.
contrast(%)

تصویر کی کھوج کو تیار کردیگا.

0% تصویر کو پورا سورئال کردیگا.

100% (1) نمونہ مقدار کا تعین کردیگا، جو اصلي تصویر کو ظاہر کردیگا.

100% سے زیادہ کا مقدار دینا تو کم کھوج کا نتیجہ دیگا.
drop-shadow(h-shadow v-shadow blur spread color)

تصویر پر پروجیکشن کا اثر دینا.

ممکنہ اعداد:

h-shadow - لازمی. افقی تارہ کا پیکسلو کردیگا. منفی مقدار تارہ کو تصویر کے چپ میں رکھیگا.

v-shadow - لازمی. عمودی تارہ کا پیکسلو کردیگا. منفی مقدار تارہ کو تصویر کے اوپر رکھیگا.

blur - اختیاری. تیسرا نمونہ مقدار، پیکسلو میں کردیگا. تارہ کو تارہ کردیگا. بڑی مقدار بہت زیادہ تارہ کردیگا (تارہ کو بڑا کردیگا اور تارہ کو روشن کردیگا). منفی مقدار کا استعمال نہیں کردیگا. اگر مخصوص نہ کردیگا، وہ 0 (تارہ کی حاشیہ تیز کردیگا).

spread - اختیاری. چوتھی نمونہ مقدار، پیکسلو میں کردیگا. مثبت مقدار کا اضافہ کردیگا تو تارہ کو بڑھا دیگا اور بڑا کردیگا، منفی مقدار کا اضافہ کردیگا تو تارہ کو چھوٹا کردیگا. اگر مخصوص نہ کردیگا، وہ 0 (تارہ کو عناصر کی انداز میں برابر کردیگا).

نوٹ:Chrome، Safari اور Opera، ممکنہ دیگر بروسرز، چوتھی لمبائی کو نا پشتیبند کردیگا؛ اگر اضافہ کردیگا، وہ نمودار نہیں کردیگا.

color: اختیاری. رنگ اضافہ کردیگا. اگر مخصوص نہ کردیگا، رنگ کا انتخاب بروسر کی جانب سے کردیگا (غیر معمولی طور پر مشکی).

نکات:یہ فیلٹر box-shadow کی اپریشن کی طرح ہے.
grayscale(%)

تصویر کو سورئال کردیگا.

0% (0) نمونہ مقدار کا تعین کردیگا، جو اصلي تصویر کو ظاہر کردیگا.

100% تصویر کو پورا سورئال کردیگا (استفاده کیگا کچھ بایکالا تصاویر میں).

نوٹ:ناقص اعداد نہیں چاہئیں
hue-rotate(deg)

تصویر پر رنگ کا درجہ تبدیل کردیگا. یہ مقدار تصویر کی نمونوں کو کس درجے پر تبدیل کردیگا، جس میں:

0deg نمونہ مقدار کا تعین کردیگا، جو اصلي تصویر کو ظاہر کردیگا.

نوٹ:بڑی مقدار 360 درجہ ہوگی.
invert(%)

تصویر میں نمونوں کو مکمل کردیگا.

0% (0) نمونہ مقدار کا تعین کردیگا، جو اصلي تصویر کو ظاہر کردیگا.

100% تصویر کو پورا مکمل کردیگا.

نوٹ:ناقص اعداد نہیں چاہئیں
opacity(%)

تصویر کی ناقابل وضوحیت کی سطح کو سیٹ کردیگا. ناقابل وضوحیت کی سطح وضوحیت کی سطح کو بیان کردیگا، جس میں:

0% پورا شفاف کردیگا.

100% (1) نمونہ مقدار کا تعین کردیگا، جو اصلي تصویر کو ظاہر کردیگا (ناقابل وضوحیت).

نوٹ:ناقص اعداد نہیں چاہئیں

نکات:یہ فیلٹر opacity کی اپریشن کی طرح ہے.
saturate(%)

تصویر کی ساتوریشن کو تیار کردیگا.

0% (0) تصویر کو بلا ساتوریشن کردیگا.

100% نمونہ مقدار کا تعین کردیگا، جو اصلي تصویر کو ظاہر کردیگا.

100% سے زیادہ کا مقدار کا اضافہ کیاگیا تو وہ ایک بہت زیادہ ساتوریشن کا نتیجہ دیگا.

نوٹ:ناقص اعداد نہیں چاہئیں
sepia(%)

تصویر کو سخت کندیگا.

0% (0) نمونہ مقدار کا تعین کردیگا، جو اصلي تصویر کو ظاہر کردیگا.

100% تصویر کو پورا کاٹنا سخت کندیگا.

نوٹ:ناقص اعداد نہیں چاہئیں

تکنیکی تفصیلات

سی ایس ایس ورژن: سی ایس ایس3

براہ کرمی استعمال

اس جدول میں اعداد کا ذکر کیا گیا ہے کہ کس براہ کرمی براہ راست اس کا استعمال کیاجاسکتا ہے۔

کروم ایج فائرفاکس سافری اوپرا
کروم ایج فائرفاکس سافری اوپرا
53.0 13.0 35.0 9.1 40.0