איך האָבן לעצטנס דערקוויקט די אַנימאַטעד גראַפיקס אויף מיין וועבזייטל מיט אַ נייַע טעמע און אַ גרופּע פון פּייאַנירינג אותיות, און אין פיר פון די טעקניקס וואָס איך שערד אין דעם סעריע. עטלעכע פון מיין אַנאַמיישאַנז טוישן די אויסזען ווען עמעצער ינטעראַקץ מיט זיי אָדער אין פאַרשידענע צייט פון טאָג.
די פֿאַרבן אין די גראַפיק אויף מיין בלאָג בלעטער טוישן פון מאָרגן ביז נאַכט יעדער טאָג. דערנאָך, עס איז די שניי מאָדע, וואָס מוסיף קיל פארבן און אַ ווינטערי טעמע, העפלעכקייַט פון אַ אָוווערליי שיכטע און אַ בלענדינג מאָדע.
בשעת איך אַרבעט אויף דעם, איך סטאַרטעד צו ווונדער צי קאָרעוו קאָליר וואַלועס פון CSS קען געבן מיר מער קאָנטראָל און אויך סימפּלאַפייינג דעם פּראָצעס. באַמערקונג: אין דעם טוטאָריאַל, איך וועט פאָקוס אויף קאָרעוו קאָליר וואַלועס און די OKLCH קאָליר פּלאַץ פֿאַר טימינג גראַפיקס און אַנאַמיישאַנז. אויב איר ווילן צו ונטערטוקנ זיך טיף אין קאָרעוו קאָליר, Ahmad Shadeed באשאפן אַ פּרעכטיק ינטעראַקטיוו פירער. ווי פֿאַר קאָליר ספּייסאַז, גאַמאַץ און OKLCH, אונדזער אייגענע Geoff Graham געשריבן וועגן זיי.
ריפּיטיד נוצן פון עלעמענטן איז געווען שליסל. באַקגראַונדז זענען ריוזד ווען מעגלעך, מיט זומז און אָוווערלייז העלפּינג בויען נייַע סינז פון דער זעלביקער אַרטוואָרק. עס איז געבוירן פון נייטיקייַט, אָבער עס אויך ינקעראַדזשד טראכטן אין טערמינען פון סעריע אלא ווי יחיד סינז. די פּראָבלעם מיט מאַניואַלי אַפּדייטינג קאָליר פּאַלעטטעס זאל ס באַקומען גלייך צו מיין אַרויסרופן. אין טון טיטלען ווי דעם - באזירט אויף די 1959 יאָגי בער ווייַזן עפּיזאָד "לולאַביי-ביי בער" - און מיין אַרבעט אין אַלגעמיין, פּאַלעטטעס זענען לימיטעד צו אַ ביסל אויסגעקליבן פארבן.
איך מאַכן שיידז און טינץ פון וואָס איך רופן מיין "יסוד" קאָליר צו יקספּאַנד די פּאַליטרע אָן אַדינג מער כיוז.
אין סקעטש, איך אַרבעט אין די HSL קאָליר פּלאַץ, אַזוי דעם פּראָצעס ינוואַלווז ינקריסינג אָדער דיקריסינג די לייטנאַס ווערט פון מיין יסוד קאָליר. האָנעסטלי, עס איז נישט אַ שווער אַרבעט - אָבער טשוזינג אַ אַנדערש יסוד קאָליר ריקווייערז אַ גאַנץ נייַ גאַנג פון שיידז און טינץ. טאן אַז מאַניואַלי, ווידער און ווידער, געשווינד ווערט לאַבאָריאַס.
איך דערמאנט די HSL - H (כיו), S (זעטיקונג) און L (לייטנאַס) - קאָליר פּלאַץ, אָבער דאָס איז נאָר איינער פון עטלעכע וועגן צו באַשרייַבן קאָליר. RGB - ר (רויט), ג (גרין), ב (בלוי) - איז מיסטאָמע די מערסט באַקאַנטע, לפּחות אין זיין העקס פאָרעם. עס זענען אויך לאַב - ל (לייטנאַס), א (גרין-רויט), ב (בלוי-געל) - און די נייַער, אָבער איצט וויידלי געשטיצט LCH - ל (לייטנאַס), C (טשראָמאַ), ה (כיו) - מאָדעל אין זייַן OKLCH פאָרעם. מיט LCH - ספּאַסיפיקלי OKLCH אין CSS - איך קענען סטרויערן די לייטנאַס ווערט פון מיין יסוד קאָליר.
אָדער איך קען טוישן די טשראָמאַ. LCH chroma און HSL זעטיקונג ביידע באַשרייַבן די ינטענסיטי אָדער ריטשנאַס פון אַ קאָליר, אָבער זיי טאָן דאָס אין פאַרשידענע וועגן. LCH גיט מיר אַ ברייט קייט און מער פּרידיקטאַבאַל בלענדינג צווישן פארבן.
איך קענען אויך טוישן די כיו צו שאַפֿן אַ פּאַליטרע פון פארבן וואָס טיילן די זעלבע לייטנאַס און טשראָמאַ וואַלועס. אין ביידע HSL און LCH, די כיו ספּעקטרום סטאַרץ ביי רויט, באוועגט דורך גרין און בלוי, און קערט צו רויט.
פארוואס OKLCH טשיינדזשד ווי איך טראַכטן וועגן קאָליר בראַוזער שטיצן פֿאַר די OKLCH קאָליר פּלאַץ איז איצט וויידספּרעד, אפילו אויב די פּלאַן מכשירים - אַרייַנגערעכנט סקעטש - האָבן נישט געכאפט. צומ גליק, דאָס זאָל נישט האַלטן איר פון ניצן OKLCH. בראַוזערז וועט גליק גער העקס, HSL, LAB און RGB וואַלועס אין OKLCH פֿאַר איר. איר קענען דעפינירן אַ מנהג CSS פאַרמאָג מיט אַ יסוד קאָליר אין קיין פּלאַץ, אַרייַנגערעכנט העקס: /* יסוד קאָליר */ - יסוד: #5אַקקד6;
קיין פֿאַרבן דערייווד פון עס וועט זיין קאָנווערטעד אין OKLCH אויטאָמאַטיש: --foundation-light: oklch(פון var(--foundation) [...]; } --foundation-mid: oklch(פון var(--foundation) [...]; } --foundation-dark: oklch(פֿון var(--foundation) [...]; }
קאָרעוו קאָליר ווי אַ פּלאַן סיסטעם טראַכטן פון קאָרעוו קאָליר ווי געזאגט: "נעמען דעם קאָליר, טוויק עס, און געבן מיר די רעזולטאַט." עס זענען צוויי וועגן צו סטרויערן אַ קאָליר: אַבסאָלוט ענדערונגען און פּראַפּאָרשאַנאַל ענדערונגען. זיי קוקן ענלעך אין קאָד, אָבער ביכייווז זייער דיפערענטלי אַמאָל איר אָנהייב ויסבייַטן יסוד פארבן. פארשטאנד אַז די חילוק איז וואָס קענען ווענדן ניצן קאָרעוו קאָליר אין אַ סיסטעם. /* יסוד קאָליר */ - יסוד: #5אַקקד6;
פֿאַר בייַשפּיל, די לייטנאַס ווערט פון מיין יסוד קאָליר איז 0.7837, בשעת אַ דאַרקער ווערסיע האט אַ ווערט פון 0.5837. צו רעכענען די חילוק, איך אַראָפּרעכענען די נידעריקער ווערט פון די העכער און צולייגן די רעזולטאַט מיט אַ קאַלק () פֿונקציע: --foundation-dark: oklch (פֿון var (--foundation) קאַלק (ל - 0.20) C ה);
צו דערגרייכן אַ לייטער קאָליר, איך לייגן די חילוק אַנשטאָט: - יסוד-ליכט: oklch (פֿון var (--foundation) קאַלק (ל + 0.10) C ה);
טשראָמאַאַדזשאַסטמאַנץ נאָכגיין די זעלבע פּראָצעס. צו רעדוצירן די ינטענסיטי פון מיין יסוד קאָליר פון 0.1035 צו 0.0035, איך אַראָפּרעכענען איין ווערט פון די אנדערע: oklch (פֿון var (--foundation) ל קאַלק(C - 0.10) ה);
צו מאַכן אַ פּאַליטרע פון כיוז, איך רעכענען די חילוק צווישן די כיו ווערט פון מיין יסוד קאָליר (200) און מיין נייַ כיו (260): oklch (פֿון var (--foundation) l c calc (ה + 60));
די חשבונות זענען אַבסאָלוט. ווען איך אַראָפּרעכענען אַ פאַרפעסטיקט סומע, איך בין יפעקטיוולי זאָגן, "שטענדיק אַראָפּרעכענען דעם פיל." דער זעלביקער אַפּלייז ווען אַדינג פאַרפעסטיקט וואַלועס: קאַלק(c - 0.10) קאַלק(c + 0.10)
איך געלערנט די לימאַץ פון דעם צוגאַנג די שווער וועג. ווען איך רילייד אויף סאַבטראַקטינג פאַרפעסטיקט טשראָמאַ וואַלועס, די פארבן קאַלאַפּסט צו גרוי ווי באַלד ווי איך געביטן דעם יסוד. א פּאַליטרע וואָס געארבעט פֿאַר איין קאָליר איז געפאלן באַזונדער פֿאַר אנדערן. קייפל ביכייווז דיפערענטלי. ווען איך מערן טשראָמאַ, איך זאָגן דעם בלעטערער: "פאַרמינערן די ינטענסיטי פון דעם קאָליר מיט אַ פּראָפּאָרציע." די שייכות צווישן פארבן בלייבט בעשאָלעם, אפילו ווען דער יסוד ענדערונגען: קאַלק(c * 0.10)
מייַן מאָווע עס, וואָג עס, דרייען עס כּללים
מאַך לייטנאַס (לייג אָדער אַראָפּרעכענען), וואָג טשראָמאַ (מערן), דרייען כיו (לייגן אָדער אַראָפּרעכענען דיגריז).
איך וואָג טשראָמאַ ווייַל איך ווילן ינטענסיטי ענדערונגען צו בלייַבן פּראַפּאָרשאַנאַל צו די באַזע קאָליר. כיו באציונגען זענען ראָוטיישאַנאַל, אַזוי מאַלטאַפּלייינג כיו מאכט קיין זינען. לייטנאַס איז פּערסעפּטשואַל און אַבסאָלוט - מאַלטאַפּלייינג עס אָפט טראגט מאָדנע רעזולטאַטן.
פֿון איין קאָליר צו אַ גאַנץ טעמע קאָרעוו קאָליר אַלאַוז מיר צו דעפינירן אַ יסוד קאָליר און דזשענערייט יעדער אנדערע קאָליר איך דאַרפֿן - פילז, סטראָקעס, גראַדיענט סטאַפּס, שאַדאָוז - פֿון עס. אין דעם פונט, קאָליר סטאַפּס צו זיין אַ פּאַליטרע און סטאַרץ צו זיין אַ סיסטעם. SVG אילוסטראציעס טענד צו רייוז די זעלבע ביסל פארבן אַריבער פילז, סטראָקעס און גראַדיענץ. קאָרעוו קאָליר לעץ איר דעפינירן די באציונגען אַמאָל און רייוז זיי אומעטום - פיל ווי אַנאַמייטערז ריוזד באַקגראַונדז צו שאַפֿן נייַע סינז.
טוישן די יסוד קאָליר אַמאָל, און יעדער דערייווד קאָליר דערהייַנטיקונגען אויטאָמאַטיש, אָן ריקאַלקיאַלייטינג עפּעס מיט האַנט. אַרויס פון אַנימאַטעד גראַפיקס, איך קען נוצן דעם זעלבן צוגאַנג צו דעפינירן פארבן פֿאַר די שטאַטן פון ינטעראַקטיוו עלעמענטן אַזאַ ווי קנעפּלעך און לינקס. דער יסוד קאָליר איך געוויינט אין מיין "לולאַביע-ביי בער" טיטל איז אַ ציאַן-קוקן בלוי. דער הינטערגרונט איז אַ ריידיאַל גראַדיענט צווישן מיין יסוד און אַ דאַרקער ווערסיע.
צו שאַפֿן אָלטערנאַטיוו ווערסיעס מיט גאָר פאַרשידענע שטימונגען, איך נאָר דאַרפֿן צו טוישן די יסוד קאָליר: - יסוד: #5אַקקד6; --grad-end: var(--foundation); --grad-start: oklch (פֿון var (--foundation) קאַלק(ל - 0.2357) קאַלק(C * 0.833) ה);
צו בינדן די מנהג פּראָפּערטיעס צו מיין SVG גראַדיענט אָן דופּליקאַט קאָליר וואַלועס, איך ריפּלייסט שווער-קאָדעד האַלטן-קאָליר וואַלועס מיט ינלינע סטיילז:
<דעפס>
דערנאָך, איך דארף צו ענשור אַז מיין טון טעקסט שטענדיק קאַנטראַסט מיט וועלכער יסוד קאָליר איך קלייַבן. א 180 דיגריז כיו ראָוטיישאַן טראגט אַ קאַמפּלאַמענטשי קאָליר וואָס אַוואַדע פּאָפּס - אָבער קענען ווייברייט ומבאַקוועם: .טעקסט-ליכט { פּלאָמבירן: oklch (פֿון var (--foundation) l c calc (ה + 180)); }
א 90 ° יבעררוק טראגט אַ לעבעדיק צווייטיק קאָליר אָן גאָר קאַמפּלאַמענטשי: .טעקסט-ליכט { פּלאָמבירן: oklch (פֿון var (--foundation) l c calc(ה - 90)); }
מייַן פאַרווייַלונג פון Quick Draw McGraw ס 1959 Toon טיטל "El Kabong" ניצט די זעלבע טעקניקס אָבער מיט אַ מער וועריד פּאַליטרע. פֿאַר בייַשפּיל, עס איז אן אנדער ריידיאַל גראַדיענט צווישן די יסוד קאָליר און אַ דאַרקער שאָטן.
דער בנין און בוים אין דער הינטערגרונט זענען פשוט פאַרשידענע שיידז פון דער זעלביקער יסוד קאָליר. פֿאַר די פּאַטס, איך דארף צוויי נאָך פילונג פארבן: .bg-mid { פּלאָמבירן: oklch (פֿון var (--foundation) קאַלק(ל - 0.04) קאַלק(C * 0.91) ה); }
.בג-דאַרק { פּלאָמבירן: oklch (פֿון var (--foundation) קאַלק(ל - 0.12) קאַלק(C * 0.64) ה); }
ווען די יסודות אָנהייבן צו רירן ביז איצט, אַלץ וואָס איך האָבן געוויזן איז געווען סטאַטיק. אפילו ווען עמעצער ניצט אַ קאָליר פּיקער צו טוישן די יסוד קאָליר, די ענדערונג כאַפּאַנז טייקעף. אָבער אַנימאַטעד גראַפיקס ראַרעלי שטיין נאָך - דער קלו איז אין דעם נאָמען. אַזוי, אויב קאָליר איז טייל פון די סיסטעם, עס איז קיין סיבה עס קען נישט ופלעבן אויך. צו ופלעבן די יסוד קאָליר, איך ערשטער דאַרפֿן צו שפּאַלטן עס אין די OKLCH טשאַנאַלז- ליכטיקייט, כראָמאַ און כיו. אָבער עס איז אַ וויכטיק עקסטרע שריט: איך דאַרפֿן צו פאַרשרייַבן די וואַלועס ווי טייפּט מנהג פּראָפּערטיעס. אבער וואס מיינט דאס? דורך פעליקייַט, אַ בלעטערער קען נישט וויסן צי אַ CSS מנהג פאַרמאָג ווערט רעפּראַזענץ אַ קאָליר, לענג, נומער אָדער עפּעס אַנדערש לעגאַמרע. דאָס אָפט מיטל אַז זיי קענען נישט זיין ינטערפּאַלייטיד סמודלי בעשאַס אַנאַמיישאַן און שפּרינגען פון איין ווערט צו דער ווייַטער. רעדזשיסטערינג אַ מנהג פאַרמאָג דערציילט דעם בלעטערער די טיפּ פון ווערט עס רעפּראַזענץ און ווי עס זאָל ביכייווז איבער צייַט. אין דעם פאַל, איך ווילן די בלעטערער צו מייַכל מיין קאָליר טשאַנאַלז ווי נומערן אַזוי זיי קענען זיין אַנימאַטעד סמודלי. @property --f-l { סינטאַקס: "<נומער>"; ינכעראַץ: אמת; ערשט-ווערט: 0.40; }
@property --f-c { סינטאַקס: "<נומער>"; ינכעראַץ: אמת; ערשט-ווערט: 0.11; }
@property --f-h { סינטאַקס: "<נומער>"; ינכעראַץ: אמת; ערשט-ווערט: 305; }
אַמאָל רעגיסטרירט, די מנהג פּראָפּערטיעס ביכייוו ווי געבוירן CSS. דער בלעטערער קענען ינטערפּאָלייט זיי ראַם-דורך-ראַם. איך דעמאָלט ריבילד די יסוד קאָליר פֿון די טשאַנאַלז: --פֿונדאַמענט: אָקלטש(וואַר(--פ-ל) וואַר(--פ-ג) וואַר(-ף-ה));
דעם מאכט די יסוד קאָליר ווערן אַנימאַטעד, פּונקט ווי קיין אנדערע נומעריק ווערט. דאָ ס אַ פּשוט "ברידינג" אַנאַמיישאַן וואָס דזשענטלי שיפץ לייטנאַס איבער צייַט: @קייפראַמעס אָטעמען { 0%, 100% {-פ-ל: 0.36; } 50% {-פ-ל: 0.46; } }
.toon-title { אַנאַמיישאַן: אָטעמען 10 ס יז-אין-אויס ינפאַנאַט; }
ווייַל יעדער אנדערע קאָליר אין פילז, גראַדיענץ און סטראָקעס איז דערייווד פון --פאָונדאַטיאָן, זיי אַלע אַנימאַטעד צוזאַמען, און גאָרנישט דאַרף זיין דערהייַנטיקט מאַניואַלי. איין אַנימאַטעד קאָליר, פילע יפעקץ אין די אָנהייב פון דעם פּראָצעס, איך געחידושט צי CSS קאָרעוו קאָליר וואַלועס קען פאָרשלאָגן מער פּאַסאַבילאַטיז און מאַכן זיי סימפּלער צו ינסטרומענט. איך לעצטנס צוגעגעבן אַ נייַ גאָלד מייַן הינטערגרונט צו מיין וועבזייטל ס קאָנטאַקט בלאַט, און דער ערשטער יטעראַטיאָן ינקלודעד ייל לאַמפּס וואָס שייַנען און מאַך.
איך געוואלט צו ויספאָרשן ווי אַנאַמייטינג CSS קאָרעוו פארבן קען מאַכן די מייַן ינלענדיש מער רעאַליסטיש דורך טינטינג עס מיט פארבן פון די לאַמפּס. איך געוואלט זיי צו ווירקן די וועלט אַרום זיי, ווי פאַקטיש ליכט טוט. אַזוי, אלא ווי אַנאַמייטינג קייפל פֿאַרבן, איך געבויט אַ קליינטשיק לייטינג סיסטעם וואָס אַנאַמייץ בלויז איין קאָליר.
מייַן ערשטער אַרבעט איז געווען צו שפּעלטל אַ אָוווערליי שיכטע צווישן די הינטערגרונט און מיין לאמפן: <דרך id = "אָווערליי" fill = "וואַר (--אָווערליי-טינט)" [...] style="mix-blend-mode: color" />
איך געוויינט מישן-בלענדינג מאָדע: קאָליר ווייַל דאָס טינץ וואָס איז אונטער עס בשעת פּראַזערווינג די אַנדערלייינג לומאַנאַנס. ווי איך נאָר ווילן די אָוווערליי צו זיין קענטיק ווען אַנאַמיישאַנז זענען אויסגעדרייט אויף, איך געמאכט די אָוווערליי אָפּט-אין: .svg-mine #אָווערליי { ווייַז: גאָרניט; }
@מעדיע (פּרעפערס-רעדוסעד-מאָטיאָן: קיין ייבערהאַנט) { .svg-mine[data-animations=on] #אָווערליי { ווייַז: בלאָק; אָופּאַסאַטי: 0.5; } }
די אָוווערליי איז געווען אין פּלאַץ, אָבער נישט נאָך פארבונדן צו די לאמפן. איך דארף אַ ליכט מקור. מייַן לאמפן זענען פּשוט, און יעדער איינער כּולל אַ קרייַז עלעמענט וואָס איך בלערד מיט אַ פילטער. דער פילטער טראגט אַ זייער ווייך בלער איבער די גאנצע קרייַז.
אַנשטאָט אַנאַמייטינג די אָוווערליי און לאַמפּס סעפּעראַטלי, איך אַנאַמיישאַן אַ איין "פלאַם" קאָליר סימען און באַקומען אַלץ אַנדערש פון דעם. ערשטער, איך פאַרשרייַבן דריי טייפּט מנהג פּראָפּערטיעס פֿאַר OKLCH טשאַנאַלז: @ פאַרמאָג --פל-ל { סינטאַקס: "<נומער>"; ינכעראַץ: אמת; ערשט-ווערט: 0.86; } @property --fl-c { סינטאַקס: "<נומער>"; ינכעראַץ: אמת; ערשט-ווערט: 0.12; } @property --fl-h { סינטאַקס: "<נומער>"; ינכעראַץ: אמת; ערשט-ווערט: 95; }
איך אַנימאַטעד די טשאַנאַלז, דיליבראַטלי פּושינג אַ ביסל ראָמען צו מאַראַנץ אַזוי די פליקער לייענט קלאר ווי פייער ליכט:
@קייפראַמעס פלאַם { 0%, 100% {-פל-ל: 0.86; --פל-c: 0.12; --פל-ה: 95; } 6% {-פל-ל: 0.91; --פל-c: 0.10; --פל-ה: 92; } 12% {-פל-ל: 0.83; --פל-c: 0.14; --פל-ה: 100; } 18% {-פל-ל: 0.88; --פל-c: 0.11; --פל-ה: 94; } 24% {-פל-ל: 0.82; --פל-c: 0.16; --פל-ה: 82; } 30% {-פל-ל: 0.90; --פל-c: 0.12; --פל-ה: 90; } 36% {-פל-ל: 0.79; --פל-c: 0.17; --פל-ה: 76; } 44% {-פל-ל: 0.87; --פל-c: 0.12; --פל-ה: 96; } 52% {-פל-ל: 0.81; --פל-c: 0.15; --פל-ה: 102; } 60% {-פל-ל: 0.89; --פל-c: 0.11; --פל-ה: 93; } 68% {-פל-ל: 0.83; --פל-c: 0.16; --פל-ה: 85; } 76% {-פל-ל: 0.91; --פל-c: 0.10; --פל-ה: 91; } 84% {-פל-ל: 0.85; --פל-c: 0.14; --פל-ה: 98; } 92% {--פל-ל: 0.80; --פל-c: 0.17; --פל-ה: 74; } }
דערנאָך איך האָב די אַנאַמיישאַן צו די SVG, אַזוי די שערד וועריאַבאַלז זענען בארעכטיגט פֿאַר ביידע לאַמפּס און מיין אָוווערליי:
@מעדיע (פּרעפערס-רעדוסעד-מאָטיאָן: קיין ייבערהאַנט) { .svg-mine[data-animations=on] { אַנאַמיישאַן: פלאַם 3.6 ס ינפאַנאַט לינעאַר; יסאָלאַטיאָן: יזאָלירן;
/* בויען אַ פלאַם קאָליר פון אַנימאַטעד טשאַנאַלז */ --פלאם: oklch(var(--פל-ל) var(--פל-c) var(--פל-ה));
/* לאָמפּ קאָליר דערייווד פון פלאַם */ --lamp-core: oklch(פון var(--פלאַם) calc(l + 0.05) calc(c * 0.70) ה);
/* אָוווערליי טינט דערייווד פון דער זעלביקער פלאַם */ - אָוווערליי-טינט: oklch (פֿון וואַר (- פלאַם) קאַלק(ל + 0.06) קאַלק(C * 0.65) קאַלק(ה - 10)); } }
צום סוף, איך געווענדט די דערייווד פארבן צו די גלאָוינג לאמפן און די אָוווערליי זיי ווירקן: @מעדיע (פּרעפערס-רעדוסעד-מאָטיאָן: קיין ייבערהאַנט) { .svg-mine[data-animations=on] #mine-lamp-1 > קרייַז, .svg-mine[data-animations=on] #mine-lamp-2 > קרייַז { פּלאָמבירן: וואַר (- לאָמפּ-האַרץ); }
.svg-mine[data-animations=on] #אָווערליי { ווייַז: בלאָק; פּלאָמבירן: וואַר (- אָוווערליי-טינט); אָופּאַסאַטי: 0.5; } }
ווען די פלאַם שיפט זיך צו מאַראַנץ, די לאמפן וואַרעמען זיך, און די סצענע וואַרעמען מיט זיי. ווען די פלאַם קיל, אַלץ געזעצט צוזאַמען. דער בעסטער טייל איז אַז גאָרנישט איז געשריבן מאַניואַלי. אויב איך טוישן די יסוד קאָליר אָדער טוויק די פלאַם אַנאַמיישאַן ריינדזשאַז, די גאנצע לייטינג סיסטעם דערהייַנטיקונגען סיימאַלטייניאַסלי. איר קענען זען די לעצט רעזולטאַט אויף מיין וועבזייטל. רינוסע, רעפּורפּאָסע, ריוויזיטעד יענע Hanna-Barbera אַנאַמייטערז זענען געצווונגען צו רעפּורפּאָסע עלעמענטן אויס פון נויט, אָבער איך רייוז פארבן ווייַל עס מאכט מיין אַרבעט מער קאָנסיסטענט און גרינגער צו טייַנען. CSS קאָרעוו קאָליר וואַלועס לאָזן מיר צו:
דעפינירן אַ איין יסוד קאָליר, באַשרייַבן ווי אנדערע פארבן פאַרבינדן צו אים, רייוס די באציונגען אומעטום, און אַנימירן די סיסטעם דורך טשאַנגינג איין ווערט.
קאָרעוו קאָליר טוט נישט נאָר מאַכן טימינג גרינגער. עס ינקעראַדזשאַז אַ וועג פון טראכטן ווו קאָליר, ווי באַוועגונג, איז ינטענשאַנאַל - און ווו טשאַנגינג איין ווערט קענען יבערמאַכן אַ גאַנץ סצענע אָן רירייטינג די ווערק ונטער.
