فیلترها

پادکست CSS - 023: فیلترها

فرض کنید باید عنصری بسازید که جلوه شیشه ای مات و کمی مات داشته باشد که بالای تصویر قرار گیرد. متن باید متن زنده باشد نه تصویر. چگونه این کار را انجام می دهید؟

ترکیبی از فیلترهای CSS و backdrop-filter به ما این امکان را می دهد که افکت ها را اعمال کنیم و موارد مورد نیاز را در زمان واقعی محو کنیم. Blur و Opacity دو مورد از بسیاری از فیلترهای موجود هستند، بنابراین بیایید به بررسی کارهایی که همه آنها انجام می دهند و نحوه استفاده از آنها را بپردازیم.

خاصیت filter

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

  • کروم: 53.
  • لبه: 12.
  • فایرفاکس: 35.
  • سافاری: 9.1.

منبع

می توانید یک یا تعداد زیادی از فیلترهای زیر را به عنوان مقدار filter اعمال کنید. اگر فیلتری را به اشتباه اعمال کنید، بقیه فیلترهای تعریف شده برای filter کار نمی کنند.

blur

این یک تاری گاوسی اعمال می کند و تنها استدلالی که می توانید عبور دهید یک radius است که میزان تاری اعمال می شود . این باید یک واحد طول باشد، مانند 10px . درصد قبول نمی شود.

.my-element {
    filter: blur(0.2em);
}

brightness

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

  • کروم: 18.
  • لبه: 12.
  • فایرفاکس: 35.
  • سافاری: 6.

منبع

برای افزایش یا کاهش روشنایی یک عنصر، از تابع روشنایی استفاده کنید. مقدار روشنایی به صورت درصد بیان می شود و تصویر بدون تغییر به عنوان مقدار 100٪ بیان می شود. مقدار 0% تصویر را کاملا سیاه می کند، بنابراین مقادیر بین 0% و 100% باعث می شود تصویر کمتر روشن شود. از مقادیر بیش از 100% برای افزایش روشنایی استفاده کنید.

.my-element {
    filter: brightness(80%);
}

contrast

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

  • کروم: 18.
  • لبه: 12.
  • فایرفاکس: 35.
  • سافاری: 6.

منبع

برای کاهش یا افزایش کنتراست، مقداری بین 0% و 100% تنظیم کنید.

.my-element {
    filter: contrast(160%);
}

grayscale

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

  • کروم: 18.
  • لبه: 12.
  • فایرفاکس: 35.
  • سافاری: 6.

منبع

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

.my-element {
    filter: grayscale(80%);
}

invert

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

  • کروم: 18.
  • لبه: 12.
  • فایرفاکس: 35.
  • سافاری: 6.

منبع

درست مانند grayscale ، می‌توانید 1 یا 0 به invert() ارسال کنید تا آن را روشن یا خاموش کنید. وقتی روشن است، رنگ های عنصر کاملا معکوس می شوند. همچنین می توانید از مقادیر درصد یا اعشار برای اعمال وارونگی جزئی رنگ ها استفاده کنید. اگر هیچ آرگومانی را به invert() ارسال نکنید، عنصر کاملاً معکوس خواهد شد.

.my-element {
    filter: invert(1);
}

opacity

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

  • کروم: 18.
  • لبه: 12.
  • فایرفاکس: 35.
  • سافاری: 6.

منبع

فیلتر opacity() درست مانند خاصیت opacity کار می کند، جایی که می توانید عدد یا درصدی را برای افزایش یا کاهش opacity ارسال کنید. اگر هیچ آرگومان ارسال نکنید، عنصر به طور کامل قابل مشاهده است.

.my-element {
    filter: opacity(0.3);
}

saturate

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

  • کروم: 18.
  • لبه: 12.
  • فایرفاکس: 35.
  • سافاری: 6.

منبع

فیلتر اشباع بسیار شبیه فیلتر brightness است و همان آرگومان را می پذیرد: عدد یا درصد. به جای افزایش یا کاهش اثر روشنایی، saturate اشباع رنگ را افزایش یا کاهش می دهد.

.my-element {
    filter: saturate(155%);
}

sepia

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

  • کروم: 18.
  • لبه: 12.
  • فایرفاکس: 35.
  • سافاری: 6.

منبع

می‌توانید با این فیلتر یک افکت تون قهوه‌ای اضافه کنید که مانند grayscale() عمل می‌کند. رنگ قهوه ای یک تکنیک چاپ عکاسی است که رنگ های سیاه را به رنگ قهوه ای تبدیل می کند تا گرم شود. شما می توانید یک عدد یا درصد را به عنوان آرگومان برای sepia() ارسال کنید که باعث افزایش یا کاهش اثر می شود. ارسال بدون آرگومان یک اثر کامل سپیا را اضافه می کند (معادل sepia(100%) .

.my-element {
    filter: sepia(70%);
}

hue-rotate

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

  • کروم: 18.
  • لبه: 12.
  • فایرفاکس: 35.
  • سافاری: 6.

منبع

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

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

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

  • کروم: 18.
  • لبه: 12.
  • فایرفاکس: 35.
  • سافاری: 6.

منبع

می‌توانید مانند یک ابزار طراحی، مانند فتوشاپ با drop-shadow ، سایه‌ای که در آغوش کشیده است، اعمال کنید. این سایه روی یک ماسک آلفا اعمال می شود که آن را برای افزودن سایه به یک تصویر برش بسیار مفید می کند. فیلتر drop-shadow یک پارامتر سایه را می گیرد که شامل مقادیر offset-x، offset-y، blur و رنگ است. تقریباً با box-shadow یکسان است، اما کلمه کلیدی inset و مقدار spread پشتیبانی نمی‌شوند.

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

درباره انواع سایه ها در ماژول سایه ها بیشتر بیاموزید.

url

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

  • کروم: 5.
  • لبه: 12.
  • فایرفاکس: 3.
  • سافاری: 6.

منبع

فیلتر url به شما امکان می دهد یک فیلتر SVG را از یک عنصر یا فایل SVG مرتبط اعمال کنید. در اینجا می توانید اطلاعات بیشتری در مورد فیلترهای SVG بخوانید

فیلتر پس زمینه

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

  • کروم: 76.
  • لبه: 79.
  • فایرفاکس: 103.
  • سافاری: 18.

منبع

ویژگی Backdrop-filter همه مقادیر یکسان تابع فیلتر را به عنوان filter می پذیرد. تفاوت بین backdrop-filter و filter در این است که ویژگی backdrop-filter فقط فیلترها را در پس زمینه اعمال می کند، جایی که ویژگی filter آن را برای کل عنصر اعمال می کند.

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

درک خود را بررسی کنید

دانش خود را در مورد فیلترها تست کنید

کدام یک از توابع فیلتر CSS هستند؟

grayscale()
🎉
invert()
🎉
flip()
دوباره امتحان کنید!
multiply()
دوباره امتحان کنید!
blur()
🎉
brightness()
🎉

آیا CSS می تواند از فیلترهای SVG استفاده کند؟

بله
تابع فیلتر url() این را فعال می کند
خیر
دوباره امتحان کنید!