מצבי שילוב

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

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

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

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

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

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

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

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

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

שימוש בפונקציה 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 כי מאפיין הרקע כבר מבודד.

בדיקת ההבנה

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