آیا می دانید تا کنون 8859 نفر در 19 دوره آموزشی سون لرن ثبت نام کرده اند !

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

0 282 ۲۷ بهمن ۹۵

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :