هر چه دنیای وب پیشرفت می‌کند کدها بیشتر جای خروجی‌های نرم‌افزارهای گرافیکی را می‌گیرد. تا چند سال قبل ساختن سایه ممکن نبود و الان Box-Shadow هزار و یک جلوه‌ی زیبا درست می‌کنه. اما زمان می‌برد تا ابزارهای گرافیکی، یکی یکی به کدهای CSS تبدیل شوند. جدا از اینکه زمان زیادی نیاز است تا مرورگرها خود را با این قوانین جدید هماهنگ کنند. این زمان برای مرورگرهایی مانند Chrome یا Firefox چند ماه و برای مرورگری چون IE چند سال باشد. ولی حتی این محدودیت‌ها نیز لذت استفاده از امکانات را از طراحان وب نمی‌گیرد. طراحانی که حاضرند کاربران محدودتری داشته باشند به جای اینکه زیبایی را حذف کنند.

یکی از جلوه‌های زیبای تصاویر جلوه‌های رنگی‌ست که برحسب اتفاق یکی از موارد مورد استفاده‌ی اپلیکیشن Spotify هم هست.

3043547-slide-s-3-spotifys-new-look-signals-its-identity-shift

حالا یک طراح خلاق پیدا شده و تونسته با یک سری تکنیک این افکت‌ها رو برای CSS در استایل کمکی Colofilter.css پیاده کنه که البته پشتیبانی آنچنان خوبی هم نداره. گرچه IE و حتی Edge مرورگرهای لایقی برای این جلوه‌ها نیستن ولی حتی Safari (چه نسخه iOS و چه نسخه دسکتاپ) از بیشتر این افکت‌ها پشتیبانی نمی‌کنه و این خیلی بده. سازگاری این استایل را می‌توانید در صفحات سازگاری ۲ دستور اصلی آن مشاهده کنید:

نصب Colofilter.css

برای استفاده از این استایل کافی‌ست فایل استایل را از گیت‌هاب پروژه دانلود کرده و در مسیر پروژه خود قرار دهید.

حالا فقط کافی‌ست کلاس مورد نظر را برای عکس مورد نظر خود انتخاب کنید:

Screen Shot 1394-10-11 at 11.42.37

وب‌سایت پروژه – پروژه در گیت‌هاب