استارت‌آپ و کارآفرینی

تغییرات شگفت‌انگیز در تصاویر فقط با یک خط css

بسیاری از ما برای ایجاد تغییرات در تصاویر از نرم افزار‌های مثل فتوشاپ استفاده می‌کنیم. تغییرات و کارهای جالب و شگفت انگیری میشه با اکشن‌های فتوشاپ روی تصاویر انجام داد. اما نکته‌ایی که اینجا وجود داره اینه که میشه با css هم میشه تصاویر رو تغییر داد. برای مثال کمی نور تصور رو بالا ببری یا بعلکس کمی تیره‌ترش کنی. در این پست ما ۱۵ تا از این حالت‌های ترکیبی رو آوردیم که می‌تونید بکار ببرید و لذت ببرید. این نکته رو اشاره کنم که شما میتونید n+1 حالت ایجاد کنید و فقط این ۱۵ حالت نوعی سبک هست نه ۱۵ نوع تغییر مطلق.

حالا چطور میتونیم فقط با یک خط css چنین چیزی رو بسازیم ؟

فقط کافیه کد زیر رو بکار ببرید 🙂

code

background-blend-mode: normal;
background-blend-mode: darken;
background-blend-mode: soft-burn;

تمامی ۱۵ سبک هم به شرح زیر میباشد:

Formal syntax: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

برای اطلاع دقیق از نحوه پشتیبانی مرورگرها ازین ویژگی css هم میتونید سری به Caniuse.com بزنید.

منبع: +

2 نظرات
  1. محمد می گوید

    خیلی جالب بود این امکان تو چه مرورگر هایی پشتیبانی میشه؟

    راستی کتاب مورد علاقت چیه؟ [من الباب باز کردن سر حرف گفتم 🙂 ]

    1. بنیامین نجفی می گوید

      سلام محمد
      ie و سافاری ۷به قبل ،اوپرا مینی پشتیبانی نمیکنن.
      در مورد کتاب هم توی بلاگم جایِ بهترییِ برای گفتگو : )

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.