فیلترها

پادکست 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
  • 17
  • 103
  • 9

منبع

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

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

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

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

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

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

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

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