מצבי שילוב

דו-גוני הוא טיפול פופולרי בצבעים לצילום, שמאפשר ליצור תמונה שנראית כאילו היא מורכבת רק משני צבעים מנוגדים: אחד לחלקים הבהירים והשני לחלקים כהים. אבל איך עושים את זה באמצעות CSS?

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

מהו מצב מיזוג?

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

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

משתמשים ב-background-blend-mode כשיש כמה רקעים לאובייקט, ורוצים שכל הרקעים יתמזגו זה בזה.

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

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

תאימות דפדפן

mix-blend-mode

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 32.
  • Safari: 8.

Source

background-blend-mode

Browser Support

  • Chrome: 35.
  • Edge: 79.
  • Firefox: 30.
  • Safari: 8.

Source

מצבי מיזוג נפרדים

רגיל

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

הכפלה

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

.my-element {
  mix-blend-mode: multiply;
}

מסך

כשמשתמשים ב-screen, הערכים של light מוכפלים – אפקט הפוך ל-multiply, וברוב המקרים התוצאה תהיה בהירה יותר.

.my-element {
  mix-blend-mode: screen;
}

שכבת-על

שילוב המצבים הזה – overlay – משלב את multiply ו-screen. צבעים כהים בסיסיים יהיו כהים יותר, וצבעים בהירים בסיסיים יהיו בהירים יותר. צבעים בטווח הביניים, כמו אפור 50%, לא מושפעים מהשינוי.

.my-element {
  mix-blend-mode: overlay;
}

האפלה

שילוב darken משווה בין הלומיניזציה של הצבע הכהה בתמונה המקורית לבין הלומיניזציה של הצבע הכהה בתמונה הרקע, ובוחר את הצבע הכהה ביותר מבין השניים. כדי לעשות זאת, המערכת משווה בין ערכי RGB במקום בין ערכי בהירות (כמו ש-multiply ו-screen עושים), לכל ערוץ צבע. כשמשתמשים ב-darken וב-lighten, לעיתים קרובות נוצרים ערכי צבע חדשים מתהליך ההשוואה הזה.

.my-element {
  mix-blend-mode: darken;
}

הבהרה

השימוש ב-lighten עושה בדיוק את ההפך מ-darken.

.my-element {
  mix-blend-mode: lighten;
}

הבהרת צבע

אם משתמשים ב-color-dodge, צבע הרקע יתבהר כדי לשקף את צבע המקור. צבעים שחורים טהורים לא מושפעים מהמצב הזה.

.my-element {
  mix-blend-mode: color-dodge;
}

הכהיית צבע

שילוב color-burn דומה מאוד לשילוב multiply, אבל הוא מגביר את הניגודיות, וכתוצאה מכך גווני הביניים רוויים יותר וההדגשות פחות בולטות.

.my-element {
  mix-blend-mode: color-burn;
}

תאורה קשה

שימוש ב-hard-light יוצר ניגודיות עזה. שילוב זה מסנן או מכפיל את ערכי הלומיניזציה. אם ערך הפיקסל בהיר יותר מ-50% אפור, התמונה תתבהיר, כאילו היא עוברת סינון. אם הוא כהה יותר, הוא מוכפל.

.my-element {
  mix-blend-mode: hard-light;
}

אור רך

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

.my-element {
  mix-blend-mode: soft-light;
}

הפרש

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

.my-element {
  mix-blend-mode: difference;
}

מה מחריגים

השימוש ב-exclusion דומה מאוד לשימוש ב-difference, אבל במקום להחזיר שחור לפיקסלים זהים, הוא יחזיר 50% אפור, וכתוצאה מכך התוצאה תהיה רכה יותר עם פחות ניגודיות.

.my-element {
  mix-blend-mode: exclusion;
}

מצבי מיזוג לא ניתנים להפרדה

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

גוון

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

.my-element {
  mix-blend-mode: hue;
}

רוויה

התוצאה דומה לזו של hue, אבל כשמשתמשים ב-saturation כמצב המיזוג, הרוויה של צבע המקור חלה על הגוון והבהירות של צבע הרקע.

.my-element {
  mix-blend-mode: saturation;
}

צבע

שילוב color ייצור צבע מהגוון והרווּי של צבע המקור ומהבהירות של צבע הרקע.

.my-element {
  mix-blend-mode: color;
}

עוצמת אור

לבסוף, luminosity היא הפונקציה ההפוכה של color. הוא יוצר צבע עם הבהירות של צבע המקור ואת הגוון והרווּי של צבע הרקע.

.my-element {
  mix-blend-mode: luminosity;
}

הנכס isolation

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 8.

Source

אם תגדירו למאפיין isolation את הערך isolate, המערכת תיצור הקשר חדש של סטאקינג, שיימנע מערבוב עם שכבת הרקע. כפי שלמדתם במודול z-index, כשיוצרים הקשר חדש של סטאקינג, השכבה הזו הופכת לשכבת הבסיס. המשמעות היא ששיטות המיזוג ברמת ההורה לא יחולו יותר, אבל רכיבים בתוך רכיב עם isolation: isolate מוגדר יכולים עדיין להתמזג.

לתשומת ליבכם: הפעולה הזו לא פועלת עם background-blend-mode כי מאפיין הרקע כבר מבודד.

בדיקת ההבנה

בודקים את הידע שלכם בנושא שיטות מיזוג

אילו מהאפשרויות הבאות הן שיטות מיזוג של CSS?

הכפלה
Dullen
הבהרה
הפרש
שכבת-על
הבהרה

אם רוצים למזג צבעים שונים בדרכים שונות, איזה סגנון של מצב מיזוג נדרש?

לא ניתן להפריד
ניתנים להפרדה