خصوصیت mix-blend-mode در CSS تعیین می‌کند که محتوای یک عنصر چگونه با محتوای پدر آن و پس زمینه عنصر ترکیب شود.
مقادیر ممکن:
<blend-mode>: مد نرمال انتخاب شده برای مخلوط کردن.plus-darker: مخلوط شدن با عملگر ترکیب کم‌روشن‌تر.plus-lighter: مخلوط شدن با عملگر ترکیب بیش‌روشن‌تر. این افکت‌های متقاطع مفید هستند زیرا وقتی دو مورد روی هم قرار می‌گیرند و شفافیت آن‌ها به سمت‌های مخالف به صورت متفاوت تغییر می‌کند، از پلک‌زدگی‌های ناخواسته جلوگیری می‌کنند.
Different mix-blend-mode Values
این کد HTML و CSS نشان می‌دهد که چگونه می‌توانید خصوصیت mix-blend-mode را برای ترکیب محتوای یک المان با محتوای پدر آن و پس زمینه عنصر استفاده کنید. در اینجا چند نوع مختلف از مقادیر mix-blend-mode نمایش داده شده‌اند و تأثیر آن‌ها بر روی محتوا مورد بررسی قرار گرفته است.
-
در ابتدا، یک محتوای مقدماتی تعریف شده است که شامل یک جعبه پس‌زمینه (background-box) با رنگ آبی و یک جعبه جلو (front-box) با رنگ قرمز است. این دو جعبه داخل یک جعبه اصلی (box) قرار دارند.
-
برای هر جعبه اصلی، یک کلاس با نام mix-blend-mode تعریف شده است که مرتبط با نوع مختلفی از مقادیر mix-blend-mode است.
-
نوع‌های مختلف مقادیر mix-blend-mode شامل normal، multiply، screen، darken، lighten، overlay، color-dodge، color-burn، hard-light، soft-light، difference، exclusion، hue، saturation، color، luminosity، plus-darker، و plus-lighter هستند.
-
با اعمال هر مقدار mix-blend-mode مختلف بر روی جعبه‌های دارای محتوا، تأثیرات ترکیب مختلف بین محتوا، پس‌زمینه، و المان‌های جلو در نظر گرفته شده‌اند و به طور مستقل نمایش داده شده‌اند.
-
این کد نشان می‌دهد که چگونه mix-blend-mode می‌تواند به سرعت تأثیرات ترکیب مختلف را ایجاد کند، از جمله تغییراتی مانند ضرب، روشن‌تر کردن، تاریک‌تر کردن، تفاوت، هم‌رنگی، و سایر انواع ترکیب‌های رنگی.
<html>
<head>
<style>
.box {
width: 200px;
height: 150px;
position: relative;
margin: 10px;
padding: 5px;
border: 2px solid black;
}
.background-box {
width: 100px;
height: 100px;
background-color: blue;
}
.front-box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 40px;
left: 30px;
}
.mix-blend-mode-box {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.mode-container {
display: flex;
flex-direction: column;
margin-right: 20px;
}
h3 {
margin-bottom: 10px;
}
.normal-mode {
mix-blend-mode: normal;
}
.multiply-mode {
mix-blend-mode: multiply;
}
.screen-mode {
mix-blend-mode: screen;
}
.darken-mode {
mix-blend-mode: darken;
}
.lighten-mode {
mix-blend-mode: lighten;
}
.overlay-mode {
mix-blend-mode: overlay;
}
.color-dodge-mode {
mix-blend-mode: color-dodge;
}
.back-burn {
background-color: orange;
}
.color-burn-mode {
background-color: blue;
mix-blend-mode: color-burn;
}
.hard-light-mode {
mix-blend-mode: hard-light;
}
.back-hard {
background-color: red;
}
.soft-light-mode {
background-color: blue;
mix-blend-mode: soft-light;
}
.difference-mode {
background-color: blue;
mix-blend-mode: difference;
}
.exclusion-mode {
background-color: blue;
mix-blend-mode: difference;
}
.hue-mode {
background-color: blue;
mix-blend-mode: hue;
}
.saturation-mode {
blend-mode: saturation;
}
.color-mode {
background-color: blue;
mix-blend-mode: hue;
}
.luminosity-mode {
background-color: blue;
mix-blend-mode: luminosity;
}
.plus-darker-mode {
background-color: blue;
mix-blend-mode: plus-darker;
}
.plus-lighter-mode {
background-color: blue;
mix-blend-mode: plus-lighter;
}
</style>
</head>
<body>
<div class="mix-blend-mode-box">
<div class="mode-container">
<h3>mix-blend-mode: normal</h3>
<div class="box">
<div class="background-box"></div>
<div class="front-box normal-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: multiply</h3>
<div class="box">
<div class="background-box"></div>
<div class="front-box multiply-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: screen</h3>
<div class="box">
<div class="background-box"></div>
<div class="front-box screen-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: darken</h3>
<div class="box">
<div class="background-box"></div>
<div class="front-box darken-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: lighten</h3>
<div class="box">
<div class="background-box"></div>
<div class="front-box lighten-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: overlay</h3>
<div class="box">
<div class="background-box"></div>
<div class="front-box overlay-mode"></div>
</div>
</div>
</div>
<div class="mix-blend-mode-box">
<div class="mode-container">
<h3>mix-blend-mode: color-dodge</h3>
<div class="box">
<div class="background-box"></div>
<div class="front-box color-dodge-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: color-burn</h3>
<div class="box">
<div class="background-box back-burn"></div>
<div class="front-box color-burn-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: hard-light</h3>
<div class="box">
<div class="background-box"></div>
<div class="front-box hard-light-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: soft-light</h3>
<div class="box">
<div class="background-box back-hard"></div>
<div class="front-box soft-light-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: difference</h3>
<div class="box">
<div class="background-box back-hard"></div>
<div class="front-box difference-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: exclusion</h3>
<div class="box">
<div class="background-box back-hard"></div>
<div class="front-box exclusion-mode"></div>
</div>
</div>
</div>
<div class="mix-blend-mode-box">
<div class="mode-container">
<h3>mix-blend-mode: hue</h3>
<div class="box">
<div class="background-box back-burn"></div>
<div class="front-box hue-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: saturation</h3>
<div class="box">
<div class="background-box"></div>
<div class="front-box saturation-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: color</h3>
<div class="box">
<div class="background-box back-burn"></div>
<div class="front-box color-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: luminosity</h3>
<div class="box">
<div class="background-box back-burn"></div>
<div class="front-box luminosity-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: plus-darker</h3>
<div class="box">
<div class="background-box back-burn"></div>
<div class="front-box plus-darker-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: plus-lighter</h3>
<div class="box">
<div class="background-box back-burn"></div>
<div class="front-box plus-lighter-mode"></div>
</div>
</div>
</div>
</body>
</html>With HTML
این کد HTML و CSS نمایش می‌دهد که چگونه رنگ‌های دایره‌ها با استفاده از حالت ترکیبی mix-blend-mode روی یک محیط صفحه نمایش ادغام می‌شوند.
-
داخل یک المان با کلاس “union”، سه دایره با اندازه و رنگ‌های مختلف تعریف شده‌اند. هر دایره دارای یک کلاس با نام “box” و یکی از کلاس‌های “box1″، “box2″، و “box3” برای تعیین رنگ مخصوص است.
-
به هر دایره یک مقدار mix-blend-mode اعمال شده است که در اینجا برابر با “screen” است. این به این معناست که رنگ‌های دایره‌ها با رنگ پس‌زمینه (پس‌زمینه المان مادر “union”) ترکیب می‌شوند.
-
همچنین، استایل‌های CSS مانند ترتیب مطلق و استایل‌های دیگری برای تنظیم شکل و موقعیت دایره‌ها تعیین شده است.
با اعمال مقدار “screen” به mix-blend-mode برای دایره‌ها، رنگ‌های آن‌ها با رنگ پس‌زمینه به صورت ترکیبی blend می‌شوند، که نتیجه آن نمایش می‌دهد که دایره‌ها به نحوی با رنگ پس‌زمینه ترکیب شده‌اند و نتیجه نهایی، یک ادغام رنگی چشم‌گیر از دایره‌های مختلف است.
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
border-radius: 50%;
mix-blend-mode: screen;
position: absolute;
}
.box1 {
background: blueviolet;
}
.box2 {
background: lightcoral;
left: 50px;
}
.box3 {
background: green;
left: 30px;
top: 50px;
}
.union {
isolation: isolate;
position: relative;
}
</style>
</head>
<body>
<div class="union">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
</body>
</html>With SVG
این کد HTML و CSS نشان می‌دهد که چگونه می‌توانید خصوصیت mix-blend-mode را با استفاده از SVG برای ایجاد ترکیب رنگ‌ها استفاده کنید.
- در اینجا، یک SVG تعریف شده است که شامل گروهی با کلاس union است.
- در داخل این گروه، سه الیپس قرار دارد که هرکدام یک رنگ دارند.
- با اعمال خصوصیت mix-blend-mode با مقدار screen بر روی الیپس‌ها، رنگ‌های آن‌ها به وسیله این خصوصیت با یکدیگر ترکیب می‌شوند و نتیجه نهایی به نمایش در می‌آید.
- مقدار isolation: isolate نیز برای گروه union تعریف شده است تا تأثیرات mix-blend-mode فقط در داخل گروه اعمال شود و به المان‌های دیگر SVG انتقال پیدا نکند.
این نمونه نشان می‌دهد که چگونه می‌توان با استفاده از SVG و CSS، افکت‌های ترکیب رنگی را ایجاد کرد که می‌تواند برای طراحی‌های مختلف و ایجاد جلوه‌های ویژه مفید باشد.
<html>
<head>
<style>
ellipse {
mix-blend-mode: screen;
}
.union {
isolation: isolate;
}
</style>
</head>
<body>
<svg>
<g class="union">
<ellipse cx="50" cy="40" rx="50" ry="30" fill="blueviolet" />
<ellipse cx="90" cy="40" rx="50" ry="30" fill="lightcoral" />
<ellipse cx="70" cy="70" rx="50" ry="30" fill="green" />
</g>
</svg>
</body>
</html>With Text
این کد HTML و CSS از مفهوم mix-blend-mode در CSS برای تعیین اینکه محتوای یک المان با پس زمینه المان بالایی و پس زمینه پدرش چگونه ترکیب شود، استفاده می‌کند. در این مثال، ما یک محیط سبز با چند متن مختلف داریم و از ویژگی mix-blend-mode برای تعیین اینکه متن‌ها با پس‌زمینه چگونه ترکیب شوند، استفاده می‌شود.
در این کد، ابتدا یک محیط با رنگ سبز ایجاد شده است. سپس چند متن با فونت و رنگ مشخص شده درون این محیط قرار می‌گیرند.
سپس برای هر متن، سه حالت مختلف mix-blend-mode در نظر گرفته شده است:
-
multiply-mode: این حالت متن را با روش ضرب رنگی با پس‌زمینه ترکیب می‌کند. متن با رنگ پرتغالی روی پس‌زمینه سبز اعمال می‌شود و نتیجه نهایی بر اساس عمل ضرب رنگی محاسبه می‌شود.
-
screen-mode: این حالت متن را با روش صفحه‌ای با پس‌زمینه ترکیب می‌کند. در اینجا، اعمال متن با رنگ پرتغالی روی پس‌زمینه سبز با استفاده از روش صفحه‌ای انجام می‌شود.
-
hard-light-mode: این حالت متن را با روش نور سخت با پس‌زمینه ترکیب می‌کند. متن با رنگ پرتغالی روی پس‌زمینه سبز اعمال می‌شود و نتیجه نهایی بر اساس روش نور سخت محاسبه می‌شود.
با اعمال هر کدام از این حالت‌ها، نحوه ترکیب متن با پس‌زمینه تغییر می‌کند و نتایج مختلفی بدست می‌آید.
<html>
<head>
<style>
.container {
background-color: green;
}
p {
font: italic normal bold 30px Arial, sans-serif;;
color: orange;
padding: 10px;
margin: 0;
}
.multiply-mode {
mix-blend-mode: multiply;
}
.screen-mode {
mix-blend-mode: screen;
}
.hard-light-mode {
mix-blend-mode: difference;
}
</style>
</head>
<body>
<div class="container">
<p>Without blend mode</p>
<p class="multiply-mode">mix-blend-mode: multiply</p>
<p class="screen-mode">mix-blend-mode: screen</p>
<p class="hard-light-mode">mix-blend-mode: difference</p>
</div>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام