את שיטות השילוב של שכבה (blend modes) אני מכירה כבר שנים רבות מהפוטושופ. שיטת שילוב היא האופן בו שכבה משתלבת עם השכבות שמתחתיה. שיטות השילוב מאפשרות ליצור שילובים מיוחדים של צבעים, לשנות ערכי צבע בתמונה במקומות הרצויים ולהגיע לאפקטים מיוחדים של שילוב תמונות. לאלו שלא מכירים – ממליצה בחום. למי מכם שרוצה להבין יותר לעומק אפשר לקרוא עליהם או לויזואליים שביניכם – סרטון הסברה מאוד מפורט.
שנים פינטזתי על האפשרות של שיטות שילוב ב CSS והנה, החלום הופך למציאות 🙂 . היות וב CSS אין באמת שכבות, וההיררכיה בעמוד מורכבת יותר, העניין של השילוב מורכב יותר. ישנן 2 אפשרויות לשימוש בשיטות שילוב:
mix-blend-mode
שילוב שמוּחַל על אלמנט(כמו למשל עלdivאוimageאו טקסט וכדומה) כאשר 2 האלמנטים נמצאים אחד מתחת לשני (זה יכול לקרות או בעזרת שימוש ב-position: absolute, או כאשר אלמנט אחד מכיל את השני – למשלimageבתוךdiv).background-blend-modeשינוי השילוב של תמונת רקע (
background-image) ביחס לצבע הרקע שלה (background-color) או ביחס למה שיש מתחתיה בעמוד.
אני לא אתיימר להביא פה דוגמאות והסברים לכל אחד מהאפשרויות, במיוחד כשרבים וטובים ממני עשו זאת לפני:
- הפוסט (יחסית ישן אבל רלוונטי) של css-tricks על הבסיס של blend-mode.
- מאמר ממש מעמיק ומסביר על בלנד וגם על פילטרים של Sara Soueidan שהיא תותחית ב
CSS,JSוSVG. - כמובן שיש לה דמו שאפשר לשחק איתו (על התמונה הקיימת או להעלות תמונה משלכם)
- עוד "מגרש משחקים" לבדיקה של
background-blend-modeושל פילטרים שונים - אם כבר דמו – אז איך אפשר לוותר על הדמו של כלבים וחתולים (זה בטוח יעלה את מספר הלייקים של הפוסט 😉 )
- הרצאה על איך לערוך תמונות ב CSS ולא בפטושופ – קשה לומר שאני מעדיפה עריכה בדפדפן ולא בפוטושופ – ששם אני מרגישה בבית, אבל ההרצאה לגמרי מרתקת!
- פוסט שמדגים אחד אחד את שיטות השילוב השונות על תמונות
- ואיך אפשר בלי – מי מהדפדפנים תומך ב
background-blend-modeומי תומך בmix blend mode
אחד השימושים המעניינים יותר (בעיניי) ב mix-blend-mode הוא השימוש בו בשילובים של טקסט. אהבתי את הדוגמה הזאת שהופיעה בפוסט של css-tricks
See the Pen Overlapping Letters by Chris Coyier (@chriscoyier) on CodePen.
אחרי שקראתי הכל והתלהבתי, בעצם לא היה לי איפה ומה לעשות עם זה. כן, זה ממש מדליק שאפשר לשנות שיטת שילוב ב-CSS אבל בשביל זה – צריך פרויקט אמיתי שמצריך את זה. בעיצוב של עמוד 404 של אתר סיינטיפיק אמריקן ישראל המעצבת קרן נתנה לטקסט שיטת שילוב וזאת הייתה יריית הפתיחה שלי.
הקוד:
.error-404-title {
color: rgba(211, 233, 255, 0.4);
mix-blend-mode: color-dodge;
}
אמנם אינטרנט אקספלורר לא חבר, אבל זה לא נורא – מי שבוחר להשתמש בו יראה את הכיתוב 404 בצבע תכלת בהיר.
באתרים שאני עובדת על ה-css שלהם, כמו שכבר כתבתי, לא נדרשתי לשימוש ב-background-blend-mode. אבל לפני כמה ימים לאה אתגרה אותי. בתוך אתר גדול ורווי תוכן, ישנם כמה כותבים קבועים שמפרסמים אחת לכמה זמן פוסט. כל הפוסטים מופיעים תחת קטגוריה שהיא שם הבלוג. היות ואין משאבים וזמן ליצירת תמונה מלווה לכל פוסט – מנהל האתר מעלה את אותה התמונה לכל הפוסטים שמשוייכים לקטגוריה של הבלוג, מה שיוצר מראה מאוד אחיד ולא מגוון בעמוד הבלוג/קטגוריה:
עלתה בדעתי האופציה של יצירת מאגר תמונות שמנהל האתר יוכל לבחור מהן – אבל העדפתי למצוא פיתרון בקוד.
יצרתי code-pen שמדמה את המבנה של העמוד (רק עם החלקים הלרוונטיים שלו) והתחלתי לשחק 🙂
בהתחלה חשבתי – היי, אני אשתמש ב background-blend-mode, הרי זאת תמונה, אבל מהר מאוד הבנתי שאני טועה, כי התמונה היא img ולא background-image, מה שסיבך את העניין. למה? כי כאשר נותנים הגדרה של background-blend-mode לתמונת רקע אז אפשר לתת לאלמנט שהתמונה היא תמונת הרקע שלו גם צבע רקע, ואז ההגדרה של background-blend-mode על ה-background-image היא ביחסים בין תמונת הרקע וצבע הרקע.
אבל בדוגמה שלי, גם כשנתתי לתמונה שיטת שילוב, לא הצלחתי ליצור מגוון רחב מספיק מהעובדה שהצבע שיש מתחת לתמונה הוא לבן / שקוף (בעצם אין לו שום הגדרת צבע). נתתי לתמונה צבע רקע אבל זה לא שינה כלום, כי כל האובייקט img מקבל את השילוב. זאת אומרת – גם התמונה וגם צבע הרקע שלה (שלא רואים אותו כי התמונה מעליו) מושפעים ביחד ולא רק התמונה בנפרד ביחס לצבע רקע שלה.
אז מה עושים? כמובן – משתמשים בפסדו אלמנט!
הוספתי לתמונה :before בגודל שלה עם צבע רקע, וכלום לא קרה. למה? כי אלמנט תמונה (כמו input) לא מקבל פסדו אלמנט. אבל אל דאגה – אם התמונה לא יכולה, אז ה-DIV שעוטף אותה דווקא כן יכול. וככה יצרתי עוד אלמנט שיש לו רקע צבעוני. הסיבה שהשתמשתי ב :before ולא נתתי צבע רקע לכל ה DIV היא שיש גם מלל בתוכו ואני לא באמת רוצה מגוון של קוביות צבעוניות אלא רק תמונות מגוונות.
עכשיו הייתה לי הדרך להחיל את השילוב של התמונה על צבע – כל מה שנשאר זה לייצר תחושה של ראנדומאליות של הצבעוניות. מצאתי את הדוגמה הזאת של ראנדומאליות של סיבוב תמונה והשתמשתי בה כדי ליצור צבעים שונים ל :before והנה התוצאה:
See the Pen random blend mode to create variety of the same image by Rachel Bratt Tannenbaum (@rachelbt) on CodePen.
וככה יצרתי גיוון בצבעוניות של התמונה ומראה לא אחיד ומגוון ברשימה של הפוסטים.
עוד שימוש נחמד שאפשרי בזכות שילוב שכבות הוא השוואה בין אלמנטים, או בין העיצוב לבין התכנות. אם שמים שכבה אחת על השניה ונותנים לה הגדרה של mix-blend-mode: difference מקבלים את כל ההבדלים. נשמע קצת מעומעם ולא ברור? הפוסט הזה מסביר ומביא דוגמאות.
עד כאן על הרפתקאותי בשיטות שילוב 🙂