فیلترها

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

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

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

خاصیت filter

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

blur

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

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

brightness

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

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

contrast

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

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

grayscale

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

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

invert

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

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

opacity

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

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

saturate

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

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

sepia

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

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

hue-rotate

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

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

drop-shadow

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

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

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

url

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

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

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

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

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

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