מצבי שילוב

הפודקאסט של CSS – 024: מצבי מיזוג

Duotone הוא אפקט צבע פופולרי לצילום תמונות, וגורם לתמונה להיראות כאילו היא מורכבת רק משני צבעים: אחד לגוונים בהירים והשני לתאורה חשוכה. אבל איך אפשר לעשות את זה עם 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

background-blend-mode

מצבי שילוב שניתנים להפרדה

רגיל

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

הכפלה

מצב השילוב 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

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

שימו לב שזה לא עובד עם background-blend-mode כי נכס הרקע כבר מבודד.

בדיקת ההבנה

בחינת הידע שלכם לגבי מצבי שילוב