اعمال افکت بر روی تصاویر در 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 می باشد. یعنی که اول محتوای اصلی را به کاربر برسانیم حال اگر شد قدم به قدم کار را بهبود ببخشیم.