آشنایی بیشتر با ۵۰ ویژگی جالب CSS (جلسه ۸) : ویژگی background-blend-mode – قسمت ۲

css3 attributes

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

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

.container {
	background: linear-gradient(purple 0%, red 90%),
				linear-gradient(to right, purple 0%, yellow 90%),
				url("example.png") 30px,
				url("example.png") 20px;
	background-blend-mode: screen, difference, lighten;
}

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

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

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

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

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟











نویسنده
محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0