آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 8) : ویژگی background-blend-mode - قسمت 2

- visibility ۰ mode_comment

css3 attributes

همونطور که دیدید در جلسه قبل تعدادی از مقادیر ویژگی background-blend-mode رو با هم بررسی کردیم و برای هر کدوم از اونا هم مثالی رو قرار دادیم تا بهتر با اونا آشنا بشید. در اینجا میخایم این مقادیر رو ادامه بدیم.

  • color-dodge : در این حالت برای هر پیکسل اتفاقی بصورت زیر میوفته. رنگ پس زمینه بر رنگ معکوس شده تصویر در اون پیکسل، تقسیم میشه. این مورد شباهت هایی با مقدار screen دارد. خروجی این مقدار بصورت زیر هست:background-blend-mode-7
  • color-burn : در این حالت برای هر پیکسل اتفاقی بصورت زیر میوفته. رنگ پس زمینه در ابتدا معکوس میشه، تقسیم بر رنگ تصویر میشه و در نهایت هم دوباره معکوس میشه. این مورد شباهتهایی با مقدار multiply دارد. خروجی بصورت زیر میشه:background-blend-mode-8
  • hard-light : در این حالت برای هر پیکسل اتفاقی بصورت زیر میوفته. اگر رنگ تصویر روشنتر از رنگ پس زمینه باشه، نتیجه بصورت multiply در میاد و در غیر اینصورت و اگر تیره تر باشه، نتیجه بصورت screen در میاد. خروجی بصورت زیر میشه:background-blend-mode-9
  • soft-light : نتیجه ای که در این حالت به دست میاد شبیه به hard-light هست با این تفاوت که مقداری ملایم یا soft تر هست و مثل این میمونه که یک منبع نور پراکنده بر روی تصویر قرار گرفته. خروجی در این حالت بصورت زیر هست:background-blend-mode-10
  • difference : در این حالت برای هر پیکسل اتفاقی بصورت زیر میوفته. در هر پیکسل رنگ تصویر و پس زمینه با هم مقایسه میشه و اونی که تیره تر هست، از رنگ روشن تر کم میشه و خروجی بعنوان رنگ پیکسل در نظر گرفته میشه. با اینکار کنتراست تصویر خیلی زیاد میشه. خروجی بصورت زیر هست:background-blend-mode-11
  • exclusion : خروجی این مقدار شبیه به مقدار difference هست با این تفاوت که تصویر نهایی کنتراست کمتری داره. خروجی بصورت زیر هست:background-blend-mode-12
  • hue : همونطور که میدونین یک سیستم رنگدهی بنام hsl وجود داره که مخفف کلمات Hue و Saturation و Lightness هست. اگر مقدار ویژگی رو برابر با hue قرار بدیم، باعث میشه که تصویر نهایی hue خودش رو از تصویر پس زمینه بگیره و مقادیر Saturation و Lightness رو هم از رنگ پس زمینه میگیره. پس خروجی بصورت زیر میشه:background-blend-mode-13
  • saturation : در این حالت مقدار saturation از تصویر پس زمینه و مقادیر hue و lightness از رنگ پس زمینه گرفته میشه و با هم ترکیب میشن. خروجی بصورت زیر هست:background-blend-mode-14
  • color : در این حالت مقدار hue و saturation از تصویر پس زمینه انتخاب میشه و مقدار lightness یا luminosity از رنگ پس زمینه انتخاب میشه و با هم ادغام میشن. خروجی بصورت زیر هست:background-blend-mode-15
  • luminosity : در این حالت هم luminosity یا lightness تصویر پس زمینه با hue و saturation رنگ پس زمینه ترکیب میشه و خروجی رو درست میکنن. خروجی بصورت زیر میشه:background-blend-mode-16

دیدید که چقدر زیبا میتونیم با استفاده از ویژگی background-blend-mode، رنگهای پس زمینه رو به روشهای مختلف ترکیب کنیم. شما میتونین کارهای پیشرفته تری نیز با استفاده از این ویژگی انجام بدین و خروجی حرفه ای تری رو به وجود بیارید. مثلا میتونیم 4 تا پس زمینه رو برای المنت مورد نظر تعریف کنیم. بعد از اون میتونیم به ازای هر پس زمینه بیشتر، یک مقدار blend-mode برای اون مشخص کنیم تا بگیم که چطور با دیگر لایه ها ترکیب بشه. مثلا کد زیر رو در نظر بگیرید:

همونطور که میبینید برای اولین و دومین گرادیان به ترتیب blend-mode رو screen و difference قرار دادیم. برای تصویر پس زمینه اول هم مقدار blend-mode رو برابر با lighten قرار دادیم. خروجی بصورت زیر میشه:chain background-blend-mode

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

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.