מבט על Blend Modes (מיזוג) ב- CSS

לפי ויקיפדיה, מיזוג (או ״מצבי ערבוב״) בעריכת תמונות דיגיטליות וגרפיקה ממוחשבת משמש בכדי לקבוע כיצד שתי שכבות משתלבות זו בזו. במרבית היישומים מצב ברירת המחדל של מיזוג הוא פשוט להסתיר את השכבה התחתונה על ידי כיסוי של זו עם השכבה העליונה.

ב CSS קיימות שתי תכונות המאפשרות לבצע את המיזוג המדובר. mix-blend-mode אחראית למיזוג אלמנטים ב DOM – כלומר מיזוג של אלמנט עם אלמנט כלשהו הנמצא מאחוריו.

התכונה background-blend-mode לעומתה אחראית לשילוב של מספר תמונות רקע או שילוב של background-image יחד עם background-color ושתיהן (במיוחד השנייה) מספקות תוצאות מאד מעניינות פוטנציאלית.

לאפקטים ויזואליים נוספים על רקע אלמנטים, ראו את המדריך 25 דוגמאות ל-backdrop-filter ב-CSS.

חלק מהדוגמאות הסטטיות בפוסט זה נלקחו מפוסטים אחרים ברשת. לצערי איבדתי את אותם מקורות כך שאין לי היכולת לתת את הקרדיט המגיע.

מצבי המיזוג השימושיים ביותר

שתי התכונות mix-blend-mode ו background-blend-mode מקבלות את אותה קבוצה של 16 ערכים. בפועל, תשתמשו בקומץ מהם ב-90% מהמקרים. לחצו על הכפתורים בדמו הבא כדי לראות מה כל אחד עושה לתמונה אמיתית:

Blend Mode Explorer

multiply screen overlay darken soft-light difference

Color #e63946

Copy

.overlay {
    background-color: #e63946;
    mix-blend-mode: multiply;
}

Multiply מכהה על ידי הסרת לבן, screen מבהיר על ידי הסרת שחור, overlay מגביר ניגודיות, darken שומר רק את הפיקסלים הכהים יותר, soft-light מחיל גוון עדין, ו-difference הופך צבעים בהתבסס על השכבה. נסו לשנות את צבע השכבה כדי לראות כיצד כל מצב מגיב אחרת.

שימוש ב mix-blend-mode

התכונה mix-blend-mode היא הגמישה מבין השתיים. היא ממזגת כל אלמנט DOM עם מה שנמצא מאחוריו ויזואלית, מה שהופך אותה למושלמת עבור אפקטי טקסט, שילוב תמונות ושכבות-על יצירתיות.

מיזוג טקסט עם צורה

בדוגמה מטה ישנו עיגול ותחתיו טקסט. הוספנו את התכונה mix-blend-mode: overlay לטקסט והתוצאה היא שטקסט זה מתמזג עם העיגול כפי שניתן לראות:

<div class="circle"></div>
<p>Blend Me</p>

.blend-me {
  mix-blend-mode: overlay;
  margin-top: -50px;
}

טקסט על תמונה

שימוש יחסית פופולארי של התכונות המדוברות הוא בסיטואציות של טקסט על תמונה, זה יכול להיות משהו בסגנון הבא:

.title {
  color: #000;
  mix-blend-mode: overlay;
}

ניתן גם להשתמש בתכונה text-stroke בכדי לגרום למילוי הטקסט להיות שקוף:

אפקט חשיפה כפולה

אפשר להיות הרבה יותר יצירתיים עם תכונות אלו. תנו מבט בשתי התמונות הבאות:

הנה ה markup בו השתמשתי:

<div class="blend-me-4">
  <img src="monkey.jpg" width="300" height="450">
  <img src="sky.jpg" width="300" height="450">
</div>

וה CSS יהיה משהו בסגנון הבא:

.blend-me-4 img:first-child {
    position: absolute;
    mix-blend-mode: soft-light;
}

הסרת רקע לבן מתמונה

נניח ויש לכם תמונה או לוגו מסויים ואין לכם דרך להשיגו עם שקיפות כ PNG. במקום לערוך את התמונה, ניתן להשתמש ב mix-blend-mode: multiply בכדי להסיר את הרקע הלבן בקלות.

אתם רואים כאן את אותה תמונת לוגו של פייסבוק בפורמט jpeg, כאשר על התמונה לאחת מהן הוספתי את הערך הבא לתכונה mix-blend-mode:

img {
    mix-blend-mode: multiply;
}

לא מומלץ להשתמש בזה כמובן, רק אם אין ברירה. שימו לב גם שהצבע הכחול אינו זהה ב 100%.

מיזוג טקסט עם תמונת נוף

טכניקה נוספת שאני אוהב היא שימוש ב mix-blend-mode כדי לחשוף תמונה דרך טקסט בולט. הקלידו מילה משלכם ועברו בין multiply ל screen כדי לראות איך כל גישה עובדת:

Text Reveal

EXPLORE

multiply screen

Text

Copy

עם multiply, לאלמנט הטקסט יש רקע שחור וטקסט לבן – השחור נעלם ואזור הטקסט חושף את הנוף. עברו ל screen לתוצאה הפוכה: רקע לבן, טקסט שחור, והאזורים הכהים נעלמים במקום. אם מעניינות אתכם טכניקות מיסוך נוספות ב CSS, כתבתי על mask-image בפוסט נפרד.

שימוש ב background-blend-mode

בעוד mix-blend-mode ממזגת אלמנטי DOM נפרדים, background-blend-mode עובדת בתוך אלמנט בודד – ממזגת את ה background-image עם background-color, או ממזגת מספר שכבות רקע יחד. זה הופך אותה לאידיאלית עבור אפקטי צבע על תמונות ומעברי צבע.

מיזוג תמונה עם צבע אחיד

בדוגמה הבאה נשתמש בתמונה כהה של אישה בהריון ובצבע רקע ורוד. הערך בו נשתמש לתכונה background-blend-mode יהיה screen:

יש לציין שבכדי שמיזוג זה יעבוד אנו משתמשים בתמונה כ background-image לאלמנט המדובר. אז ה CSS ייראה משהו בסגנון הבא:

.blend {
    width: 300px;
    height: 450px;
    max-width: 100%;
    background-blend-mode: screen;
    background-image: url(pregnant.jpg);
    background-color: #fa8072;
    background-size: cover;
}

מיזוג תמונה עם gradient

התכונה background-blend-mode יכולה אף למזג מספר תמונות רקע יחד. linear ו radial gradients הם תמונות רקע לכל דבר ב CSS, כך שניתן למזג תמונה עם gradient כזה או אחר:

בדוגמה זו השתמשנו בערך overlay ומעט סגול בהיר וכהה עבור ה gradient:

.blend {
    width: 300px;
    height: 450px;
    max-width: 100%;
    background-blend-mode: overlay;
    background-image: url("parrot.jpg"),
    linear-gradient(to bottom, #efe8f5, #8845e0);
    background-size: cover;
}

אפקט Duotone

אפקט Duotone ממפה את האזורים הבהירים והכהים של תמונה לשני צבעים ספציפיים. סביר שנתקלתם בסגנון הזה בשירותי סטרימינג ודפי נחיתה מודרניים. עם CSS אפשר להשיג את זה בקלות באמצעות background-blend-mode בלבד, ללא תוכנת עריכה.

בחרו מתוך הצבעים המוכנים או בחרו צבע משלכם כדי לראות את האפקט משתנה בזמן אמת:

מצב המיזוג luminosity מסיר את הצבעים המקוריים מהתמונה ומחליף אותם בצבע ה background-color שבחרתם. הוספת filter: contrast() מחדדת את התוצאה.

שדרוג נראות תמונות עם Blend Modes

בנוסף לאפקטי טקסט ושילוב שכבות, שימוש נכון ב blending יכול לשדרג את המראה של תמונות מוצר על רקע צבעוני – ללא נגיעה בקבצים המקוריים.

mix-blend-mode: normal

Sport wears

The best quality

mix-blend-mode: screen

Sport wears

The best quality

mix-blend-mode: overlay

Sport wears

The best quality

שאלות נפוצות

שאלות נפוצות על CSS Blend Modes:

סיכום

CSS blend modes מאפשרים שילוב שכבות ברמה של פוטושופ ישירות בדפדפן. שתי התכונות – mix-blend-mode עבור אלמנטי DOM ו background-blend-mode עבור שכבות רקע – מכסות הכל, מהשבחות תמונה עדינות ועד אפקטי duotone דרמטיים וחשיפת טקסט. עם תמיכת דפדפנים מלאה ב Chrome, Firefox, Safari ו Edge, אין סיבה להסס.

Images from unsplash.com. Inspiration from various sources around the web.