فیلترهای CSS و نحوه کارآیی آن‌ها

فیلترهای CSS ابزاری قدرتمند هستند که بوسیله آن ها می توان جلوه های ویژه ای به تصاویر موجود در سایت بخشید.

استفاده از این فیلترها ساده است به شرطی که کارآیی تمامی پارامترها مشخص باشد. در مثال پایین،

img { -webkit-filter: grayscale(50%); }

اولین چیزی که به چشم می خورد، پیشوند webkit است. بعد از آن، یک پارامتر و کمیت تغییرات (داخل پرانتز) آورده شده است. در مثال ذکر شده، پارامتر Grayscale بکار گرفته شده است و میزان این تغییر تا ۵۰ درصد است. چنانچه این مقدار به ۱۰۰ درصد برسد، عکس کاملاً سیاه و سفید می شود. نتیجتاً، این کمیت شدت اعمال تغییرات را نمایش می دهد.

انواع فیلترهای CSS

فیلترهای CSS انواع زیادی دارند که برخی رواج بیشتری دارند و برخی پرکاربردتر هستند. در این مقاله تعداد معدودی از فیلترها به همراه مثالی از کارآیی آن ها معرفی می‌شوند. عکس زیر، تصویر اصلی است که روی آن تغییرات انجام می شوند که با مقایسه تصاویر می توان به نحوه عملکرد فیلتر پی می برد.

فیلترهای CSS

Grayscale

این پارامتر تصویر را سیاه و سفید می کند. هرچه شدت آن بیشتر باشد یعنی کمیت آن افزایش یابد، میزان تاثیر فیلتر بیشتر می شود.

img { -webkit-filter: grayscale(100%); }

فیلترهای CSS

Sepia

فیلتر سبک غریی Sepia تغییراتی مشابه فیلتر Grayscale اعمال می کند.

img { -webkit-filter: sepia(100%); }

فیلترهای CSS

Blur

فیلتر Blur بسیار شبیه ابزار Guassian Blur در فوتوشاپ عمل می کند و به نوعی تصویر را تار می نماید. با تعیین مقدار پیکسل این پارامتر می توان میزان وضوح تصویر را تغییر داد. همانطور که واضح است واحد کمیت این فیلتر پیکسل می باشد.

img { -webkit-filter: blur(10px); }

فیلترهای CSS

img { -webkit-filter: blur(50px); }

فیلترهای CSS

Saturation

میزان اشباع تصاویر یا saturation، یکی از فیلترهای CSS است که میزان وضوح رنگ را نشان می دهد. برعکس، فیلترهایی که در بالا اشاره شدند برای saturation بازه ای وجود ندارد و تا هر میزان که مطلوب است می توان میزان اشباع رنگ ها را افزایش داد.

img { -webkit-filter: saturate(200%); }

فیلترهای CSS

img { -webkit-filter: saturate(2000%); }

فیلترهای CSS

Contrast

فیلتر Contrast مشابه Saturation عمل می کند. چنانچه کمیت مورد نظر شما در بازه ۰ تا ۱۰۰ درصد باشد، رنگ تصویر کدر می شود و هرچه از ۱۰۰ درصد بالاتر رود، شدت رنگ افزایش می یابد.

img { -webkit-filter: contrast(50%); }

فیلترهای CSS

img { -webkit-filter: contrast(500%); }

فیلترهای CSS

Brightness

این فیلتر CSS یکی دیگر از فیلترهایی است که عملکردی مشابه Contrast و Saturation دارد. بازه ۰ تا ۱۰۰ آن رنگ تصویر را کدر می کند و مقدار بیشتر از ۱۰۰ رنگ تصویر را روشن می سازد.

img { -webkit-filter: brightness(50%); }

فیلترهای CSS

img { -webkit-filter: brightness(500%); }

فیلترهای CSS

Hue-rotation

Hue-rotation یکی از جالب ترین فیلترهای CSS است که با توجه به درجه رنگی مورد نظر شما، رنگ های تصویر را مطابق ترتیب رنگی در چرخه رنگ ها تغییر می دهد. چرخه رنگ ها از ۰ تا ۳۶۰ درجه رنگ های متفاوتی دارد. با انتخاب یک نقطه در بازه آن، رنگ ها تغییر می کنند.

img { -webkit-filter: hue-rotate(45deg); }

فیلترهای CSS

img { -webkit-filter: hue-rotate(120deg); }

فیلترهای CSS

img { -webkit-filter: hue-rotate(240deg); }

فیلترهای CSS

Invert

فیلتر Invert رنگ های تصویر را معکوس می کند. تنها کاری که برای استفاده از این فیلتر باید بکنید این است که مشخص کنید تا چه میزان می خواهید تغییر در تصویر خود ایجاد کنید.

img { -webkit-filter: invert(100%); }

فیلترهای CSS

محدودیت فیلترهای CSS

  •  یکی از محدودیت های اصلی فیلترها، پشتیبانی مرورگرها از آن هاست. همانطور که مشاهده کردید تمامی فیلترها پیشوند webkit دارند و این بدین معنی است که تنها در مرورگرهایی قابل استفاده هستند که از این ویژگی پشتیبانی می کنند (Chrome 7, Opera 20, Safari, Blackberry Browser, Firefox 34, Android Browser)
  • محدودیت بعدی به زمان بارگذاری سایت بر می گردد که با استفاده از فیلترهای CSS این زمان افزایش یافته و درنتیجه کارآیی سایت را کاهش می دهد.

 منبع: webdesignviews.com

طراحان
طراحان
گروه طراحان دپارتمان طراحی وب‌سایت است که فعالیت خود را از سال ۸۴ آغاز نموده. طراحان کلیه نیاز‌های شما را در راه اندازی، نگهداری و مدیریت انواع وب‌سایت‌های اینترنتی، فروشگاه‌های اینترنتی، سایت‌های خبری، پرتال‌های سازمانی، سایت‌های ویژه مشاورین املاک، سایت‌های ویژه آژانس‌های مسافرتی و رزرو و ... به‌صورت حرفه‌ای و کاربردی برطرف می‌نماید.