فیلترهای تصویر در CSS (Image Filters)
در این درس با «فیلترهای تصویر (Image Filters)» در CSS آشنا می شوید. ویژگی filter افکت های بصری مانند تارشدگی و اشباع رنگ را روی عناصر اعمال می کند و بدون خروج از صفحه، تصویر را دستکاری می کند.
فیلترهای تصویر در CSS
درون ویژگی filter می توانید این توابع را به کار ببرید:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()
نکته: مقداردهی درصدی و اعشاری هر دو پشتیبانی می شود؛ 1 معادل 100٪ است.
تابع blur()
تابع «تارشدگی (blur)» روی عنصر اعمال می شود؛ هرچه مقدار بیشتر باشد، تاری بیشتر است. مقدار پیش فرض 0 است.
#img1 { filter: blur(2px); }
#img2 { filter: blur(6px); }تابع brightness()
«روشنایی (brightness)» را تنظیم می کند؛ 100٪ مقدار اصلی است. زیر 100٪ تیره تر و بالای آن روشن تر می شود.
#img1 { filter: brightness(150%); }
#img2 { filter: brightness(50%); }تابع contrast()
«کنتراست (contrast)» را تغییر می دهد؛ 100٪ مقدار اصلی است. 0٪ تصویر را کاملاً خاکستری می کند.
#img1 { filter: contrast(150%); }
#img2 { filter: contrast(50%); }تابع drop-shadow()
افکت «سایه بیرونی (drop-shadow)» را ایجاد می کند و برای تصاویر بسیار کاربردی است.
#img1 { filter: drop-shadow(8px 8px 10px gray); }
#img2 { filter: drop-shadow(10px 10px 7px lightblue); }تابع grayscale()
تصویر را سیاه وسفید می کند؛ 1 یا 100٪ یعنی خاکستری کامل و 0 یعنی بدون تغییر.
#img1 { filter: grayscale(1); }
#img2 { filter: grayscale(60%); }
#img3 { filter: grayscale(0.4); }تابع hue-rotate()
چرخش «فام (Hue)» را برحسب درجه انجام می دهد؛ 0deg تصویر اصلی است و مقادیر مثبت یا منفی رنگ ها را می چرخانند.
#img1 { filter: hue-rotate(200deg); }
#img2 { filter: hue-rotate(90deg); }
#img3 { filter: hue-rotate(-90deg); }تابع invert()
رنگ ها را «معکوس (invert)» می کند؛ 100٪ معکوس کامل و 0٪ بدون اثر است.
#img1 { filter: invert(0.3); }
#img2 { filter: invert(70%); }
#img3 { filter: invert(100%); }تابع opacity()
«شفافیت (opacity)» را تعیین می کند؛ 1 یا 100٪ یعنی بدون تغییر و 0 یعنی کاملاً شفاف.
#img1 { filter: opacity(80%); }
#img2 { filter: opacity(50%); }
#img3 { filter: opacity(0.2); }تابع saturate()
«اشباع رنگ (saturate)» را تنظیم می کند؛ 0٪ یعنی بی رنگ و 200٪ یعنی فوق اشباع.
#img1 { filter: saturate(0); }
#img2 { filter: saturate(100%); }
#img3 { filter: saturate(200%); }تابع sepia()
افکت «سپیا (sepia)» با تون قهوه ای/زرد ایجاد می کند؛ 1 یا 100٪ یعنی سپیای کامل.
#img1 { filter: sepia(1); }
#img2 { filter: sepia(60%); }
#img3 { filter: sepia(0.4); }ترکیب چند فیلتر
می توانید چند تابع را زنجیره کنید؛ ترتیب اهمیت دارد و نتیجه نهایی را تغییر می دهد.
.card img { filter: grayscale(0.3) contrast(120%) drop-shadow(6px 6px 12px rgba(0,0,0,0.25)); }نکته: برای ساخت پیش نمایش گالری و افکت های شناور، ابتدا تصویر را مرکزچین کنید و سپس «فیلترهای تصویر» را بیفزایید. همچنین به صفحه استایل دهی تصویر سر بزنید.
برای دسترسی سریع: فیلترهای تصویر.