לאחר שסיימתי פרויקט שדרש ממני ללמוד כל מה שיכולתי על אנימציות CSS ו-SVG, התחלתי לכתוב את הסדרה הזו על Smashing Animations ו"איך קריקטורות קלאסיות מעוררות CSS מודרני". לסיום השנה הזו, אני רוצה להראות לכם איך להשתמש ב-CSS מודרני כדי ליצור את האלמנט הזה שהופך את Toon Titles למשפיע כל כך: הטיפוגרפיה שלהם. כותרת עיצוב יצירות אמנות בעידן השקט של שנות ה-20 ותחילת שנות ה-30, הטיפוגרפיה של כרטיס הכותרת של הסרט יצרה מצב רוח, קבעה את הסצינה והזכירה לקהל את סוג הסרט שהם שילמו כדי לראות.
כרטיסי כותרת מצוירים היו גם מיתוג, מצב רוח והגדרת סצנה, כולם התגלגלו לאחד. בשנים הראשונות, כאשר תקציבי הסטודיו הגדולים היו גדולים יותר, כרטיסי הכותרת הללו היו לרוב להמחשה וציוריים.
אבל כשהטלוויזיה פרחה במהלך שנות ה-50, התקציבים ירדו, וכרטיסים שעוצבו על ידי אמנים כמו לורנס "ארט" גובל אימצו שפה ויזואלית חדשה, והפכו לגרפית יותר, מסוגננת ופחות מורכבת. הערה: לורנס "ארט" גובל הוא אחד מגיבורי האנימציה האמריקאית של אמצע המאה שמתעלמים ממנו לעתים קרובות. הוא עבד בעיקר עבור חנה-ברברה במהלך השנים המשפיעות ביותר של שנות ה-50 וה-60. גובל לא היה אנימטור דמויות. תפקידו היה ליצור אווירה, אז הוא עיצב סביבות עבור The Flinstones, Huckleberry Hound, Quick Draw McGraw ו- Yogi Bear, כמו גם את כרטיסי הכותרת הפותחים שנתנו את הטון. כרטיסי הכותרת שלו, הכוללים ציורים עם לוגו, עזרו להגדיר את המראה האייקוני של חנה-ברברה. יצירות האמנות של גובל לדמויות כמו Quick Draw McGraw ו- Yogi Bear הייתה יעילה על מסכי טלוויזיה קטנים יותר. במקום לשחזר סטילס מהסרט המצויר, הוא התמקד בהצגת רעיון יחיד וחזק - לרוב בצללית - שתפס את מהותו. ב-"The Buzzin' Bear", יוגי מזמזם במסוק. הוא קופץ משם, סל פיק-א-ניק ביד, ב"דוב בפיקניק", ועבור ה"פריס Fight Fright" שלו, יוגי תופס את טקסט הכותרת.
עם מעט או ללא תנועה להסתמך עליה, הפריימים היחידים של גובל היו צריכים ליצור מצב רוח, לקבוע את הסצנה ולתאר סיפור. הם עשו זאת באמצעות צבעים שטוחים, צורות גרפיות וטיפוגרפיה ששולבו לעתים קרובות ביצירות האמנות.
כמעצבים שעובדים באינטרנט, כותרות של סרטים יכולים ללמד אותנו הרבה על איך להעביר את האישיות של המותג, לעשות רושם ראשוני ולהגדיר ציפיות לחוויה של מישהו בשימוש במוצר או באתר. אנחנו יכולים ללמוד מהטכניקות של האמנים ליצור באנרים יעילים, כותרות של דפי נחיתה ואפילו מסכי פתיחה עתיקים וטובים. טון כותרת טיפוגרפיה כרטיסי כותרת מצוירים מראים כיצד מיזוג סוג עם תמונות מספק את האגרוף שהכותרת או הגיבור צריכים. עם קומץ של טריקים של צל טקסט, קו טקסט וטרנספורמציה, CSS מודרני מאפשר לך לנצל את אותה אנרגיה.
מחולל הכותרות של Toon באמצע כתיבת מאמר זה, הבנתי שיהיה שימושי לקבל כלי ליצירת טקסט בסגנון כמו הכותרות המצוירות שאני כל כך אוהב. אז הכנתי אחד. My Toon Text Title Generator מאפשר לך להתנסות עם צבעים, קווים וצללי טקסט מרובים. אתה יכול להתאים את סדר הצבע, להחיל מרווח בין אותיות, להציג תצוגה מקדימה של הטקסט שלך במבחר של גופנים לדוגמה, ולאחר מכן להעתיק את ה-CSS שנוצר ישירות ללוח שלך כדי להשתמש בפרויקט. Toon Title CSS אתה יכול פשוט להעתיק ולהדביק את ה-CSS ש-Toon Text Title Generator מספק לך. אבל בואו נסתכל מקרוב על מה זה עושה. צל טקסט תראו את הטיפוס בכותר הזה מהפרק של Augie Doggie "Yuk-Yuk Duck", עם האותיות הצהובות החיוורות שלו והצל הכהה, הקשיח והאופסט, שמרים אותו מהרקע ויוצר אשליה של עומק.
אתה בטח כבר יודע ש-text-shadow מקבל ארבעה ערכים: (1) אופקי ו-(2) היסט אנכי, (3) טשטוש ו-(4) צבע שיכול להיות אחיד או שקוף למחצה. ערכי ההיסט האלה יכולים להיות חיוביים או שליליים, אז אני יכול לשכפל את "Yuk-Yuk Duck" באמצעות צל קשה שנמשך מטה וימינה: צבע: #f7f76d; text-shadow: 5px 5px 0 #1e1904;
מצד שני, לכותר "Pint Giant" הזה יש תחושה שונה עם הצל השלילי החצי-רך שלו: צבע: #c2a872; צל-טקסט: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
כדי להוסיף עומק נוסף וליצור אפקטים מעניינים יותר, אני יכול לשכב מספר צללים. עבור "Let's Duck Out", אני משלב ארבעה צללים: הראשון צללית מוצקה עם היסט אופקי שלילי כדי להרים את הטקסט מהרקע, ואחריו צללים רכים יותר ויותר כדי ליצור טשטוש סביבו: צבע: #6F4D80; צל-טקסט: -5 פיקסלים5px 0 #260e1e, /* Shadow 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* צל 4 */
הצללים האלה מראים ששימוש בצל בטקסט אינו רק יצירת אפקטי תאורה, שכן הם יכולים גם להיות דקורטיביים ולהוסיף אישיות. קו טקסט כרטיסי כותרת מצוירים רבים כוללים אותיות עם קו מתאר מודגש הגורם להן לבלוט מהרקע. אני יכול ליצור מחדש את האפקט הזה באמצעות טקסט טקסט. במשך זמן רב, מאפיין זה היה זמין רק באמצעות קידומת -webkit-, אבל זה גם אומר שהוא נתמך כעת בדפדפנים מודרניים.
text-stroke הוא קיצור של שני מאפיינים. הראשון, קו רוחב טקסט, משרטט קו מתאר סביב אותיות בודדות, ואילו השני, קו טקסט, שולט בצבעו. עבור "Whatever Goes Pup", הוספתי קו כחול של 4px לטקסט הצהוב: צבע: #eff0cd; -webkit-text-stroke: 4px #7890b5; טקסט-stroke: 4px #7890b5;
קווים יכולים להיות שימושיים במיוחד כשהם משולבים עם צללים, אז עבור "גדל, גדל, נעלמת", הוספתי קו דק של 3 פיקסלים לצל בקושי מטושטש של 1 פיקסלים כדי ליצור את אפקט הטקסט התלת מימדי הזה: צבע: #fbb999; text-shadow: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; טקסט-stroke: 3px #984336;
סדר צבע שימוש ב-Text-stroke לא תמיד מניב את התוצאה הצפויה, במיוחד באותיות דקות יותר וקוות עבות יותר, כי כברירת מחדל, הדפדפן מצייר קו על המילוי. למרבה הצער, CSS עדיין לא מאפשר לי להתאים את מיקום השבץ כפי שאני עושה לעתים קרובות ב-Sketch. עם זאת, למאפיין צבע-סדר יש ערכים המאפשרים לי למקם את הקו מאחורי, ולא לפני, המילוי.
paint-order: stroke צובע את הקו תחילה, ולאחר מכן את המילוי, ואילו paint-order: fill עושה את ההיפך: צבע: #fbb999; צבע-סדר: מילוי; text-shadow: 3px 5px 1px #5160b1; text-stroke-color:#984336; רוחב קו טקסט: 3 פיקסלים;
קו אפקטיבי שומר על קריאות אותיות, מוסיף משקל, ובשילוב עם צללים וסדר צבע - נותן לטקסט שטוח נוכחות אמיתית. רקעים בתוך טקסט כרטיסי כותרת מצוירים רבים חורגים מצבע שטוח על ידי הוספת מרקם, מעברי צבע או פרטים מאוירים לאותיות. לפעמים זה מרקם, לפעמים זה עשוי להיות שיפוע עם שינוי טונאלי עדין. באינטרנט, אני יכול ליצור מחדש את האפקט הזה על ידי שימוש בתמונת רקע או שיפוע מאחורי הטקסט, ולאחר מכן גזירה לצורת האותיות. זה מסתמך על שני מאפיינים שפועלים יחד: רקע-קליפ: טקסט וצבע-מילוי טקסט: שקוף.
ראשית, אני מחיל רקע מאחורי הטקסט. זה יכול להיות מפת סיביות או תמונה וקטורית או שיפוע CSS. עבור דוגמה זו מפרק Quick Draw McGraw "Baba Bait", טקסט הכותרת כולל שיפוע עדין מלמעלה-תחתון מחושך לבהיר: רקע: linear-gradient(0deg, #667b6a, #1d271a);
לאחר מכן, אני מצמיד את הרקע הזה לגליפים והופך את הטקסט לשקוף כך שהרקע יראה דרך: -webkit-background-clip: טקסט; -webkit-text-fill-color: שקוף;
רק עם שתי השורות האלה, הרקע כבר לא צבוע מאחורי הטקסט; במקום זאת, הוא מצויר בתוכו. טכניקה זו עובדת טוב במיוחד בשילוב עם משיכות וצללים. שיפוע קצוץ מספק לאותיות צבע ומרקם, קו משאיר את הקצוות שלו חדים וצל מרים אותו מהרקע. יחד, הם יוצרים מחדש את המראה השכבתי של כרטיסי כותרת מצוירים ביד תוך שימוש במעט CSS. כמו תמיד, בדוק בזהירות את הטקסט החתוך, שכן מוזרויות הדפדפן יכולות לפעמים להשפיע על הצללים והעיבוד. פיצול טקסט לתווים בודדים לפעמים אני לא רוצה לסגנן מילה או כותרת שלמה. אני רוצה לעצב אותיות בודדות - כדי לדחוף דמות למקומה, לתת לגליף אחד משקל נוסף, או להנפיש כמה אותיות באופן עצמאי. ב-HTML ו-CSS רגילים, יש רק דרך אמינה אחת לעשות זאת: לעטוף כל תו באלמנט span משלו. יכולתי לעשות זאת באופן ידני, אבל זה יהיה שביר, קשה לתחזוקה, ויתפרק במהירות כאשר העתקה משתנה. במקום זאת, כאשר אני צריך שליטה לפי אות, אני משתמש בספריית פיצול טקסט כמו splt.js (למרות שפתרונות אחרים זמינים). זה לוקח צומת טקסט ועוטף אוטומטית מילים או תווים, נותן לי ווים נוספים להנפשה ולסגנון מבלי לבלבל את הסימון שלי. זו גישה ששומרת על ה-HTML שלי קריא וסמנטי, תוך שהיא נותנת לי את השליטה העדינה שאני צריך כדי ליצור מחדש את הטיפוגרפיה הלא אחידה והאופיינית שאתה רואה בכרטיסי כותרת מצוירים קלאסיים. עם זאת, גישה זו באה עםאזהרות נגישות, שכן רוב קוראי המסך קוראים את צמתי הטקסט לפי הסדר. אז זה:
זמזום זמזום מתוק
... קורא כפי שהיית מצפה: המהם המהום מתוק
אבל זה:
H u מ
...ניתן לפרש אחרת בהתאם לדפדפן ולקורא המסך. יש שיצרפו את האותיות ויקראו את המילים בצורה נכונה. אחרים עשויים להשהות בין אותיות, שבמקרה הגרוע ביותר עשוי להישמע כמו: "H..." "U..." "M..."
למרבה הצער, חלק מפתרונות הפיצול אינם מספקים תוצאה תמיד נגישה, אז כתבתי את מפצל הטקסט שלי, splinter.js, שנמצא כעת בגרסת בטא. שינוי אותיות בודדות כדי להפעיל את ספליטר ה- Toon Text שלי, אני מוסיף תכונת נתונים לאלמנט שברצוני לפצל:
Hum Sweet Hum
ראשית, הסקריפט שלי מפריד כל מילה לאותיות בודדות ועוטף אותן באלמנט span עם תכונות class ו-ARIA מיושמות:
לאחר מכן, הסקריפט לוקח את התוכן הראשוני של האלמנט המפוצל ומוסיף אותו כתכונת aria כדי לסייע בשמירה על נגישות:
כאשר תכונות המחלקה מיושמות, אני יכול לעצב תווים בודדים לפי בחירתי.
לדוגמה, עבור "Hum Sweet Hum", אני רוצה לשחזר כיצד האותיות שלו מתרחקות מקו הבסיס. לאחר השימוש ב-Toon Text Splitter שלי, החלתי ארבעה ערכי תרגום שונים באמצעות מספר בוררי :nth-child כדי ליצור מראה אקראי למחצה: /* 4, 8, 12... */ .toon-char:nth-child(4n) { translate: 0 -8px; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { translate: 0 -4px; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) { translate: 0 4px; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { translate: 0 8px; }
אבל translate הוא רק מאפיין אחד שאני יכול להשתמש בו כדי לשנות את טקסט הטון שלי.
אני יכול גם לסובב את הדמויות הבודדות האלה למראה כאוטי עוד יותר: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { rotate: -4deg; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { rotate: -8deg; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) { rotate: 4deg; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { rotate: 8deg; }
אבל translate הוא רק מאפיין אחד שאני יכול להשתמש בו כדי לשנות את טקסט הטון שלי. אני יכול גם לסובב את הדמויות הבודדות האלה למראה כאוטי עוד יותר: /* 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% { transform: rotate(var(--base-rotate, 0deg)); } 25% { transform: rotate(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { transform: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { transform: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
לפני החלת אותו על רכיבי span שנוצרו על ידי ספליטר הטקסט שלי Toon: .toon-char { אנימציה: לנענע 3s קלות-in-out אינסופית; transform-origin: מרכז תחתית; }
ולבסוף, הגדרת כמות הסיבוב והשהייה לפני שכל דמות תתחיל לנענע: .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) { animation-delay: 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 שנבחרו בקפידה - צללים, משיכות, רקעים חתוכים וקצת אנימציה מאופקת - נוכל ליצור מחדש את אותה השפעה. אני אוהב טקסט בטון לא בגלל שאני נוסטלגי, אלא בגלל שהעיצוב שלו מכוון. בצע בחירות מכוונות, ותן לטיפוגרפיה קטנה של טקסט טקסט להוסיף אגרוף לעיצובים שלך.
