נאָך ענדיקן אַ פּרויעקט וואָס פארלאנגט מיר צו לערנען אַלץ איך קען וועגן CSS און SVG אַנאַמיישאַנז, איך סטאַרטעד שרייבן די סעריע וועגן סמאַשינג אַנאַמיישאַנז און "ווי קלאַסיש קאַרטאָאָנס ינספּירירן מאָדערן CSS." צו פאַרענדיקן דעם יאָר, איך ווילן צו ווייַזן איר ווי צו נוצן מאָדערן CSS צו שאַפֿן דעם עלעמענט וואָס מאכט Toon טיטלען אַזוי ימפּרעסיוו: זייער טיפּאָגראַפי. טיטל אַרטוואָרק פּלאַן אין דער שטילער עפאכע פון די 1920ער און פרי 30ער יארן, האט די טיפאגראפיע פון א פילם'ס טיטל קארטל באשאפן א שטימונג, געשטעלט די סצענע און דערמאנט אן וילעם דעם סארט פילם וואס זיי האבן באצאלט צו זען.
קאַרטון טיטל קאַרדס זענען אויך בראַנדינג, שטימונג און סצענע באַשטעטיקן, אַלע ראָולד אין איין. אין די פרי יאָרן, ווען די הויפּט סטודיע באַדזשיץ זענען ביגער, די טיטל קאַרדס זענען אָפט יללוסטראַטיוו און פּיינטיד.
אבער ווען טעלעוויזיע בום בעשאַס די 1950 ס, באַדזשיץ דראַפּט, און קאַרדס דיזיינד דורך קינסטלער ווי לאָראַנס "קונסט" גאָבלע אנגענומען אַ נייַע וויזשאַוואַל שפּראַך, שיין מער גראַפיק, סטיילייזד און ווייניקער ינטראַקאַט. באַמערקונג: לאָראַנס "קונסט" גאָבלע איז איינער פון די אָפט אָוווערלוקט העלדן פון מיטן יאָרהונדערט אמעריקאנער אַנאַמיישאַן. ער האָט בפֿרט געאַרבעט פֿאַר כאַנאַ-באַרבעראַ אין די מערסט ינפלוענטשאַל יאָרן פון די 1950 ס און 1960 ס. גאָבלע איז נישט געווען אַ כאַראַקטער אַנימאַטאָר. זיין ראָלע איז געווען צו שאַפֿן אַטמאָספער, אַזוי ער דיזיינד ינווייראַנמאַנץ פֿאַר די פלינצטאָונז, Huckleberry Hound, Quick Draw McGraw און Yogi Bear, ווי אויך די עפן טיטל קאַרדס וואָס שטעלן דעם טאָן. זיין טיטל קאַרדס, מיט פּיינטינגז מיט אַ לאָגאָ אָוווערלייד, געהאָלפֿן דעפינירן די יקאָניק קוק פון Hanna-Barbera. Goble ס אַרטוואָרק פֿאַר אותיות אַזאַ ווי Quick Draw McGraw און Yogi Bear איז געווען עפעקטיוו אויף קלענערער טעלעוויזיע סקרינז. אלא ווי צו רעפּראָדוצירן אַ סטיל פון די קאַרטון, ער פאָוקיסט אויף פאָרשטעלן אַ איין, שטאַרק געדאַנק - אָפט אין סילאַוועט - וואָס קאַפּטשערד זייַן עסאַנס. אין "דער בוזזין 'בער," יאָגי בוזז דורך אין אַ העליקאָפּטער. ער באַונסיז אַוועק, פּיק-אַ-ניק קאָרב אין האַנט, אין "בער אויף אַ מאַכנ אַ פּיקניק," און פֿאַר זיין "פּרייז קאַמף שרעק," יאָגי באָקסעס די טיטל טעקסט.
מיט קליין אָדער קיין באַוועגונג צו פאַרלאָזנ אויף, Goble ס איין ראָמען האט צו שאַפֿן אַ שטימונג, שטעלן די סצענע און באַשרייַבן אַ געשיכטע. זיי האבן דאָס מיט פלאַך פארבן, גראַפיק שאַפּעס און טיפּאָגראַפי וואָס איז אָפט ינאַגרייטיד אין די אַרטוואָרק.
ווי דיזיינערז וואָס אַרבעט אויף די וועב, טון טיטלען קענען לערנען אונדז פילע וועגן ווי צו קאַנוויי די פּערזענלעכקייט פון אַ סאָרט, מאַכן אַ ערשטער רושם און שטעלן עקספּעקטיישאַנז פֿאַר עמעצער ס דערפאַרונג מיט אַ פּראָדוקט אָדער וועבזייטל. מיר קענען לערנען פון די טעקניקס פון די קינסטלער צו שאַפֿן עפעקטיוו באַנערז, כעדערז פון לאַנדינג בלאַט און אפילו גוט אָל-פאַשאַנד שפּריצן סקרינז. טון טיטל טיפּאָגראַפי קאַרטון טיטל קאַרדס ווייַזן ווי צונויפגיסן טיפּ מיט ימאַדזשרי דיליווערז די זעץ אַ כעדער אָדער העלד דאַרף. מיט אַ האַנדפול פון טעקסט-שאַטן, טעקסט-מאַך און יבערמאַכן טריקס, מאָדערן CSS אַלאַוז איר צו נוצן די זעלבע ענערגיע.
די טון טעקסט טיטל גענעראַטאָר טיילווייַז דורך שרייבן דעם אַרטיקל, איך איינגעזען עס וואָלט זיין נוציק צו האָבן אַ געצייַג פֿאַר דזשענערייטינג טעקסט סטיילד ווי די קאַרטון טיטלען וואָס איך ליבע אַזוי פיל. אַזוי איך געמאכט איין. My Toon Text Title Generator אַלאַוז איר צו עקספּערימענט מיט פארבן, סטראָקעס און קייפל טעקסט שאַדאָוז. איר קענען סטרויערן פּיינט סדר, צולייגן בריוו ספּייסינג, פאָרויסיקע ווייַזונג דיין טעקסט אין אַ סעלעקציע פון מוסטער פאַנץ, און נאָכמאַכן די דזשענערייטאַד CSS גלייך צו דיין קליפּבאָרד צו נוצן אין אַ פּרויעקט. טון טיטל CSS איר קענט פשוט נאָכמאַכן און פּאַפּ די CSS וואָס די Toon Text Title Generator גיט איר. אָבער לאָזן ס קוק נעענטער אין וואָס עס טוט. טעקסט שאָטן קוק אויף דעם טיפּ אין דעם טיטל פון Augie Doggie ס עפּיזאָד "Yuk-Yuk Duck," מיט זיין בלאַס געל אותיות און טונקל, שווער, פאָטאָ שאָטן וואָס הייבן עס אַוועק די הינטערגרונט און קריייץ די אילוזיע פון טיפקייַט.
איר מיסטאָמע שוין וויסן אַז טעקסט-שאָטן אַקסעפּץ פיר וואַלועס: (1) האָריזאָנטאַל און (2) ווערטיקאַל אָפסעץ, (3) בלער, און (4) אַ קאָליר וואָס קענען זיין האַרט אָדער האַלב-טראַנספּעראַנט. די אָפסעט וואַלועס קענען זיין positive אָדער נעגאַטיוו, אַזוי איך קענען רעפּלאַקייט "Yuk-Yuk Duck" ניצן אַ שווער שאָטן פּולד אַראָפּ און צו די רעכט: קאָליר: #f7f76d; טעקסט-שאָטן: 5px 5px 0 #1e1904;
אויף די אנדערע האַנט, דעם "פּינט גיאַנט" טיטל האט אַ אַנדערש געפיל מיט זיין נעגאַטיוו האַלב-ווייך שאָטן: קאָליר: #c2a872; טעקסט-שאָטן: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
צו לייגן עקסטרע טיפקייַט און מאַכן מער טשיקאַווע יפעקץ, איך קענען שיכטע קייפל שאַדאָוז. פֿאַר "זאל ס דאַק אויס," איך פאַרבינדן פיר שאַדאָוז: דער ערשטער אַ האַרט שאָטן מיט אַ נעגאַטיוו האָריזאָנטאַל פאָטאָ צו הייבן די טעקסט אַוועק די הינטערגרונט, נאכגעגאנגען דורך פּראַגרעסיוו סאַפטער שאַדאָוז צו מאַכן אַ בלער אַרום אים: קאָליר: #6פ4ד80; טעקסט-שאָטן: -5 פּקס5px 0 #260e1e, /* שאָטן 1 */ 0 0 15px #e9ce96, /* שאָטן 2 */ 0 0 30px #e9ce96, /* שאָטן 3 */ 0 0 30px #e9ce96; /* שאָטן 4 */
די שאַדאָוז ווייַזן אַז די נוצן פון טעקסט-שאָטן איז נישט בלויז צו שאַפֿן לייטינג יפעקץ, ווייַל זיי קענען אויך זיין דעקאָראַטיווע און לייגן פּערזענלעכקייט. טעקסט סטראָוק פילע קאַרטון טיטל קאַרדס האָבן אותיות מיט אַ דרייסט אַוטליין וואָס מאכט זיי שטיין אויס פון די הינטערגרונט. איך קענען ריקריייט דעם ווירקונג מיט טעקסט-מאַך. פֿאַר אַ לאַנג צייַט, דעם פאַרמאָג איז בלויז בנימצא דורך אַ -וועבקיט- פּרעפיקס, אָבער דאָס אויך מיטל אַז עס איז איצט געשטיצט אַריבער מאָדערן בראַוזערז.
טעקסט-מאַך איז אַ סטענאָגראַפיע פֿאַר צוויי פּראָפּערטיעס. דער ערשטער, טעקסט-מאַך-ברייט, דראָז אַ קאַנטור אַרום יחיד אותיות, בשעת די רגע, טעקסט-מאַך-קאָליר, קאָנטראָלס זייַן קאָליר. פֿאַר "וועלכער גייט פּופּ," איך צוגעגעבן אַ 4 פּקס בלוי מאַך צו די געל טעקסט: קאָליר: #eff0cd; -וועבקיט-טעקסט-מאַך: 4פּקס #7890ב5; טעקסט-מאַך: 4px #7890b5;
סטראָקעס קענען זיין ספּעציעל נוציק ווען זיי זענען קאַמביינד מיט שאַדאָוז, אַזוי פֿאַר "גראָוינג, גראָוינג, ניטאָ," איך צוגעגעבן אַ דין 3 פּקס מאַך צו אַ קוים בלערד 1 פּקס שאָטן צו שאַפֿן דעם דריי-דימענשאַנאַל טעקסט ווירקונג: קאָליר: #פבב999; טעקסט-שאָטן: 3px 5px 1px #5160b1; -וועבקיט-טעקסט-מאַך: 3פּקס #984336; טעקסט-מאַך: 3px #984336;
פּיינט סדר ניצן טעקסט-מאַך טוט נישט שטענדיק פּראָדוצירן די דערוואַרט רעזולטאַט, ספּעציעל מיט טינער אותיות און טיקער סטראָקעס, ווייַל דורך פעליקייַט דער בלעטערער דראָז אַ מאַך איבער די פּלאָמבירן. צום באַדויערן, CSS נאָך קען נישט לאָזן מיר צו סטרויערן מאַך פּלייסמאַנט ווי איך אָפט טאָן אין סקעטש. אָבער, די פאַרב-סדר פאַרמאָג האט וואַלועס וואָס לאָזן מיר צו שטעלן די מאַך הינטער, אלא ווי אין פראָנט פון די פּלאָמבירן.
פּיינט-סדר: מאַך פּיינט די מאַך ערשטער, דעמאָלט דער פּלאָמבירן, כוועראַז פּיינט-סדר: פּלאָמבירן טוט די פאַרקערט: קאָליר: #פבב999; פאַרב-סדר: פּלאָמבירן; טעקסט-שאָטן: 3px 5px 1px #5160b1; טעקסט-מאַך-קאָליר: #984336; טעקסט-מאַך-ברייט: קסנומקספּקס;
אַ עפעקטיוו מאַך האלט אותיות ליינעוודיק, מוסיף וואָג, און - ווען קאַמביינד מיט שאַדאָוז און פאַרב סדר - גיט פלאַך טעקסט פאַקטיש בייַזייַן. באַקגראַונדז ין טעקסט פילע קאַרטון טיטל קאַרדס גיין ווייַטער פון פלאַך קאָליר דורך אַדינג געוועב, גראַדיענץ אָדער יללוסטראַטעד דעטאַל צו די לעטערינג. מאל דאָס איז אַ געוועב, אנדערע מאל עס קען זיין אַ גראַדיענט מיט אַ סאַטאַל טאָנאַל יבעררוק. אויף די וועב, איך קענען ריקריייט דעם ווירקונג דורך ניצן אַ הינטערגרונט בילד אָדער גראַדיענט הינטער דעם טעקסט, און דעמאָלט קלירינג עס צו די פאָרעם פון די אותיות. דאָס רילייז אויף צוויי פּראָפּערטיעס ארבעטן צוזאַמען: הינטערגרונט-קלעמערל: טעקסט און טעקסט-פילל-קאָליר: טראַנספּעראַנט.
ערשטער, איך צולייגן אַ הינטערגרונט הינטער דעם טעקסט. דאָס קען זיין אַ ביטמאַפּ אָדער וועקטאָר בילד אָדער אַ CSS גראַדיענט. פֿאַר דעם בייַשפּיל פון די קוויק דראַוו מאַקגראַוו עפּיזאָד "באַבאַ בייט," דער טיטל טעקסט כולל אַ סאַטאַל שפּיץ-דנאָ גראַדיענט פון טונקל צו ליכט: הינטערגרונט: לינעאַר-גראַדיענט (0דעג, #667ב6אַ, #1ד271אַ);
דערנאָך, איך קלעמערל דעם הינטערגרונט צו די גליפס און מאַכן די טעקסט טראַנספּעראַנט אַזוי די הינטערגרונט איז געוויזן דורך: -וועבקיט-הינטערגראָונד-קלעמערל: טעקסט; -וועבקיט-טעקסט-פילל-קאָליר: טראַנספּעראַנט;
מיט בלויז די צוויי שורות, דער הינטערגרונט איז ניט מער פּיינטיד הינטער דעם טעקסט; אַנשטאָט, עס איז פּיינטיד אין עס. דעם טעכניק אַרבעט ספּעציעל גוט ווען קאַמביינד מיט סטראָקעס און שאַדאָוז. א קליפּט גראַדיענט גיט די לעטערינג מיט קאָלירן און געוועב, אַ מאַך האלט זיין עדזשאַז שאַרף, און אַ שאָטן עלאַווייץ עס פון די הינטערגרונט. צוזאַמען, זיי ריקריייט די לייערד קוק פון האַנט-פּיינטיד טיטל קאַרדס מיט גאָרנישט מער ווי אַ ביסל CSS. ווי שטענדיק, פּרובירן קליפּט טעקסט קערפאַלי, ווייַל בלעטערער קווערקס קענען מאל ווירקן שאַדאָוז און רענדערינג. שפּאַלטן טעקסט אין יחיד אותיות מאל איך טאָן נישט וועלן צו סטיל אַ גאַנץ וואָרט אָדער כעדינג. איך ווילן צו סטיל יחיד אותיות - צו נאַדזש אַ כאַראַקטער אין פּלאַץ, געבן איין גליף עקסטרע וואָג, אָדער אַנאַליסיס אַ ביסל אותיות ינדיפּענדאַנטלי. אין קלאָר HTML און CSS, עס איז בלויז איין פאַרלאָזלעך וועג צו טאָן דאָס: ייַנוויקלען יעדער כאַראַקטער אין זיין אייגענע שפּאַן עלעמענט. איך קען טאָן דאָס מאַניואַלי, אָבער דאָס וואָלט זיין שוואַך, שווער צו טייַנען, און וואָלט געשווינד פאַלן באַזונדער ווען קאָפּיע ענדערונגען. אַנשטאָט, ווען איך דאַרפֿן פּער-בריוו קאָנטראָל, איך נוצן אַ טעקסט-ספּליטטינג ביבליאָטעק ווי splt.js (כאָטש אנדערע סאַלושאַנז זענען בנימצא). דאָס נעמט אַ טעקסט נאָדע און אויטאָמאַטיש ראַפּס ווערטער אָדער אותיות, געבן מיר עקסטרע כוקס צו ופלעבן און סטיל אָן מעסינג מיין מאַרקאַפּ. דאָס איז אַן צוגאַנג וואָס האלט מיין HTML ליינעוודיק און סעמאַנטיק, און געבן מיר די פיין-גריינד קאָנטראָל איך דאַרפֿן צו ריקריייט די אַניוואַן, כאַראַקטעריסטיש טיפּאָגראַפי איר זען אין קלאַסיש קאַרטון טיטל קאַרדס. אָבער, דעם צוגאַנג קומט מיטאַקסעסאַביליטי קייוויאַץ, ווייַל רובֿ פאַרשטעלן לייענער לייענען טעקסט נאָודז אין סדר. אַזוי דאָס: <ה2>ברומען זיס ברומען
... לייענט ווי איר וואָלט דערוואַרטן: ברומען זיס ברומען
אָבער דאָס: <ה2> H u m
... קענען זיין ינטערפּראַטאַד דיפערענטלי דיפּענדינג אויף דעם בלעטערער און פאַרשטעלן לייענער. עטלעכע וועלן קאַנקאַטאַנייט די אותיות און לייענען די ווערטער ריכטיק. אנדערע קען פּויזע צווישן אותיות, וואָס אין אַ ערגסט-פאַל סצענאַר קען געזונט ווי: "ה..." "ו..." "מ..."
צום באַדויערן, עטלעכע ספּליטינג סאַלושאַנז טאָן ניט צושטעלן אַן שטענדיק צוטריטלעך רעזולטאַט, אַזוי איך האָבן געשריבן מיין אייגענע טעקסט ספּליטטער, splinter.js, וואָס איז דערווייַל אין ביתא. יבערמאַכן יחיד אותיות צו אַקטאַווייט מיין טון טעקסט ספּליטטער, איך לייגן אַ דאַטן אַטריביוט צו דעם עלעמענט איך ווילן צו שפּאַלטן:
ברומען זיס ברומען
ערשטער, מיין שריפט סעפּערייץ יעדער וואָרט אין יחיד אותיות און ראַפּס זיי אין אַ שפּאַן עלעמענט מיט קלאַס און ARIA אַטריביוץ געווענדט:
דער שריפט דערנאָך נעמט די ערשט אינהאַלט פון די שפּאַלטן עלעמענט און מוסיף עס ווי אַ אַטריביוט צו העלפן האַלטן אַקסעסאַביליטי:
מיט די קלאַס אַטריביוץ געווענדט, איך קענען דעמאָלט סטיל יחיד אותיות ווי איך קלייַבן.
פֿאַר בייַשפּיל, פֿאַר "ברומען זיס ברומען," איך ווילן צו רעפּלאַקייט ווי די אותיות יבעררוק אַוועק פון די באַסעלינע. נאָך ניצן מיין טון טעקסט ספּליטטער, איך געווענדט פיר פאַרשידענע איבערזעצן וואַלועס ניצן עטלעכע :nth-child סעלעקטאָרס צו שאַפֿן אַ האַלב-טראַנדאָם קוק: /* 4טע, 8טע, 12טע... */ .toon-char:nth-child(4n) { איבערזעצן: 0 -8פּקס; } /* 1טער, 5טער, 9טער... */ .toon-char:nth-child(4n+1) { איבערזעצן: 0 -4פּקס; } /* 2טע, 6טע, 10טע... */ .toon-char:nth-child(4n+2) { איבערזעצן: 0 4פּקס; } /* 3טער, 7טער, 11טער... */ .toon-char:nth-child(4n+3) { איבערזעצן: 0 8פּקס; }
אָבער איבערזעצן איז בלויז איין פאַרמאָג איך קענען נוצן צו יבערמאַכן מיין טון טעקסט.
איך קען אויך דרייען די יחיד אותיות פֿאַר אַן אפילו מער כאַאָטיש קוק: /* 4טע, 8טע, 12טע... */ .toon-line .toon-char:nth-child (4n) { דרייען: -4דעג; } /* 1טער, 5טער, 9טער... */ .toon-char:nth-child (4n + 1) { דרייען: -8דעג; } /* 2טע, 6טע, 10טע... */ .toon-char:nth-child(4n+2) {ראָוטירן: 4דעג; } /* 3טער, 7טער, 11טער... */ .toon-char:nth-child(4n+3) {ראָוטירן: 8דעג; }
אָבער איבערזעצן איז בלויז איין פאַרמאָג איך קענען נוצן צו יבערמאַכן מיין טון טעקסט. איך קען אויך דרייען די יחיד אותיות פֿאַר אַן אפילו מער כאַאָטיש קוק: /* 4טע, 8טע, 12טע... */ .toon-line .toon-char:nth-child(4n) { דרייען: -4דעג; }
/* 1טער, 5טער, 9טער... */ .toon-char:nth-child(4n+1) { דרייען: -8דעג; }
/* 2טע, 6טע, 10טע... */ .toon-char:nth-child(4n+2) { דרייען: 4דעג; }
/* 3טער, 7טער, 11טער... */ .toon-char:nth-child(4n+3) { דרייען: 8 דיגריז; }
און, פון קורס, איך קען לייגן אַנאַמיישאַנז צו דזשיגאַל די אותיות און ברענגען מיין טון טעקסט סטיל טיטלען צו לעבן. ערשטער, איך באשאפן אַ קיפראַמע אַנאַמיישאַן וואָס ראָוטייץ די אותיות:
@keyframes jiggle { 0%, 100% { יבערמאַכן: דרייען (וואַר (--באַזע-דרייען, 0 דעג)); } 25% { יבערמאַכן: דרייען (קאַלק (וואַר (- באַזע-דרייען, 0 דעג) + 3 דעג)); } 50% { יבערמאַכן: דרייען (קאַלק (וואַר (--באַזע-דרייען, 0 דעג) - 2 דעג)); } 75% { יבערמאַכן: דרייען (קאַלק (וואַר (--באַזע-דרייען, 0 דעג) + 1 דעג)); } }
איידער אַפּלייינג עס צו די שפּאַן עלעמענטן באשאפן דורך מיין Toon טעקסט ספּליטטער: .toon-char { אַנאַמיישאַן: דזשיגאַל 3 ס ינפאַנאַט יז-אין-אויס; יבערמאַכן-אָריגינעל: צענטער דנאָ; }
און לעסאָף, באַשטעטיקן די ראָוטיישאַן סומע און אַ פאַרהאַלטן איידער יעדער כאַראַקטער הייבט צו דזשיגאַל: .toon-char:nth-child(4n) {-base-rotate: -2deg; } .toon-char:nth-child(4n+1) {-base-rotate: -4deg; } .toon-char:nth-child(4n+2) {-base-rotate: 2deg; } .toon-char:nth-child(4n+3) {-base-rotate: 4deg; }
.toon-char:nth-child(4n) {אַנימאַטיאָן-פאַרהאַלטן: 0.1s; } .toon-char:nth-child(4n+1) {animation-delay: 0.3s; } .toon-char:nth-child(4n+2) {animation-delay: 0.5s; } .toon-char:nth-child(4n+3) {animation-delay: 0.7s; }
איין ראַם צו מאַכן אַ רושם קאַרטון טיטל קינסטלער האָבן איין ראַם צו מאַכן אַ רושם, און זייער טיפּאָגראַפי איז געווען ווי וויכטיק ווי די אַרטוואָרק זיי פּיינטיד. דער זעלביקער איז אמת אויף די וועב. א געזונט-דיזיינד כעדער אָדער העלדשטח דאַרף קלעריטי, כאַראַקטער און בטחון - ניט נאָר אַ פיידאַד פול-ברייט הינטערגרונט בילד. מיט אַ ביסל קערפאַלי אויסדערוויילט CSS פּראָפּערטיעס - שאַדאָוז, סטראָקעס, קליפּט באַקגראַונדז און עטלעכע ריסטריינד אַנאַמיישאַן - מיר קענען ריקריייט די זעלבע פּראַל. איך האָב ליב טון טעקסט ניט ווייַל איך בין בענקשאַפט, אָבער ווייַל די פּלאַן איז ינטענשאַנאַל. מאַכן דיליבראַט ברירות, און לאָזן אַ ביסל טון טעקסט טיפּאָגראַפי לייגן זעץ צו דיין דיזיינז.
