فیلترهای CSS

طراحان — Fri, 22 Jan 2016 15:48:51 +0000

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

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

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

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

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

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

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

Grayscale

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

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

Sepia

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

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

Blur

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

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

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

Saturation

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

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

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

Contrast

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

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

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

Brightness

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

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

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

Hue-rotation

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

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

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

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

Invert

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

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

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

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

منبع: webdesignviews.com

فیلترهای CSS – طراحان | طراحی وب سایت حرفه ای |طراحی فروشگاه اینترنتی

فیلترهای CSS