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