اعمال افکت بر روی تصاویر در CSS

اعمال افکت بر روی تصاویر در CSS

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

کافی است با تعدادی از ویژگی های جدید سی اس اس آشنا باشیم و با خلاقیت کافی می توانیم افکت مخصوص به خودمان را نیز طراحی کنیم.

یک طراح وب خوش سلیقه به نام bennettfeely@ در سایت خود پروژه ای را معرفی کرد که در آن توسط سی اس اس به تصاویر، افکت های بسیار قشنگی را اعمال کرده بود. این افکت ها عموما از طریق مفاهیم گرادینت، جلوه های آمیختگی و فیلترها ساخته شده اند.

معرفی ابزار

بعد از دیدن این افکت ها تصمیم به ساخت ابزاری گرفتم تا بتوانیم بهتر و ساده تر از آنها استفاده کنیم که این ابزار در آدرس زیر در دسترس می باشد:

با استفاده از این ابزار می توانیم:

  • تصویری دلخواه بارگذاری کنیم
  • افکت های مختلف را بر روی آن امتحان کنیم
  • خروجی نهایی را دانلود کنیم

استفاده از دستور Support@

یکی از مواردی که bennettfeely@ خیلی خوب از آن استفاده کرده است دستور support@ است.

کد زیر را مشاهده کنید:


.selective-color-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: brightness(3)) and (mix-blend-mode: color) {
  .selective-color-effect {
    position: relative;
  }
  .selective-color-effect:before, .selective-color-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    background-color: red;
    background-blend-mode: screen;
    mix-blend-mode: color;
    filter: brightness(3);
  }
}

در این کد دیده می شود که برای اعمال این افکت از شبه عناصر after و before استفاده شده است.

با توجه به اینکه ویژگی های mix-blend-mode و filter در تمام مرورگرها پشتیبانی نمی شوند این سوال مطرح می شود که با توجه به حضور شبه عناصر روی این عنصر در آن مرورگرها چه بلایی سر تصویر خواهد آمد؟

در این نمونه با توجه به اینکه پس زمینه شبه عناصر قرمز است در مرورگرهایی که این ویژگی ها را پشتیبانی نمی کنند تصویر قابل مشاهده نیست چرا که رنگ قرمزی بر روی آن قرار داد.

اینجا است که می توان از قدرت دستور support@ بهره برد. و همان اول به مرورگر گفت که اگر این این ویژگی ها را پشتیبانی می کنی دستورات زیر را بر روی عنصر اعمال کن و الا دستورات زیر را نادیده بگیر.

به این صورت تصویر ما در مرورگرهای مدرن با افکت نمایش داده می شود و در مرورگرهای قدیمی بدون افکت ترسیم خواهد شد.

چون افکت روی تصویر یک گزینه حیاتی برای تصویر و صفحه ما نیست این تکنیک بهترین انتخاب است. در ضمن استفاده از این روش یک گوشه از مفهوم Progressive Enhancement می باشد. یعنی که اول محتوای اصلی را به کاربر برسانیم حال اگر شد قدم به قدم کار را بهبود ببخشیم.

شما هم می توانید در این پروژه مشارکت کنید وافکت های جدید بسازید.

2 دیدگاه برای “اعمال افکت بر روی تصاویر در CSS

  1. سلام خسته نباشین. خیلی مطلب جالبی بود. فقط یه سوال. این افکت رو روی تصاویر با tag img هم میشه اعمال کرد. یا فقط برای css background image هست؟

    1. سلام.

      من همه افکت ها الان طرز ساختش توی ذهنم نیست. چک کنید اگر از شبه عنصرها استفاده نشده توی ساخت افکت و از پس زمینه هم استفاده نشده آره می تونید.

      ولی فک نمی کنم هیچکدوم این چیزی که من گفتم رو داشته باشن. البته باز هم میشه عنصر روی عنصر گذاشت و بعضی از افکت ها رو ساخت ولی نمی ارزه.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *