Apre m fini yon pwojè ki te mande m pou m aprann tout sa m te kapab sou animasyon CSS ak SVG, mwen te kòmanse ekri seri sa a sou Smashing Animations ak "Kijan Cartoons klasik enspire CSS modèn." Pou fini ane sa a, mwen vle montre w kouman pou w sèvi ak CSS modèn pou kreye eleman sa a ki fè Tit Toon gen anpil enpak: tipografi yo. Tit Design Artwork Nan epòk silans ane 1920 yo ak kòmansman ane 30 yo, tipografi kat tit yon fim te kreye yon atitid, mete sèn nan, epi raple yon odyans kalite fim yo te peye pou yo wè.
Kat tit desen yo te tou mak, atitid, ak sèn-anviwònman, tout woule nan yon sèl. Nan kòmansman ane yo, lè gwo bidjè estidyo yo te pi gwo, kat tit sa yo te souvan ilistrasyon ak penti.
Men, lè televizyon te boom pandan ane 1950 yo, bidjè te bese, ak kat ki te fèt pa atis tankou Lawrence "Art" Goble te adopte yon nouvo lang vizyèl, vin pi grafik, stilize, ak mwens konplike. Remak: Lawrence "Art" Goble se youn nan ewo yo souvan neglije nan animasyon Ameriken nan mitan syèk la. Li te travay prensipalman pou Hanna-Barbera pandan ane ki pi enfliyan li yo nan ane 1950 yo ak ane 1960 yo. Goble pa t yon animatè karaktè. Wòl li se te kreye atmosfè, kidonk li te fèt anviwònman pou Flintstones, Huckleberry Hound, Quick Draw McGraw, ak Yogi Bear, ansanm ak kat tit ouvèti ki te mete ton an. Kat tit li yo, ki gen penti ak yon logo ki kouvri, te ede defini aparans ikonik Hanna-Barbera. Travay atistik Goble pou karaktè tankou Quick Draw McGraw ak Yogi Bear te efikas sou pi piti ekran televizyon. Olye ke repwodui yon foto ki soti nan desen an, li konsantre sou prezante yon sèl, lide fò - souvan nan silwèt - ki te kaptire sans li yo. Nan "The Buzzin 'Bear," Yogi buz nan yon elikoptè. Li rebondi ale, pic-a-nic panyen nan men, nan "Bear on a Picnic," epi pou "Prize Fight Fright" li a, Yogi bwat tèks tit la.
Avèk ti mouvman oswa pa gen okenn mouvman yo konte sou, ankadreman sèl Goble yo te dwe kreye yon atitid, mete sèn nan, epi dekri yon istwa. Yo te fè sa lè l sèvi avèk koulè plat, fòm grafik, ak tipografi ki te souvan entegre nan travay atistik la.
Kòm konsèpteur ki travay sou entènèt la, tit toon yo ka anseye nou anpil sou fason pou transmèt pèsonalite yon mak, fè yon premye enpresyon, epi mete atant pou eksperyans yon moun lè l sèvi avèk yon pwodwi oswa yon sit entènèt. Nou ka aprann nan teknik atis yo pou kreye bandwòl efikas, headers paj aterisaj, e menm bon ansyen ekran Splash alamòd. Tipografi Tit Toon Kat tit desen ki pi ba yo montre kijan fusion tip ak imaj bay kout pwen yon header oswa yon ewo bezwen. Avèk yon ti ponyen tèks-lonbraj, tèks-konjesyon serebral, ak ke trik nouvèl transfòme, CSS modèn pèmèt ou pwofite nan menm enèji sa a.
Jeneratè Tit Tèks Toon Apati ekri atik sa a, mwen reyalize li ta itil pou gen yon zouti pou jenere tèks ki gen style tankou tit desen ki pi ba mwen renmen anpil. Se konsa, mwen te fè youn. My Toon Text Title Generator pèmèt ou fè eksperyans ak koulè, kou, ak plizyè lonbraj tèks. Ou ka ajiste lòd penti, aplike espas lèt, preview tèks ou a nan yon seleksyon echantiyon polis, ak Lè sa a, kopye CSS pwodwi a tou dwat nan clipboard ou a pou itilize nan yon pwojè. Toon Tit CSS Ou ka tou senpleman kopye-kole CSS ke Toon Text Title Generator ba ou a. Men, ann gade pi pre sa li fè. Tèks lonbraj Gade kalite nan tit sa a soti nan Episode Augie Doggie a "Yuk-Yuk Duck," ak lèt jòn pal li yo ak lonbraj nwa, difisil, konpanse ki leve li sou background nan epi kreye ilizyon nan pwofondè.
Petèt ou deja konnen ke tèks-lonbraj aksepte kat valè: (1) orizontal ak (2) konpanse vètikal, (3) flou, ak (4) yon koulè ki ka solid oswa semi-transparan. Valè konpanse sa yo ka pozitif oswa negatif, kidonk mwen ka repwodui "Yuk-Yuk Duck" lè l sèvi avèk yon lonbraj difisil rale desann ak sou bò dwat la: koulè: #f7f76d; tèks-lonbraj: 5px 5px 0 #1e1904;
Nan lòt men an, tit sa a "Pint Giant" gen yon santiman diferan ak lonbraj negatif semi-mou li yo: koulè: #c2a872; tèks-lonbraj: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Pou ajoute plis pwofondè ak kreye plis efè enteresan, mwen ka kouch plizyè lonbraj. Pou "Ann kanna soti," mwen konbine kat lonbraj: premye a yon lonbraj solid ak yon konpanse orizontal negatif leve tèks la sou background nan, ki te swiv pa lonbraj progresivman douser yo kreye yon flou alantou li: koulè: #6F4D80; tèks-lonbraj: -5px5px 0 #260e1e, /* Lonbraj 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Lonbraj 4 */
Lonbraj sa yo montre ke lè l sèvi avèk tèks-lonbraj se pa sèlman sou kreye efè ekleraj, menm jan yo kapab tou dekoratif epi ajoute pèsonalite. Tèks konjesyon serebral Anpil kat tit desen ki pi ba yo prezante lèt ak yon deskripsyon fonse ki fè yo kanpe soti nan background nan. Mwen ka rkree efè sa a lè l sèvi avèk tèks-konjesyon serebral. Pou yon tan long, pwopriyete sa a te disponib sèlman atravè yon prefiks -webkit-, men sa vle di tou li sipòte kounye a atravè navigatè modèn yo.
tèks-konjesyon serebral se yon kout pou de pwopriyete. Premye a, tèks-kou-lajè, trase yon kontou alantou lèt endividyèl yo, pandan y ap dezyèm nan, tèks-koulè-koulè, kontwole koulè li yo. Pou "Whatever Goes Pup," mwen te ajoute yon konjesyon serebral ble 4px nan tèks jòn la: koulè: #eff0cd; -webkit-text-stroke: 4px #7890b5; tèks-konjesyon serebral: 4px #7890b5;
Konjesyon serebral yo ka itil espesyalman lè yo konbine avèk lonbraj, kidonk pou "K ap grandi, grandi, ale," mwen te ajoute yon konjesyon serebral mens 3px nan yon lonbraj 1px apèn twoub pou kreye efè tèks twa dimansyon sa a: koulè: #fbb999; tèks-lonbraj: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; tèks-konjesyon serebral: 3px #984336;
Lòd Penti Sèvi ak tèks-konjesyon serebral pa toujou pwodui rezilta espere a, espesyalman ak lèt ki pi mens ak konjesyon serebral pi epè, paske pa default navigatè a trase yon konjesyon serebral sou ranpli a. Malerezman, CSS toujou pa pèmèt mwen ajiste plasman konjesyon serebral jan mwen souvan fè nan Sketch. Sepandan, pwopriyete a penti-lòd gen valè ki pèmèt mwen mete konjesyon serebral la dèyè, olye ke devan, ranpli a.
paint-order: stroke pentire konjesyon serebral la an premye, Lè sa a, ranpli a, tandiske penti-lòd: ranpli fè opoze a: koulè: #fbb999; penti-lòd: ranpli; tèks-lonbraj: 3px 5px 1px #5160b1; tèks-koulè-koulè:#984336; tèks-konjesyon serebral-lajè: 3px;
Yon konjesyon serebral efikas kenbe lèt lizib, ajoute pwa, epi - lè konbine avèk lonbraj ak lòd penti - bay tèks plat prezans reyèl. Backgrounds Andedan Tèks Anpil kat tit desen yo ale pi lwen pase koulè plat lè yo ajoute teksti, gradyan, oswa detay ilistre nan lèt la. Pafwa sa a se yon teksti, lòt fwa li ta ka yon gradyan ak yon chanjman tonal sibtil. Sou entènèt la, mwen ka rkree efè sa a lè m sèvi ak yon imaj background oswa yon gradyan dèyè tèks la, ak Lè sa a, koupe li nan fòm nan lèt yo. Sa a depann sou de pwopriyete k ap travay ansanm: background-clip: tèks ak tèks-ranpli-koulè: transparan.
Premyèman, mwen aplike yon background dèyè tèks la. Sa a ka yon imaj bitmap oswa vektè oswa yon gradyan CSS. Pou egzanp sa a ki soti nan Episode Quick Draw McGraw "Baba Bait," tèks tit la gen ladan yon gradyan sibtil anwo-anba soti nan fè nwa rive nan limyè: background: lineyè-gradyan (0deg, #667b6a, #1d271a);
Apre sa, mwen koupe background sa a nan glif yo epi fè tèks la transparan pou background nan montre nan: -webkit-background-clip: tèks; -webkit-text-fill-color: transparan;
Avèk jis de liy sa yo, background nan pa pentire dèyè tèks la ankò; olye de sa, li pentire nan li. Teknik sa a travay espesyalman byen lè konbine avèk kou ak lonbraj. Yon gradyan koupe bay lèt ak koulè ak teksti, yon konjesyon serebral kenbe bor li yo byen file, ak yon lonbraj elve li soti nan background nan. Ansanm, yo rkree gade nan kouch nan kat tit ki pentire men lè l sèvi avèk pa gen anyen plis pase yon ti kras CSS. Kòm toujou, teste tèks koupe ak anpil atansyon, kòm kapris navigatè ka pafwa afekte lonbraj ak rann. Divize tèks an karaktè endividyèl Pafwa mwen pa vle style yon mo antye oswa tit. Mwen vle style lèt endividyèl yo - pou mete yon karaktè nan plas, bay yon glif plis pwa, oswa anime kèk lèt poukont li. Nan HTML klè ak CSS, gen yon sèl fason serye pou fè sa: vlope chak karaktè nan pwòp eleman span li yo. Mwen te kapab fè sa manyèlman, men sa ta frajil, difisil pou kenbe, epi li ta byen vit tonbe apa lè kopi chanje. Olye de sa, lè mwen bezwen kontwòl pou chak lèt, mwen itilize yon bibliyotèk ki divize tèks tankou splt.js (byenke lòt solisyon yo disponib). Sa a pran yon ne tèks epi otomatikman vlope mo oswa karaktè, sa ki ban m 'kwòk siplemantè pou anime ak style san yo pa dezòd maketing mwen an. Li se yon apwòch ki kenbe HTML mwen an lizib ak semantik, pandan y ap ban m 'kontwòl amann-grenn mwen bezwen rkree inegal, tipografi karaktè ou wè nan kat tit klasik desen ki pi ba yo. Sepandan, apwòch sa a vini akopozisyon aksesiblite, kòm pifò lektè ekran yo li nœuds tèks yo nan lòd. Se konsa, sa a:
Hum Dous Hum
… li jan ou ta atann: Hum Dous Hum
Men sa a:
H ou m
… kapab entèprete yon fason diferan selon navigatè a ak lektè ekran an. Gen kèk ki pral konkate lèt yo epi li mo yo kòrèkteman. Gen lòt ki ka pran yon poz ant lèt yo, ki nan yon senaryo pi move ka son tankou: "H..." "U..." "M..."
Malerezman, kèk solisyon divize pa bay yon rezilta toujou aksesib, kidonk mwen te ekri pwòp tèks splitter mwen an, splinter.js, ki se kounye a nan beta. Transfòme Lèt Endividyèl Pou aktive Toon Text Splitter mwen an, mwen ajoute yon atribi done nan eleman mwen vle divize an:
Hum Sweet Hum
Premyèman, script mwen an separe chak mo nan lèt endividyèl epi vlope yo nan yon eleman span ak klas ak atribi ARIA aplike:
Lè sa a, script la pran kontni inisyal la nan eleman divize an epi ajoute li kòm yon atribi aria pou ede kenbe aksè:
Avèk atribi klas sa yo aplike, mwen ka Lè sa a, style karaktè endividyèl yo jan mwen chwazi.
Pou egzanp, pou "Hum Sweet Hum," mwen vle repwodui fason lèt li yo deplase lwen liy debaz la. Apre w fin itilize Toon Text Splitter mwen an, mwen te aplike kat valè tradiksyon diferan lè l sèvi avèk plizyè seleksyon :nth-child pou kreye yon gade semi-o aza: /* 4yèm, 8yèm, 12yèm... */ .toon-char:nth-child(4n) { tradwi: 0 -8px; } /* 1ye, 5yèm, 9yèm... */ .toon-char:nth-child(4n+1) { tradwi: 0 -4px; } /* 2yèm, 6yèm, 10yèm... */ .toon-char:nth-child(4n+2) { tradwi: 0 4px; } /* 3yèm, 7yèm, 11yèm... */ .toon-char:nth-child(4n+3) { tradwi: 0 8px; }
Men, tradui se sèlman yon pwopriyete mwen ka itilize pou transfòme tèks toon mwen an.
Mwen te kapab tou vire karaktè endividyèl sa yo pou yon gade menm plis chaotic: /* 4yèm, 8yèm, 12yèm... */ .toon-line .toon-char:nth-child(4n) { vire: -4deg; } /* 1ye, 5yèm, 9yèm... */ .toon-char:nth-child (4n+1) { vire: -8deg; } /* 2yèm, 6yèm, 10yèm... */ .toon-char:nth-child (4n+2) { vire: 4deg; } /* 3yèm, 7yèm, 11yèm... */ .toon-char:nth-child (4n+3) { vire: 8deg; }
Men, tradui se sèlman yon pwopriyete mwen ka itilize pou transfòme tèks toon mwen an. Mwen te kapab tou vire karaktè endividyèl sa yo pou yon gade menm plis chaotic: /* 4yèm, 8yèm, 12yèm... */ .toon-line .toon-char:nth-child(4n) { vire: -4deg; }
/* 1ye, 5yèm, 9yèm... */ .toon-char:nth-child(4n+1) { vire: -8deg; }
/* 2yèm, 6yèm, 10yèm... */ .toon-char:nth-child(4n+2) { vire: 4deg; }
/* 3yèm, 7yèm, 11yèm... */ .toon-char:nth-child(4n+3) { vire: 8deg; }
Epi, nan kou, mwen te kapab ajoute animasyon nan jiggle karaktè sa yo epi pote tit style tèks toon mwen an nan lavi. Premyèman, mwen te kreye yon animasyon keyframe ki wotasyon karaktè yo:
@keyframes jiggle { 0%, 100% {transfòme: vire (var (--baz-wotasyon, 0deg)); } 25% {transfòme: vire (kalk(var(--baz-wotasyon, 0deg) + 3deg)); } 50% { transfòme: vire (kalk (var (--baz-wotasyon, 0deg) - 2deg)); } 75% { transfòme: vire (kalk (var (--baz-wotasyon, 0deg) + 1deg)); } }
Anvan w aplike li nan eleman span ki te kreye pa Toon Text Splitter mwen an: .toon-char { animasyon: jiggle 3s enfini fasilite-an-soti; transfòme-orijin: sant anba; }
Epi finalman, fikse kantite wotasyon an ak yon reta anvan chak karaktè kòmanse jiggle: .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) { animasyon-reta: 0.1s; } .toon-char:nth-child (4n+1) { animasyon-reta: 0.3s; } .toon-char:nth-child (4n+2) { animasyon-reta: 0.5s; } .toon-char:nth-child (4n+3) { animasyon-reta: 0.7s; }
Yon Ankadreman Pou Fè Yon Enpresyon Atis tit desen yo te gen yon sèl ankadreman pou fè yon enpresyon, ak tipografi yo te enpòtan menm jan ak travay atistik yo te pentire. Menm bagay la tou vre sou entènèt la. Yon header ki byen fèt oswa ewozòn bezwen klè, karaktè, ak konfyans - pa senpleman yon fennen imaj background plen lajè. Avèk kèk pwopriyete CSS ak anpil atansyon chwazi - lonbraj, konjesyon serebral, orijin koupe, ak kèk animasyon restriksyon - nou ka rkree menm enpak sa a. Mwen renmen tèks toon pa paske mwen nostaljik, men paske konsepsyon li se entansyonèl. Fè chwa ekspre, epi kite yon ti tipografi tèks toon ajoute kout pyen nan desen ou yo.
