تا حالا پیش اومده که لوگوی سایتت با پس‌زمینه قاطی بشه و درست دیده نشه؟ مثلاً یه لوگوی تیره روی بک‌گراند مشکی یا یه تصویر روشن روی پس‌زمینه‌ی سفید! خیلی اذیت‌کننده‌ست، مخصوصاً وقتی بخوای سریع پروژه‌تو تحویل بدی و فرصت ادیت تصویر نداری اما خبر خوب اینه که با یه خط کد CSS می‌تونی این مشکل رو حل کنی؛ نه فتوشاپ می‌خوای، نه نیاز به ویرایش عکس!
1. تیره کردن تصویر
برای اینکه تصویر یا لوگو رو مشکی (یا اصطلاحاً تیره) کنی، کافیه این کد رو به CSS اضافه کنی:
این کد نور تصویر رو صفر می‌کنه، و نتیجه‌ش میشه یه نسخه‌ی کاملاً تیره از همون تصویر. مخصوصاً برای لوگوهای PNG خیلی کاربردیه.
2. سفید کردن تصویر
حالا اگه بخوای تصویرت سفید بشه، یعنی دقیقاً برعکس حالت بالا، از این ترکیب استفاده کن:
اینجا اول تصویر رو تیره کردیم، بعد با invert(1) همه رنگ‌ها رو معکوس کردیم. نتیجه؟ یه لوگوی سفید و تمیز، مناسب پس‌زمینه‌های تیره!
3. دادن رنگ دلخواه به تصویر
اگه بخوای رنگ‌های خاص مثل قرمز، آبی یا هر رنگ دلخواهی به تصویرت بدی، این کد به‌دردت می‌خوره:
تو این حالت، تصویرت مشکی میشه و رنگ پس‌زمینه با blend mode ترکیب میشه و تصویر، رنگ جدید می‌گیره
این ترفندها کجا کاربرد دارند؟
- وقتی تصویرت شفافه و با بک‌گراند سایت ترکیب میشه
- وقتی می‌خوای سریع تغییر رنگ بدی بدون ویرایش فایل اصلی
- وقتی داری با Elementor یا صفحه‌سازها کار می‌کنی و دنبال روش ساده
سخن پایانی
فقط یک خط کد، بدون نرم‌افزار به‌جای صرف زمان برای ویرایش تصاویر، از فیلترهای CSS استفاده کن و طراحی‌تو هوشمندتر جلو ببر.
این ترفند ساده ولی کاربردی، می‌تونه ظاهر سایتتو حرفه‌ای‌تر و خلاقانه‌تر کنه.
