معرفی فیلترها در CSS

مقدمه

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

()blur

از این تابع برای مات یا محو کردن عناصر استفاده می شود. مقداری که این تابع می گیرد یک مقدار مثبت است و هر چه این مقدار بیشتر باشد عنصر مات تر می شود و مقدار صفر هیچ تاثیری روی عنصر نخواهد گذاشت. از آنجا که مقداری که این تابع می گیرد از نوع طول است پس می توان از واحدهایی چون px و em و rem برای مقدار دهی استفاده کرد ولی توجه داشته باشید که مقدار درصدی را این تابع قبول نمی کند. در زیر مثال هایی برای استفاده از این تابع نشان داده شده است.

div {
  filter: blur(10px);
  filter: blur(.7em);
  filter: blur(0);
  -webkit-filter: blur(5px);
}

توجه داشته باشید که در زمان نوشتن این مطلب تمام نسخه های مرورگر کروم برای پشتیبانی از این فیلترها نیازمند prefix می باشند. پس در زمان نوشتن این توابع -webkit- را فراموش نکنید.
نکته قابل توجه اینکه تاثیر فیلتر نه تنها بر روی همان عنصر اعمال می شود بلکه بر روی border , outline , box-shadow و متن داخل عنصر و حتی فرزندان آن عنصر نیز اعمال می شود پس این نکته را در هنگام استفاده به خاطر بسپارید

تصویر زیر 10px مات شده است.

()brightness

این تابع روشنایی عنصر یا تصویر را مشخص می کند. امکان تغییر از روشنایی صفر (سیاه) تا روشنایی 100% (رنگ اصلی خود عنصر) وجود دارد. همینطور به جای استفاده از درصد می توانید از اعداد بین صفر تا یک استفاده کنید. اعداد بزرگتر از 100% باعث روشن تر شدن عنصر یا تصویر می شوند.

div {
  filter: brightness(150%);
  filter: brightness(0);
  filter: brightness(0.7);

  -webkit-filter: brightness(0.7);
}

تصویر زیر 200% روشن شده است.

()contrast

کار این تابع تنظیم کردن تضاد در تصویر است به این معنی که تفاوت بین روشن ترین و تاریک ترین قسمت های تصویر را تنظیم می کند. نحوه مقدار دهی این تابع کاملا مشابه ()brightness می باشد.

div {
  filter: contrast(150%);
  filter: contrast(0);
  filter: contrast(0.7);

  -webkit-filter: contrast(0.7);
}

بر روی تصویر زیر 200% تضاد اعمال شده است.

()grayscale

این نوع فیلتر رنگ تصویر را از بین می برد و آن را به یک تصویر خاکستری و بی رنگ تبدیل می کند. این تابع مقادیری بین 0 تا 100 درصد و یا 0 تا 1 را می پذیرد. عدد صفر تصویر را بدون تغییر حفظ می کند و عدد صد عکس را به بی رنگ ترین حالت تبدیل می کند. اعداد بزرگتر از 100% به همان 100% تبدیل می شوند.

div {
  filter: grayscale();
  filter: grayscale(1);
  filter: grayscale(40%);

  -webkit-filter: grayscale(0.28);
}

وقتی به این تابع مقداری نمی دهیم مقدار پیشفرض خود یعنی 100% را می گیرد. بر روی تصویر زیر عدد 100% اعمال شده است.

()hue-rotate

اگر با ساختار رنگ ها آشنا باشید می دانید که تمام رنگ ها در یک دایره 360 درجه جای دارند. این تابع با توجه به زاویه ای که ما به آن می دهیم تمام رنگ های موجود در تصویر یا عنصر مورد نظر را به همان مقدار در دایره رنگی تغییر می دهد. مقادیر این تابع بین 0 تا 360 درجه قابل تغییر است و مقدار پیشفرض آن 0 است که تغییری روی تصویر اعمال نمی کند.
تصویر زیر مقدار 120deg را گرفته است.

()invert

این تابع امکان معکوس کردن رنگ ها را به ما می دهد و یک مقدار بین 0 تا 100% می گیرد و هر چه به سمت 100% حرکت کنیم تصویر از لحاظ رنگی معکوس تر به نظر می رسد. مقدار 100% نمایانگر نهایت وارونگی رنگ ها می باشد و عدد 0 تصویر یا عنصر را بدون تغییر نشان می دهد و اگر هیچ مقداری به این تابع ندهیم مقدار پیشفرض یعنی 100% را به خود می گیرد. اعداد بیشتر از 100% هم به 100% تبدیل می شوند. همچنین این تابع عدد بین صفر تا یک هم به جای درصد قبول می کند.

div {
  filter: invert();
  filter: invert(40%);
  filter: invert(0.32);

  -webkit-filter: invert(1);
}

عکس زیر کاملا معکوس شده است.

()opacity

عملکرد این تابع کاملا مشابه ویژگی opacity می باشد. و عددی بین 0 تا 1 یا 0 تا 100% می گیرد و هرچه به سمت عدد کوچکتر حرکت کنیم عنصر یا تصویر به حالت شیشه ای تری می رسد تا اینکه عدد صفر عنصر را کاملا ناپدید می کند.

تصویر زیر به مقدار 50% شیشه ای شده است.

()saturate

از این تابع زمانی استفاده می شود که بخواهیم به تصویر مورد نظر از نظر رنگی جان ببخشیم, این تابع تصویر را زنده تر و خوش رنگ تر می کند. این تابع هم عددهایی بین 0 تا 100% یا 0 تا 1 را می پذیرد. اعداد بیشتر از 100% هم اشباع بیشتری را در رنگ ها اعمال می کنند.

تصویر زیر نشان دهنده 250% از این تابع است.

()sepia

این تابع به تصویر یا عنصر یک ته رنگ قهوه ای تیره شبیه عکسبرداری های قدیمی می دهد. مقدار دهی این تابع شبیه توابع قبلی می باشد و همان بازه درصدی یا 0 تا 1 را می پذیرد.
عدد 100% روی این تصویر اعمال شده است.

()drop-shadow

به احتمال زیاد با ویژگی box-shadow در CSS آشنایی دارید که کار آن قرار دادن سایه برای عناصر می باشد. کار این تابع هم مشابه همین ویژگی می باشد با کمی تفاوت که بررسی می کنیم. شاید تا الان به این مساله برخورده باشید که بخواهید برای یک عکس PNG به وسیله CSS سایه بسازید و قطعا راه حل شما استفاده از ویژگی box-shadow خواهد بود اما می دانید که این سایه به دور عکس اعمال می شود که قطعا حالت مربع یا مستطیل دارد. حال اگر تصویر شما دایره یا ستاره بود چه؟ با استفاده از box-shadow به نتیجه زیر خواهید رسید.

اما قطعا این نتیجه دلخواه شما نیست. راه حل شما استفاده از تابع ()drop-shadow می باشد و با آن به نتیجه دلخواه که در زیر نشان داده شده است می رسید.

به روش زیر می توانید از این تابع استفاده کنید.

div {
  filter: drop-shadow(10px 10px 3px rgba(0,0,0,0.3));
}

مقدار اول و دوم مکان سایه را در راستای افقی و عمودی تعیین می کند و مقدار سوم مقدار مات بودن سایه را تعیین می کند و مقدار آخر هم که رنگ سایه می باشد. توجه به این نکته داشته باشید که این تابع همانند ویژگی box-shadow دارای گزینه ای برای تعیین پهنای سایه نمی باشد و همچنین مقدار inset را نمی پذیرد.

()url

این تابع این امکان را می دهد که یک فیلتر خاص که خودتان با استفاده از SVG ساخته اید بر روی عنصر یا تصویر مورد نظر اعمال کنید. فقط کافی است آدرس آن فیلتر را به این تابع بدهید. در مورد SVG در مطالب بعد به طور مفصل صحبت خواهیم کرد.
به عنوان مثال فرض کنید افکتی با SVG به صورت زیر برای مات کردن ساخته ایم

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="myFilter" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="8"/>
  </filter>
</svg>

حال فقط کافی است id این افکت را به صورت زیر به این تابع بدهیم در نتیجه افکت مورد نظر بر روی عنصر یا تصویر اعمال می شود.

div {
  filter: url(#myFilter); 
-webkit-filter: url(myFilters.xml#effect);
}

خط دوم نحوه آدرس دهی از یک فایل خارجی را نشان می دهد.

فیلترهای چندگانه

شما به روش زیر می توانید چندین فیلتر را بر روی یک عنصر یا تصویر اعمال کنید. فقط این نکته را در نظر داشته باشید که ترتیب نوشتن فیلترها اهمیت دارد.

div {
  filter: sepia(1) brightness(150%) contrast(0.5);
}

پشتیبانی مرورگرها

در نظر داشته باشید که هیچکدام از مرورگرهای IE فیلترهای CSS را پشتیبانی نمی کنند. برای بررسی دقیق پشتیبانی مرورگرها به این صفحه مراجعه کنید.

ابزاری برای تولید و تست فیلترهای CSS

در آدرس زیر شما به محیطی برای یادگیری بهتر فیلترهای CSS و همینطور تست و تولید آنها دسترسی خواهید داشت.

همچنین یک پلاگین برای گوگل کروم در این مورد وجود دارد که بسیار کاربردی است.