آشنایی با فیلتر‌های CSS

زمان کوتاهی است که فیلترهای CSS وارد دنیای گرافیگ شده‌اند. این ابزارها در نتیجه روی کار آمدن فایل های SVG¹، به بازار آمدند تا در ایجاد افکت‌های تصویری مختلف بر روی وکتورها به کار گرفته شوند.

امروزه، فیلترهای CSS به SVG ها محدود نمی‌شوند و آنها را می‌توان برای تصاویر، اشیاء، متون و هر آنچه که در صفحات وب وجود دارد، بکار برد.

فیلترها چگونه کار می‌کنند؟

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

روش کار نیز به مانند فیلترهای دوربین عکاسی است. ابتدا لنزهایی را در دسترس داشته و به محیط پیرامون نگاه می‌کنید. اما پیش از گرفتن عکس، فیلترهایی را اعمال کرده و از مدل تغییر یافته موضوع واقعی و موجود عکس می‌گیرید.

آیا فیلترها بر زمان بارگیری(load time) تاثیر می‌گذارند؟

بله، فیلترهای CSS بر زمان بارگذاری تاثیر می‌گذارند، اما این تاثیر با تعداد یا اندازه فیلترهایی که اجرا می‌شوند رابطه‌ای ندارد. اگر فیلتر کوچکی را به برنامه خود اضافه می‌کنید، مثلاً فیلتری که روی یک لوگو اجرا می‌شود، هیچ تاثیری در زمان بارگذاری نمی‌بینید. اما اگر فیلتری اضافه کردید که تمام صفحه وب شما را تغییر دهد (که البته می‌توانید این کار را انجام دهید) یا مجموعه‌ای از فیلترها را روی تمام صفحه اجرا کرده‌اید، در این صورت، سرعت وب سایت شما کاهش خواهد یافت. انتخاب تعداد فیلترهای مورد نیاز و همچنین تاثیر آن بر زمان بارگذاری، به خود شما بستگی دارد.

کاربرد فیلترهای CSS

دستور زبان فیلترها ساده است. مقادیر را به خاصیت فیلتر (filter property) در CSS ، اضافه کنید(برای مثال: اندازه خاکستری gray scale). در مورد مقادیر فیلتر به این موضوع توجه کنید که بیشتر آنها پارامترهای تعریف شده‌ای را به منظور تعیین میزان استعمال و کاربرد فیلتر دارند.

این مقادیر با تعدادی از کدها، معنی دار شده‌اند:

img { -webkit-filter: grayscale(100%); }     1

img { -webkit-filter: grayscale(50%); }     2

img { -webkit-filter: grayscale(10%); }     3

خاصیت فیلتری بالا، مقادیری را برای اندازه خاکستری در خود دارد. درصدها نشان دهنده میزان رنگ خاکستری در تصویر هستند. اگر بخواهید تصویر را به طور کامل سیاه و سفید کنید، پارامترها را روی %100 تنظیم کنید. اگر تنها نیمی از کل تصویر را تغییر می‌دهید، مقدار %50 را انتخاب کرده و ... .

هر چه بیشتر بهتر

امکان استفاده همزمان از چندین فیلتر نیز در این برنامه وجود دارد. آنها به ترتیب cascading در برنامه ظاهر می‌شوند. در مثال بالا، ابتدا تصویر با %100 ، سیاه و سفید شده و سپس opacity به %50 تغییر می‌یابد.

ترتیب اجرا از دو جهت اهمیت دارد: اولاً زمانی که فیلتر‌های پیچیده نظیر saturation یا hue rotation را بکار می‌برید و ثانیاً زمانی که از دو یا تعداد بیشتری از فیلترها به صورت همزمان استفاده می‌کنید. توجه کنید که استفاده از کاما ضرورت ندارد.

1     {(img { -webkit-filter: grayscale(100%) opacity(50%

فیلتر Gray Scale

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

فیلتر  Sepia

این افکت قدیمی عکاسی به سادگی در browser شما قابل انجام است. به مانند فیلتر Gray Scale مقادیر آن بین 0 تا 100 تعریف شده است و کافی است مقدار افکت مورد نظر خود را در آن اجرا کنید.

1	{(img { -webkit-filter: sepia(100%

فیلتر Saturation

با استفاده از این تابع، رنگ‌ها روشن تر می‌شوند. آنچه که در مورد این تابع جالب بوده و باید به آن توجه شود، تعیین مقادیر %100 تا %1000 است که رنگ‌های واقعاً اغراق آمیزی را با افکت‌های جالب ایجاد می‌کند.

1	{(img { -webkit-filter: saturate(1000%

فیلتر Blur

این فیلتر را به مانند کارکرد Gaussian blur  در Adobe Photoshop در نظر آورید. تنظیم مقدار پیکسل میزان تاری عنصر مورد نظر را تعریف می‌کند. مقدار پیکسل بیشتر، شدت تاری را منتج خواهد شد.

1	{(img { -webkit-filter: blur(5px

فیلتر Heu-rotate

این فیلتر تا حدودی با فیلترهای قبلی تفاوت دارد، چرا که از درجه (degree) به منظور تغییر رنگ یک عنصر استفاده می‌کند. در این محیط دایره رنگی به مانند همه دایره‌ها، از 0 درجه شروع و در 360 درجه خاتمه می‌یابد. با فیلتر Heu-rotate، کافی است نقطه‌ای را در دایره رنگی انتخاب کنید تا میزان چرخش شما برای رسیدن به آن نقطه، مشخص شود.

1 2 3

{(img { -webkit-filter: hue-rotate(45deg) {(img { -webkit-filter: hue-rotate(90deg) {(img { -webkit-filter: hue-rotate(180deg)

فیلتر Invert

Invert فیلتر جالبی است که در نگاه اول ممکن است مرموز و خارق العاده به نظر آید، اما در واقع این فیلتر، رنگ‌های عناصر موجود را برعکس می‌کند، بنابراین سیاه به سفید، قرمز به سبز و ... تبدیل خواهد شد. همچنین تا حدی نیز با فیلتر heu-rotate ارتباط دارد، اما در اصل کاملاً با هم متفاوت هستند. مقادیر مرتبط با این فیلتر بر اساس درصد، طراحی شده و صفر درصد به معنای عدم تغییر و %100 به معنای برعکس کردن کامل همه رنگ‌ها خواهد بود.

1	{(img { -webkit-filter: invert(100%

فیلتر Contrast

وقتی هیچ کنتراستی در تصویر وجود ندارد، همه تصویر به صورت تک رنگ (غالباً خاکستری تیره) دیده می‌شود. فیلتر کنتراست تا %100 هیچ تغییری را اعمال نمی‌کند، بنابراین میزان پیش فرض عناصر، همین مقدار است. برای تصویر بدون کنتراست فیلتر را روی %5 تنظیم کنید. اگر به دنبال کنتراست زیاد هستید، یا می‌خواهید همه چیز به طور کاملاً واضحی سیاه و سفید باشد، کنتراست را روی مقداری نظیر %2500 تنظیم کنید. البته درصدهای زیاد در نهایت، تصاویر اغراق آمیزی پدید می‌آورند.

1 2	{(img { -webkit-filter: contrast(25% {(img { -webkit-filter: contrast(2500%

 

فیلتر Brightness

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

1 2	img { -webkit-filter: brightness(50%); } img { -webkit-filter: brightness(150%); }

فیلتر Drop-shadow

مطمئناً می‌خواهید بدانید که، با وجود خاصیت‌هایی نظیر box shadow و text shadow چرا از این فیلتر استفاده می‌کنیم. این خاصیت‌ها برای متن‌ها و باکس‌ها خوب هستند، اما برای تصاویر و اشکال غیر عادی نظیر PNG یک زرافه یا مثلاً یک پنج ضلعی، فیلتر Drop-shadow است که به کار می‌آید.

این فیلتر با گرفتن تصویر، ساخت یک کپی از آن، تغییر رنگ کامل بر اساس افست و رنگ تعیین شده از سوی شما عمل می‌کند. همانطور که در دستور زیر می‌بینید، نیازی به کاما در دستور نیست. اولین مقدار، بعد x ،دومین مقدار بعد y ،سومین مقدار میزان تاری و در نهایت آخرین مقدار، رنگ تصویر را معین می‌کند.

1	{(img { -webkit-filter: drop-shadow(5px 5px 5px red

موارد و مثال‌های آورده شده در این مجموعه، همه‌ی فیلترهای CSS در دسترس نبوده و در واقع معرفی اجمالی از امکانات این فیلتر و کاربردهای آن می‌باشد. به نظر این فیلترها واقعاً شگفت انگیزاند و امکان ویرایش عناصر و تصاویر را بدون نیاز به نرم افزارهای اضافی و به صورت ماهرانه در browser شما فراهم می‌آورند.

 

1. Scalable Vector Graphics

منبع:designmodo.com