فیلترها در CSS
انیمیشن خط زمانی ساخت. Transform گفت پیکسل‌ها کجا بنشینند. فیلتر می‌گوید همان پیکسل‌ها چطور دیده شوند: پس‌زمینهٔ مودال کمی مات، تصویر خاکستری که با هاور رنگ بگیرد، عکس روشن‌تر با contrast ملایم — بدون جابه‌جایی جای جعبه در لایه‌بندی.
filter چه کار می‌کند؟
ویژگی filter یک یا چند اثر تصویری روی خروجی رسم‌شدهٔ عنصر می‌گذارد (معمولاً همراه فرزندان، به‌صورت یک گروه). عرض و ارتفاع و جریان سند عوض نمی‌شود؛ فقط ظاهر پیکسل‌ها تغییر می‌کند. با filter: none اثرها پاک می‌شوند (همین مقدار اولیه است).
چند تابع را در یک مقدار filter، با فاصله، پشت سر هم می‌نویسید — شبیه زنجیرهٔ transform، اما اینجا ابزارها بصری‌اند نه فضایی: filter: brightness(1.1) contrast(1.05) saturate(1.2);
توابع رایج فیلتر در یک نگاه
📊 توابع رایج filter در CSS
| تابع | کار تقریبی |
|---|---|
blur(radius) |
نرم کردن لبه‌ها / حس مات (px و طول‌های مشابه) |
brightness(%) |
روشن‌تر یا تیره‌تر (1 یا 100% = بدون تغییر) |
contrast(%) |
تندتر یا ملایم‌تر کردن کنتراست |
grayscale(%) |
گرفتن رنگ (1 = کاملاً خاکستری) |
saturate(%) |
غلیظ‌تر یا ضعیف‌تر کردن اشباع رنگ |
hue-rotate(angle) |
چرخاندن فام روی چرخهٔ رنگ |
opacity(%) |
محو کردن نتیجهٔ فیلتر (نزدیک به opacity، ولی یکی نیستند) |
sepia(%) / invert(%) |
ته رنگ گرم قدیمی / معکوس کردن تُن‌ها |
drop-shadow(…) |
سایهٔ هم‌شکل با آلفا (آیکون و لبه‌های شفاف) |
none |
برداشتن فیلترها |
هم درصد و هم عدد ساده معمولاً کار می‌کنند (grayscale(1) ≈ grayscale(100%)). در یک پروژه یکی را انتخاب کنید و یکدست بمانید.
کارت خاکستری که با هاور بیدار می‌شود
الگوی آشنای گالری: پیش‌فرض بی‌رنگ، با هاور رنگ کامل. یک transition کوتاه روی filter حس تعمد می‌دهد — حرکت از درس‌های قبل، ظاهر از این درس.
.thumb {
filter: grayscale(1);
transition: filter 0.25s ease;
}
.thumb:hover,
.thumb:focus-visible {
filter: grayscale(0);
}
grayscale(0) یعنی رنگ کامل. transition روی filter را برای تغییرهای سبک نگه دارید؛ انیمیت کردن blur سنگین روی عکس بزرگ گران تمام می‌شود.
blur ملایم برای تأکید
blur() عنصر را نرم می‌کند. شعاع معقول روی لایهٔ پس‌زمینه یا پوشش بگذارید — نه روی کل body — تا متن خوانا بماند.
.modal-scrub {
filter: blur(6px);
transform: scale(1.02);
}
.modal-dialog {
/* خود دیالوگ تیز بماند — اینجا فیلتر نگذارید */
filter: none;
}
اگر جد بزرگ را blur کنید، متن داخلش هم مات می‌شود. وقتی پیش‌زمینه باید واضح بماند، لایهٔ پس‌زمینه را جدا کنید (یا سراغ backdrop-filter بروید).
روشن و کنتراست برای عکس
گاهی کافی است بدون ادیتور، کمی grade به عکس محصول یا هیرو بدهید.
.hero-photo {
display: block;
width: 100%;
height: auto;
filter: brightness(1.08) contrast(1.06);
}
.hero-photo.is-muted {
filter: brightness(0.85) contrast(0.95) saturate(0.8);
}
کمی بالاتر از 1 روشن‌تر یا تندتر می‌کند؛ کمتر از 1 عقب می‌کشد. حرکت کوچک = پرداخت؛ پرش بزرگ = جعلی.
چند فیلتر روی هم
در یک اعلامیه می‌توانید رنگ، اشباع و نرمی را ترکیب کنید. در پشته‌های پیچیده ترتیب مهم می‌شود — از چپ به راست بنویسید و در مرورگر ببینید.
.sticker {
filter: saturate(1.35) hue-rotate(12deg) blur(0.3px);
}
.sticker.is-print {
filter: grayscale(0.15) contrast(1.1);
}
با یکی‌دو تابع شروع کنید. فقط وقتی طرح واقعاً لازم دارد اضافه کنید — هر فیلتر اضافه روی سطح بزرگ، کار GPU بیشتر می‌خواهد.
drop-shadow() در برابر box-shadow
box-shadow دور جعبهٔ مرزی می‌چرخد. drop-shadow() از سیلوئت آلفا پیروی می‌کند — برای PNG شفاف و آیکونی که سایه باید شکل گلیف را بگیرد، نه یک مستطیل.
.icon-glow {
width: 2.5rem;
height: 2.5rem;
filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.35));
}
.icon-glow:hover {
filter: drop-shadow(0 6px 10px rgba(37, 99, 235, 0.45));
}
drop-shadow() مثل box-shadow از inset پشتیبانی نمی‌کند. برای فرورفتگی کارت، همان box-shadow درس Effects را نگه دارید.
backdrop-filter — مات کردن آنچه پشت است
backdrop-filter روی محتوایی اثر می‌گذارد که از پشت یک عنصر نیمه‌شفاف دیده می‌شود (شیشهٔ مات). پس‌زمینه باید کمی شفاف باشد؛ وگرنه چیزی برای نمونه‌برداری نیست.
ایدهٔ نمونه: روی هدر چسبان بالای هیرو شلوغ بنویسید background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px);. مرورگرهای مدرن پشتیبانی خوبی دارند؛ اگر blur حذف شد، یک پس‌زمینهٔ توپر به‌عنوان fallback بگذارید.
opacity داخل فیلتر و ویژگی opacity
filter: opacity(0.5) نتیجهٔ فیلتر را محو می‌کند. ویژگی opacity خود عنصر را محو می‌کند و اغلب گروه stacking و ترکیب فرزندان را هم عوض می‌کند. وقتی «کل کنترل با بچه‌ها با هم محو شوند» مد نظرتان است، معمولاً همان opacity واضح‌تر است. opacity() داخل فیلتر وقتی معنا دارد که بخشی از پشتهٔ فیلتر کنار blur یا grade باشد.
خودتان تمرین کنید
- روی تصویر کارت
filter: grayscale(1)بگذارید؛ با:hoverبهgrayscale(0)برگردید وtransition: filter 0.2s easeاضافه کنید. - لایهٔ پس‌زمینه را با
blur(8px)نرم کنید؛ متن پیش‌زمینه بدون فیلتر بماند. - به عکس
brightness(1.1) contrast(1.05)بدهید؛ بعد هر دو را آرام به سمت1برگردانید تا طبیعی شود. - روی استیکر
saturate(1.4) hue-rotate(20deg)بگذارید؛ یکی را بردارید و مقایسه کنید. - آیکون PNG شفاف را با
drop-shadow(...)سایه بدهید؛ همان را باbox-shadowروی جعبهٔ مربعی هم ببینید. - اختیاری: نوار شیشه‌ای با
backgroundنیمه‌شفاف وbackdrop-filter: blur(12px).
اشتباه‌های رایج
blur()قوی روی بخش بزرگی از صفحه که متن خواندنی دارد- انتظار
insetازdrop-shadow()مثلbox-shadow - استفاده از
filter: opacity()وقتی یکopacityساده روی عنصر کافی و روشن‌تر است - انیمیت فیلتر سنگین روی عکس بزرگ در هر فریم اسکرول بدون فکر به کارایی
- گذاشتن
backdrop-filterروی پس‌زمینهٔ کاملاً مات — چیزی از پشت دیده نمی‌شود، پس شیشه ظاهر نمی‌شود
جمع‌بندی
filterظاهر پیکسل‌های رسم‌شده را عوض می‌کند؛ جریان لایه‌بندی سر جایش می‌ماند- blur، brightness، contrast، grayscale، saturate و بقیه را در یک مقدار زنجیره کنید
- برای سایهٔ شکل‌دار از آلفا سراغ
drop-shadow()بروید؛ برای ارتفاع جعبه همانbox-shadow backdrop-filterآنچه از پشت لایهٔ نیمه‌شفاف دیده می‌شود را مات می‌کند- اینجا Effects & Motion تمام می‌شود؛ ماژول بعدی Modern Toolkit است — با متغیرهای CSS
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود