فیلترهای CSS ابزاری بسیار قدرتمند و مفید است که به ما اجازه می دهد تا روی تعدادی از المنت های مان افکت های بصری زیبایی را ایجاد کنیم. این فیلترها برای ماوس هاور بسیار عالی هستند.
فیلترها برای ما متدی را می سازند که با آن می توان یک DOM ساده را رندر کرد. در حقیقت آنها به المنت دسترسی پیدا می کنند و شفافیت، کنتراست، رنگ و دیگر المان ها را تغییر می دهند.
ساخت فیلترها
زمانی که به فیلتر تصاویر فکر می کنم اولین چیزی که به ذهنم خطور می کند فیلتر سیاه و سفید است؛ یا مثلا تبدیل یک تصویر تمام رنگ به تصویری که صرفا در چندین رنگ خلاصه می شود. اینها چیزهایی هستند که ما در این مقاله به دنبالشان هستیم.
برای استفاده از این فیلترها ما تنها نیاز به قطعه کد زیر داریم:
img {
-webkit-filter: grayscale(1);
}
همانطور که مشاهده می کنید در این کد از پیشوند Webkit استفاده شده است. -باید بگویم که فیلترها را تعداد کمی از مرورگرها پشتیبانی می کند- بعد از آن از اسم filter استفاده می کنید و پس از آن نام فیلتر مورد نظر همراه با مقدار آن تعیین می شود.
در این مثال من از مقدار ۱ استفاده کرده ام که به معنای رنگ سیاه و سفید است اما می شود از مقدار 0.50 نیز استفاده کرد که تلفیقی از رنگ سیاه و سفید همراه با رنگ های نامنظم است.
یکی از چیزهای بسیار زیبا برای اضافه کردن روی تصاویر استفاده از کمی blur است که می توانید به صورت زیر آن را اضافه کنید:
img {
-webkit-filter: grayscale(0.5) blur(2px);
}
همانطور که مشاهده می کنید اضافه کردن فیلتر جدید بسیار ساده خواهد بود. اگر خروجی این موضوع را در مرورگر مشاهده کنید خواهید دید که هر دو فیلتر به خوبی اعمال شده اند.
اگر بخواهید فیلترهای مخصوص فوتوشاپ را در صفحه خود پیاده کنید، CSS این قابلیت را باز به شما می دهد. بیاید با contrast شروع کنیم. برای اعمال کنتراست روی تصاویر‌تان می توانید به شیوه زیر عمل کنید:
img {
-webkit-filter: contrast(300%);
}
مقدار کنتراست ۱۰۰ درصد در حقیقت نقطه شروع به حساب می آید، یعنی جایی که هیچ چیز تغییر نخواهد کرد و در حالت عادی خود باقی خواهد ماند. از ۱۰۰ درصد به پایین برای مثال ۵۰ درصد کنتراست و وضوح تصویر کاهش پیدا می کند. اما از ۱۰۰ به بالا برای مثال ۳۰۰ درصد باعث می شود کنتراست تصویر افزایش پیدا کند.
یکی دیگر از فیلترهایی که در دست ما قرار دارد hue-rotate است. این ابزار بسیار شبیه به پنل Hue/Saturation در فوتوشاپ کار می کند.
img {
-webkit-filter: hue-rotate(180deg);
}
برای این فیلتر ما نیاز داریم تا از واحد درجه استفاده کنیم. استفاده از این ابزار در ابتدا ممکن است کمی گیج کننده به نظر برسد اما در حقیقت فلسفه آن بسیار ساده تر از آن است که فکر می کنید. در حقیقت این ابزار در هر پیکسل از تصویر رنگ را انتخاب می کند و مطابق با مقدار، ۱۸۰ درجه روی چرخه رنگ ها می چرخد و رنگ پیدا شده را اعمال می کند. برای مثال اگر یک پیکسل از تصویر شما دارای رنگ آبی باشد ۱۸۰ درجه چرخش باعث می شود رنگ به نارنجی تبدیل گردد.
یکی دیگر از افکت هایی که بسیار در فوتوشاپ نیز استفاده می شود saturate است. استفاده از این دستور همراه با مقدار بیشتر از ۱۰۰درصد باعث می شود وضوح تصویر بیشتر شود، نقطه شروع در حالت عادی دستور برابر با ۱۰۰ درصد است.
img {
-webkit-filter: saturate(300%);
}
یکی دیگر از فیلترهایی که در جعبه ما وجود دارد sepia است که مانند فیلتر grayscale عمل می کند. با این تفاوت که ورودی این دستور تنها در بین ۱ و ۰ است.
img {
-webkit-filter: sepia(0.5);
}
یکی دیگر از موارد بسیار پر کاربرد opacity است که در بخش فیلترها نیز کاربر دارد. میزان ورودی این دستور نیز تنها شامل اعداد بین ۱ و ۰ است.
img {
-webkit-filter: opacity(0.8);
}
فیلتر بعدی invert است که در حقیقت مانند یک تلنگر است به رنگ های داخل یک تصویر یا المنت. میزان صد در صد این فیلتر باعث می شود تصویر شما حالت نگاتیو به خود بگیرد. رنج ورودی این دستور بین 0 و 100 است.
img {
-webkit-filter: invert(100%);
}
یکی دیگر از فیلتر های پرکاربر فیلتر drop-shadow است. این دستور کاملا فانکشنال است و تقریبا همان خروجی را خواهد داشت که با استفاده از دستور box-shadow پیاده سازی می کنید. البته یکی از تفاوت های کلیدی این دستور با دستور box-shadow این است که موقع سایه انداختن روی یک تصویر ترانسپارنت از نوع PNG سایه بجای قرارگیری روی کلیه فایل روی تک تک پیکسل های فایل می افتد.
img {
-webkit-filter: drop-shadow(10px 10px 15px #000);
}
در پایان یکی از بهترین فیلترها را معرفی می کنیم که احتمال زیاد دارد از آن در فوتوشاپ به وفور استفاده کرده باشید. فیلتر brightness. این فیلتر در حالت کلی مقدار ۱۰۰درصد را به عنوان شروع در نظر می گیرد. به این مفهوم که اگر شما مقدار را روی ۱۰۰ درصد قرار دهید هیچ چیزی در تصویر تغییر نمی کند اما اگر این میزان را روی 0 قرار دهید تصویر یا المنت به کاملی سیاه می شود. از طرفی دیگر اگر میزان آن را برابر با ۲۰۰ درصد قرار دهید المنت شما بسیار روشن خواهد شد.
img {
-webkit-filter: brightness(200%);
}
در پایان
اگر دوست دارید تا تمام این فیلترها را با دقت بیشتری بررسی کنید می توانید به پروژه ای که در این آدرس قرار گرفته سری بزنید.
فیلترهای CSS ویژگی بسیار قدرتمند و مفیدی هستند که به شما اجازه می دهند بدون استفاده از المان های گرافیکی اضافی از جمله عکس، تنها با استفاده از سی‌اس‌اس به هدف خود برسید. استفاده از این ویژگی در حالت جواب دادن به تعاملات کاربری در وبسایت و رویدادهای بصری بسیار کارآمد و مفید خواهد بود.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید