پادکست 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 اضافه کنید. امکان اعمال فیلترها فقط در پس زمینه این امکان را فراهم می کند.
درک خود را بررسی کنید
دانش خود را در مورد فیلترها تست کنید
کدام یک از توابع فیلتر CSS هستند؟
flip()
blur()
grayscale()
multiply()
invert()
brightness()
آیا CSS می تواند از فیلترهای SVG استفاده کند؟