לאחרונה רעננתי את גרפיקת האנימציה באתר שלי עם נושא חדש וקבוצה של דמויות חלוציות, תוך יישום שפע מהטכניקות ששיתפתי בסדרה זו. כמה מהאנימציות שלי משנות את המראה כאשר מישהו מקיים איתם אינטראקציה או בשעות שונות של היום.
הצבעים בגרפיקה בראש דפי הבלוג שלי משתנים מבוקר עד לילה בכל יום. לאחר מכן, ישנו מצב השלג, שמוסיף צבעים קרירים ונושא חורפי, באדיבות שכבת שכבת-על ומצב מיזוג.
תוך כדי עבודה על זה, התחלתי לתהות האם ערכי צבע יחסיים של CSS יכולים לתת לי יותר שליטה ובמקביל לפשט את התהליך. הערה: במדריך זה, אתמקד בערכי צבע יחסיים ובמרחב הצבעים של OKLCH לעיצוב גרפיקה ואנימציות. אם אתה רוצה לצלול עמוק לתוך הצבע היחסי, אחמד שדיד יצר מדריך אינטראקטיבי מעולה. לגבי מרחבי צבעים, סולם צבעים ו-OKLCH, ג'ף גרהם שלנו כתב עליהם.
שימוש חוזר באלמנטים היה המפתח. נעשה שימוש חוזר ברקע בכל הזדמנות אפשרית, עם זומים ושכבות-על שעזרו לבנות סצנות חדשות מאותה יצירות אמנות. זה נולד מכורח, אבל זה גם עודד חשיבה במונחים של סדרות ולא של סצנות בודדות. הבעיה עם עדכון ידני של לוחות צבעים בואו ניגש ישר לאתגר שלי. ב-Toon Titles כמו זה - המבוסס על הפרק של Yogi Bear Show "Lellabye-Bye Bear" משנת 1959 - והעבודה שלי באופן כללי, לוחות הצבעים מוגבלים למספר צבעים נבחרים.
אני יוצרת גוונים וגוונים ממה שאני מכנה צבע ה"בסיס" שלי כדי להרחיב את הפלטה מבלי להוסיף עוד גוונים.
ב-Sketch, אני עובד בחלל הצבע HSL, אז תהליך זה כרוך בהגדלה או הפחתה של ערך הבהירות של צבע הבסיס שלי. בכנות, זו לא משימה מפרכת - אבל בחירת צבע בסיס אחר דורשת יצירת סט חדש לגמרי של גוונים וגוונים. לעשות זאת באופן ידני, שוב ושוב, הופך במהירות לעמל.
הזכרתי את מרחב הצבעים HSL - H (גוון), S (רוויה) ו-L (בהירות), אבל זו רק אחת מכמה דרכים לתאר צבע. RGB - R (אדום), G (ירוק), B (כחול) - הוא כנראה המוכר ביותר, לפחות בצורת הקס שלו. יש גם LAB - L (בהירות), A (ירוק-אדום), B (כחול-צהוב) - והדגם החדש יותר, אך הנתמך כעת באופן נרחב, LCH - L (בהירות), C (כרומה), H (גוון) - בצורת OKLCH שלו. עם LCH - במיוחד OKLCH ב-CSS - אני יכול להתאים את ערך הבהירות של צבע הבסיס שלי.
או שאני יכול לשנות את הגוון שלו. LCH chroma ורוויה HSL מתארים שניהם את העוצמה או העושר של צבע, אך הם עושים זאת בדרכים שונות. LCH נותן לי מגוון רחב יותר ומיזוג צפוי יותר בין צבעים.
אני יכול גם לשנות את הגוון כדי ליצור פלטת צבעים שחולקים את אותם ערכי בהירות וכרומה. ב-HSL וגם ב-LCH, ספקטרום הגוון מתחיל באדום, נע דרך ירוק וכחול וחוזר לאדום.
למה OKLCH שינה את איך שאני חושב על צבע תמיכת הדפדפן במרחב הצבעים OKLCH נפוצה כעת, גם אם כלי העיצוב - כולל Sketch - לא הצליחו להדביק את הקצב. למרבה המזל, זה לא אמור למנוע ממך להשתמש ב- OKLCH. דפדפנים ימירו בשמחה ערכי Hex, HSL, LAB ו-RGB ל-OKLCH בשבילך. אתה יכול להגדיר מאפיין CSS מותאם אישית עם צבע יסוד בכל חלל, כולל Hex: /* צבע יסוד */ --בסיס: #5accd6;
כל הצבעים שנגזרו ממנו יומרו ל-OKLCH באופן אוטומטי: --foundation-light: oklch(מ-var(--foundation) [...]; } --foundation-mid: oklch(מ-var(--foundation) [...]; } --foundation-dark: oklch(מ-var(--foundation) [...]; }
צבע יחסי כמערכת עיצוב תחשוב על צבע יחסי כמו לומר: "קח את הצבע הזה, תשנה אותו, ואז תן לי את התוצאה." ישנן שתי דרכים להתאים צבע: שינויים מוחלטים ושינויים פרופורציונליים. הם נראים דומים בקוד, אבל מתנהגים בצורה שונה מאוד ברגע שמתחילים להחליף צבעי יסוד. הבנת ההבדל הזה היא מה שיכול להפוך את השימוש בצבע יחסי למערכת. /* צבע יסוד */ --בסיס: #5accd6;
לדוגמה, ערך הבהירות של צבע הבסיס שלי הוא 0.7837, בעוד שלגרסה כהה יותר יש ערך של 0.5837. כדי לחשב את ההפרש, אני מוריד את הערך הנמוך מהגבוה יותר ומיישם את התוצאה באמצעות פונקציה calc(): --בסיס-כהה: oklch(מ-var(--foundation) calc(l - 0.20) c h);
כדי להשיג צבע בהיר יותר, אני מוסיף את ההבדל במקום: --קרן-אור: oklch(מ-var(--foundation) calc(l + 0.10) c h);
Chromaההתאמות עוקבות אחר אותו תהליך. כדי להפחית את עוצמת צבע הבסיס שלי מ-0.1035 ל-0.0035, אני מוריד ערך אחד מהשני: oklch(מ-var(--foundation) l calc(c - 0.10) h);
כדי ליצור פלטת גוונים, אני מחשב את ההבדל בין ערך הגוון של צבע הבסיס שלי (200) לגוון החדש שלי (260): oklch(מ-var(--foundation) l c calc(h + 60));
החישובים האלה הם מוחלטים. כשאני מפחית סכום קבוע, אני למעשה אומר, "תמיד תפחית את זה הרבה." כך גם בהוספת ערכים קבועים: calc(c - 0.10) calc(c + 0.10)
למדתי את הגבולות של גישה זו בדרך הקשה. כאשר הסתמכתי על הפחתת ערכי כרומה קבועים, הצבעים קרסו לכיוון אפור ברגע ששיניתי את הבסיס. פלטה שעבדה לצבע אחד התפרקה לצבע אחר. הכפל מתנהג אחרת. כשאני מכפיל כרומה, אני אומר לדפדפן: "הפחת את עוצמת הצבע הזה בפרופורציה." הקשר בין הצבעים נשאר שלם, גם כאשר הבסיס משתנה: calc(c * 0.10)
כללי הזז את זה, קנה מידה, סובב את זה
הזז קלילות (הוספה או חיסור), קנה מידה כרומה (כפל), סובב את הגוון (הוספה או הפחתה של מעלות).
אני משנה את הכרומה כי אני רוצה ששינויי עוצמה יישארו פרופורציונליים לצבע הבסיס. יחסי גוון הם סיבוביים, כך שכפל גוון אינו הגיוני. קלילות היא תפיסתית ומוחלטת - הכפלתה מייצרת לעתים קרובות תוצאות מוזרות.
מצבע אחד לנושא שלם צבע יחסי מאפשר לי להגדיר צבע יסוד וליצור ממנו כל צבע אחר שאני צריך - מילוי, קו, עצירות מעבר, צללים. בשלב זה, הצבע מפסיק להיות פלטה ומתחיל להיות מערכת. איורי SVG נוטים לעשות שימוש חוזר באותם מעט צבעים על פני מילוי, קווים והדרגות. צבע יחסי מאפשר לך להגדיר את מערכות היחסים הללו פעם אחת ולעשות בהן שימוש חוזר בכל מקום - ממש כמו שאנימטורים עשו שימוש חוזר ברקע כדי ליצור סצנות חדשות.
שנה את צבע הבסיס פעם אחת, וכל צבע נגזר מתעדכן אוטומטית, מבלי לחשב מחדש שום דבר ביד. מחוץ לגרפיקה מונפשת, אני יכול להשתמש באותה גישה כדי להגדיר צבעים למצבים של אלמנטים אינטראקטיביים כמו לחצנים וקישורים. צבע היסוד שהשתמשתי בו בכותרת "ערש ביי דוב" שלי הוא כחול במראה ציאן. הרקע הוא שיפוע רדיאלי בין הבסיס שלי לגרסה כהה יותר.
כדי ליצור גרסאות חלופיות עם מצבי רוח שונים לחלוטין, אני רק צריך לשנות את צבע הבסיס: --בסיס: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(מ-var(--foundation) calc(l - 0.2357) calc(c * 0.833) h);
כדי לאגד את המאפיינים המותאמים אישית האלה לדרגת ה-SVG שלי מבלי לשכפל ערכי צבע, החלפתי ערכי צבע עצור עם קוד קשיח בסגנונות מוטבעים:
לאחר מכן, הייתי צריך להבטיח שה-Toon Text שלי תמיד מנוגד לכל צבע הבסיס שאבחר. סיבוב גוון של 180 מעלות מייצר צבע משלים שבהחלט קופץ - אבל יכול לרטוט בחוסר נוחות: .text-light { fill: oklch(מ-var(--foundation) l c calc(h + 180)); }
תזוזה של 90 מעלות מייצרת צבע משני חי מבלי להיות משלים לחלוטין: .text-light { fill: oklch(מ-var(--foundation) l c calc(h - 90)); }
השחזור שלי ל-Quick Draw McGraw של 1959 Toon Title "El Kabong" משתמש באותן טכניקות אבל עם פלטה מגוונת יותר. לדוגמה, יש שיפוע רדיאלי נוסף בין צבע הבסיס לגוון כהה יותר.
הבניין והעץ ברקע הם פשוט גוונים שונים של אותו צבע יסוד. בשביל הנתיבים האלה, הייתי צריך שני צבעי מילוי נוספים: .bg-mid { fill: oklch(מ-var(--foundation) calc(l - 0.04) calc(c * 0.91) h); }
.bg-dark { fill: oklch(מ-var(--foundation) calc(l - 0.12) calc(c * 0.64) h); }
כאשר היסודות מתחילים לזוז
עד כה, כל מה שהראיתי היה סטטי. אפילו כאשר מישהו משתמש בבורר צבעים כדי לשנות את צבע הבסיס, השינוי הזה מתרחש באופן מיידי. אבל גרפיקה מונפשת כמעט ולא עומדת במקום - הרמז הוא בשם. לכן, אם צבע הוא חלק מהמערכת, אין סיבה שהוא לא יוכל גם להנפיש.
כדי להנפיש את צבע הבסיס, אני צריך תחילה לפצל אותו לערוצי OKLCH שלו- בהירות, כרומה וגוון. אבל יש שלב חשוב נוסף: אני צריך לרשום את הערכים האלה כמאפיינים מותאמים אישית מוקלדים. אבל מה זה אומר?
כברירת מחדל, דפדפן לא יודע אם ערך מאפיין מותאם אישית של CSS מייצג צבע, אורך, מספר או משהו אחר לגמרי. זה אומר לעתים קרובות שלא ניתן לבצע אינטרפולציה חלקה במהלך האנימציה, ולקפוץ מערך אחד למשנהו.
רישום נכס מותאם אישית אומר לדפדפן את סוג הערך שהוא מייצג וכיצד עליו להתנהג לאורך זמן. במקרה זה, אני רוצה שהדפדפן יתייחס לערוצי הצבע שלי כמספרים כדי שניתן יהיה להנפש אותם בצורה חלקה.
@property --f-l {
תחביר: "
@property --f-c {
תחביר: "
@property --f-h {
תחביר: "
לאחר ההרשמה, מאפיינים מותאמים אישית אלה מתנהגים כמו CSS מקורי. הדפדפן יכול לבצע אינטרפולציה בין מסגרת למסגרת. לאחר מכן אני בונה מחדש את צבע הבסיס מהערוצים האלה: --בסיס: oklch(var(--f-l) var(--f-c) var(--f-h));
זה גורם לצבע הבסיס להיות ניתן להנפשה, בדיוק כמו כל ערך מספרי אחר. הנה אנימציה פשוטה "נושמת" שמשנה קלות בעדינות לאורך זמן: @keyframes לנשום { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { אנימציה: לנשום 10s קלות-in-out אינסופית; }
מכיוון שכל צבע אחר במילוי, בהדרגות ובקו נגזר מ- --foundation, כולם מונפשים יחד, ואין צורך לעדכן שום דבר באופן ידני. צבע אנימציה אחד, אפקטים רבים בתחילת התהליך הזה, תהיתי האם ערכי צבע יחסיים של CSS יכולים להציע יותר אפשרויות ובמקביל להפוך אותם לפשוטים יותר ליישום. לאחרונה הוספתי רקע חדש של מכרה זהב לדף יצירת הקשר של האתר שלי, והאיטרציה הראשונה כללה מנורות שמן זוהרות ומתנדנדות.
רציתי לחקור כיצד הנפשת צבעי CSS יחסיים יכולים להפוך את פנים המכרה למציאותי יותר על ידי צביעתו בצבעים מהמנורות. רציתי שהם ישפיעו על העולם שסביבם, כמו האור האמיתי. אז, במקום להנפיש צבעים מרובים, בניתי מערכת תאורה זעירה שמניחה רק צבע אחד.
המשימה הראשונה שלי הייתה להכניס שכבת כיסוי בין הרקע למנורות שלי: <נתיב id="שכבת על" fill="var(--overlay-tint)" [...] style="mix-blend-mode: color" />
השתמשתי במצב ערבוב-תערובת: צבע כי זה גוון את מה שמתחתיו תוך שמירה על הבהירות הבסיסית. מכיוון שאני רוצה שהשכבה תהיה גלויה רק כאשר אנימציות מופעלות, ביצעתי את ההצטרפות לשכבת העל: .svg-mine #overlay { תצוגה: אין; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { תצוגה: בלוק; אטימות: 0.5; } }
הכיסוי היה במקום, אך עדיין לא מחובר למנורות. הייתי צריך מקור אור. המנורות שלי פשוטות, וכל אחת מכילה אלמנט עיגול שטשטשתי עם פילטר. המסנן מייצר טשטוש רך מאוד על פני כל העיגול.
במקום להנפיש את שכבת העל והמנורות בנפרד, אני מבצע הנפשה של אסימון צבע "להבה" בודד ומפיק מזה את כל השאר. ראשית, אני רושם שלושה מאפיינים מותאמים אישית מוקלדים עבור ערוצי OKLCH:
@property --fl-l {
תחביר: "
הנפשתי את הערוצים האלה, דחפתי בכוונה כמה פריימים לכיוון הכתום, כך שההבהוב יקרא בבירור כאור אש:
@keyframes flame { 0%, 100% { --fl-l: 0.86; --fl-c: 0.12; --fl-h: 95; } 6% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 92; } 12% { --fl-l: 0.83; --fl-c: 0.14; --fl-h: 100; } 18% { --fl-l: 0.88; --fl-c: 0.11; --fl-h: 94; } 24% { --fl-l: 0.82; --fl-c: 0.16; --fl-h: 82; } 30% { --fl-l: 0.90; --fl-c: 0.12; --fl-h: 90; } 36% { --fl-l: 0.79; --fl-c: 0.17; --fl-h: 76; } 44% { --fl-l: 0.87; --fl-c: 0.12; --fl-h: 96; } 52% { --fl-l: 0.81; --fl-c: 0.15; --fl-h: 102; } 60% { --fl-l: 0.89; --fl-c: 0.11; --fl-h: 93; } 68% { --fl-l: 0.83; --fl-c: 0.16; --fl-h: 85; } 76% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 91; } 84% { --fl-l: 0.85; --fl-c: 0.14; --fl-h: 98; } 92% {--fl-l: 0.80; --fl-c: 0.17; --fl-h: 74; } }
לאחר מכן חידדתי את האנימציה הזו ל-SVG, כך שהמשתנים המשותפים זמינים הן למנורות והן לשכבת העל שלי:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { אנימציה: flame 3.6s ליניארי אינסופי; isolation: isolate;
/* בנה צבע להבה מערוצים מונפשים */ --להבה: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* צבע המנורה נגזר מלהבה */ ---lamp-core: oklch(מ-var(--flamme) calc(l + 0.05) calc(c * 0.70) h);
/* גוון כיסוי הנגזר מאותה להבה */ ---overlay-tint: oklch(מ-var(--flame) calc(l + 0.06) calc(c * 0.65) calc(h - 10)); } }
לבסוף, החלתי את הצבעים הנגזרים האלה על המנורות הזוהרות ועל שכבת העל שהם משפיעים: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > מעגל, .svg-mine[data-animations=on] #mine-lamp-2 > מעגל { fill: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { תצוגה: בלוק; fill: var(--overlay-tint); אטימות: 0.5; } }
כאשר הלהבה עוברת לכתום, המנורות מתחממות, והסצנה מתחממת איתן. כשהלהבה מתקררת, הכל מתייצב יחד. החלק הטוב ביותר הוא ששום דבר לא נכתב באופן ידני. אם אני משנה את צבע הבסיס או משנה את טווחי הנפשה של הלהבה, כל מערכת התאורה מתעדכנת בו זמנית. את התוצאה הסופית תוכלו לראות באתר שלי. שימוש חוזר, ייעוד מחדש, ביקר מחדש אותם אנימטורים של חנה-ברברה נאלצו ליישם מחדש אלמנטים מתוך צורך, אבל אני עושה שימוש חוזר בצבעים כי זה הופך את העבודה שלי ליותר עקבית וקלה יותר לתחזוקה. ערכי צבע יחסיים של CSS מאפשרים לי:
הגדר צבע בסיס יחיד, תאר כיצד צבעים אחרים קשורים אליו, השתמש מחדש בקשרים האלה בכל מקום, ו הנפש את המערכת על ידי שינוי ערך אחד.
צבע יחסי לא רק מקל על עיצוב הנושא. זה מעודד דרך חשיבה שבה צבע, כמו תנועה, הוא מכוון - ושבה שינוי ערך אחד יכול לשנות סצנה שלמה מבלי לשכתב את העבודה שמתחתיה.
