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