Tom qab ua tiav ib qhov project uas xav kom kuv kawm txhua yam kuv ua tau txog CSS thiab SVG animations, kuv pib sau cov yeeb yaj kiab no txog Smashing Animations thiab "Yuav Ua Li Cas Classic Cartoons Inspire Modern CSS." Txhawm rau tawm xyoo no, kuv xav qhia koj yuav ua li cas siv CSS niaj hnub los tsim cov ntsiab lus uas ua rau Toon Titles cuam tshuam: lawv cov ntawv sau. Title Artwork Tsim Nyob rau lub sijhawm ntsiag to ntawm xyoo 1920 thiab thaum ntxov 30s, cov ntawv sau ntawm zaj duab xis lub npe daim npav tau tsim lub siab xav, teeb tsa qhov chaw, thiab ua rau cov neeg tuaj saib ntawm hom yeeb yaj kiab uas lawv tau them los saib.
Cartoon title cards kuj yog branding, mus ob peb vas, thiab scene-setting, tag nrho dov mus rau hauv ib tug. Nyob rau hauv thaum ntxov xyoo, thaum loj studio pob nyiaj siv loj dua, cov ntawv teev npe no feem ntau piav qhia thiab pleev xim rau.
Tab sis thaum lub TV nrov nrov thaum xyoo 1950, cov peev nyiaj poob qis, thiab daim npav tsim los ntawm cov kws ua yeeb yam zoo li Lawrence "Art" Goble tau siv cov lus pom tshiab, dhau los ua duab, zoo nkauj, thiab tsis sib xws. Lus Cim: Lawrence "Art" Goble yog ib qho ntawm feem ntau saib tsis taus tus phab ej ntawm ib nrab xyoo pua American animation. Nws feem ntau ua haujlwm rau Hanna-Barbera thaum lub sijhawm nws muaj kev cuam tshuam ntau tshaj plaws ntawm xyoo 1950 thiab 1960s. Goble tsis yog tus cwj pwm animator. Nws lub luag haujlwm yog tsim kom muaj huab cua, yog li nws tsim ib puag ncig rau The Flintstones, Huckleberry Hound, Quick Draw McGraw, thiab Yogi Xyooj, nrog rau cov ntawv qhib lub npe uas teeb tsa lub suab nrov. Nws cov ntawv teev npe, muaj cov duab kos nrog lub logo overlaid, pab txhais lub cim zoo ntawm Hanna-Barbera. Goble's artwork rau cov cim xws li Quick Draw McGraw thiab Yogi Xyooj tau ua haujlwm zoo ntawm cov ntxaij vab tshaus TV me. Tsis yog rov tsim dua ib qho tseem los ntawm cov duab tas luav, nws tau tsom mus rau kev nthuav qhia ib leeg, lub tswv yim muaj zog - feem ntau hauv silhouette - uas tau ntes nws cov ntsiab lus. Hauv "Buzzin 'Bear," Yogi buzzes los ntawm hauv lub nyoob hoom qav taub. Nws thaws tawm, pic-a-nic pob tawb hauv tes, hauv "Yuav rau Picnic," thiab rau nws "Prize Fight Fright," Yogi thawv cov ntawv sau npe.
Nrog me me los yog tsis muaj zog los cia siab rau, Goble cov thav ntawv ib leeg yuav tsum tsim kom muaj lub siab xav, teeb tsa qhov chaw, thiab piav txog zaj dab neeg. Lawv tau ua qhov no siv cov xim tiaj tus, cov duab kos duab, thiab cov ntawv sau uas nquag muab tso rau hauv cov duab kos duab.
Raws li cov neeg tsim qauv uas ua haujlwm hauv lub vev xaib, cov npe toon tuaj yeem qhia peb ntau txog yuav ua li cas qhia lub hom phiaj tus cwj pwm, ua kom pom thawj zaug, thiab teeb tsa kev cia siab rau ib tus neeg txoj kev paub siv cov khoom lossis lub vev xaib. Peb tuaj yeem kawm los ntawm cov kws kos duab cov tswv yim los tsim cov ntawv tshaj tawm zoo, cov nplooj ntawv tsaws nplooj, thiab txawm tias zoo ol 'fashioned splash screens. Toon Title Typography Cartoon title cards qhia tias kev sib koom ua ke nrog cov duab zoo li cas muab cov punch ib lub taub hau lossis tus hero xav tau. Nrog ib tug puv tes ntawm cov ntawv-duab ntxoov ntxoo, ntawv nyeem-stroke, thiab hloov cov lus dag, niaj hnub CSS cia koj coj mus rhaub rau tib lub zog.
Lub Toon Text Title Generator Partway los ntawm kev sau cov kab lus no, kuv pom tau hais tias nws yuav muaj txiaj ntsig kom muaj cov cuab yeej tsim cov ntawv sau zoo li cov npe tas luav uas kuv nyiam heev. Yog li kuv ua ib qho. Kuv Toon Text Title Generator cia koj sim nrog cov xim, strokes, thiab ntau cov ntawv ntxoov ntxoo. Koj tuaj yeem kho qhov kev txiav txim xim, siv tsab ntawv sib nrug, saib ua ntej koj cov ntawv hauv kev xaiv cov qauv fonts, thiab tom qab ntawd luam cov CSS tsim ncaj qha rau koj cov ntawv teev cia los siv hauv qhov project. Toon Title CSS Koj tuaj yeem luam-muab tshuaj rau CSS uas Toon Text Title Generator muab rau koj. Tab sis cia peb saib ze dua ntawm qhov nws ua. Duab ntxoov ntxoo Saib cov hom hauv lub npe no los ntawm Augie Doggie ntu "Yuk-Yuk Duck," nrog nws cov ntawv daj daj thiab tsaus, tawv, offset duab ntxoov ntxoo uas nqa nws tawm ntawm keeb kwm yav dhau thiab tsim qhov kev xav ntawm qhov tob.
Tej zaum koj twb paub lawm tias cov ntawv-duab ntxoov ntxoo lees txais plaub qhov tseem ceeb: (1) kab rov tav thiab (2) ntsug offsets, (3) plooj, thiab (4) xim uas tuaj yeem ua tau zoo lossis ib nrab pob tshab. Cov txiaj ntsig offset tuaj yeem yog qhov zoo lossis tsis zoo, yog li kuv tuaj yeem rov ua dua "Yuk-Yuk Duck" siv tus duab ntxoov ntxoo tawv rub thiab mus rau sab xis: xim: #f7f76d; text-shadow: 5px 5px 0 #1e1904;
Ntawm qhov tod tes, lub npe "Pint Giant" no muaj qhov sib txawv nrog nws cov duab ntxoov ntxoo tsis zoo: xim: #c2a872; text-shadow: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Txhawm rau ntxiv qhov tob ntxiv thiab tsim cov teebmeem ntxim nyiam, kuv tuaj yeem txheej ntau qhov ntxoov ntxoo. Rau "Cia Duck Out," Kuv muab plaub qhov ntxoov ntxoo: thawj tus duab ntxoov ntxoo nrog qhov tsis zoo kab rov tav offset nqa cov ntawv tawm ntawm keeb kwm yav dhau, ua raws li cov duab ntxoov ntxoo zuj zus los tsim qhov muag plooj nyob ib puag ncig nws: xim: #6F4D80; text-shadow: -5 px5px 0 #260e1e, /* Duab ntxoov ntxoo 1 */ 0 0 15px #e9ce96, /* Duab ntxoov ntxoo 2 */ 0 0 30px #e9ce96, /* Duab ntxoov ntxoo 3 */ 0 0 30px #e9ce96; /* Duab ntxoov ntxoo 4 */
Cov duab ntxoov ntxoo no qhia tau hais tias kev siv cov duab ntxoov ntxoo tsis yog hais txog kev tsim teeb pom kev zoo, vim lawv tuaj yeem ua kom zoo nkauj thiab ntxiv tus cwj pwm. Text Stroke Ntau daim ntawv teev npe tas luav muaj cov tsiaj ntawv nrog cov qauv zoo nkauj uas ua rau lawv sawv tawm ntawm keeb kwm yav dhau. Kuv tuaj yeem tsim cov nyhuv no siv cov ntawv nyeem-stroke. Tau ntev, cov cuab yeej no tsuas yog muaj nyob ntawm -webkit- ua ntej, tab sis qhov ntawd kuj txhais tau tias nws tau txhawb nqa thoob plaws browsers niaj hnub.
text-stroke yog luv luv rau ob lub zog. Thawj, ntawv-stroke-dav, kos ib qho contour ncig ib tus tsiaj ntawv, thaum lub thib ob, ntawv-stroke-xim, tswj nws cov xim. Rau "Txhua yam mus Pup," Kuv ntxiv 4px xiav stroke rau cov ntawv daj: xim: #eff0cd; -webkit-text-stroke: 4px #7890b5; text-stroke: 4px #7890b5;
Strokes tuaj yeem pab tau tshwj xeeb tshaj yog thaum lawv ua ke nrog cov duab ntxoov ntxoo, yog li rau "Kev Loj Hlob, Loj Hlob, ploj mus," Kuv ntxiv qhov nyias 3px stroke rau qhov tsis tshua pom 1px duab ntxoov ntxoo los tsim cov ntawv nyeem peb sab: xim: #fbb999; text-shadow: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; text-stroke: 3px #984336;
Xim xaj Siv cov ntawv nyeem-stroke tsis tas yuav tsim cov txiaj ntsig xav tau, tshwj xeeb tshaj yog nrog cov ntawv nyias nyias thiab cov hlab ntsha tuab dua, vim hais tias los ntawm lub neej ntawd browser rub tus mob stroke dhau qhov sau. Tu siab, CSS tseem tsis tso cai rau kuv kho mob stroke li kuv feem ntau ua hauv Sketch. Txawm li cas los xij, cov khoom siv pleev xim muaj qhov tseem ceeb uas tso cai rau kuv tso qhov mob stroke tom qab, tsis yog nyob rau pem hauv ntej, sau.
paint-order: stroke paints the stroke first, ces sau, whereas paint-order: fill ua opposite: xim: #fbb999; xim-xiav: sau; text-shadow: 3px 5px 1px #5160b1; text-stroke-xim: #984336; ntawv-stroke-dav: 3px;
Kev mob stroke zoo ua kom cov ntawv nyeem tau, ntxiv qhov hnyav, thiab - thaum ua ke nrog cov duab ntxoov ntxoo thiab xim xim - muab cov ntawv tiaj tus tiag tiag. Cov Keeb Kwm Hauv Cov Ntawv Ntau daim ntawv teev npe tas luav mus dhau ntawm cov xim tiaj tus los ntawm kev ntxiv kev ntxhib los mos, gradients, lossis piav qhia meej rau cov ntawv. Qee lub sij hawm qhov no yog kev ntxhib los mos, lwm lub sij hawm nws yuav yog qhov gradient nrog hloov maj mam tonal. Hauv lub vev xaib, kuv tuaj yeem tsim cov nyhuv no los ntawm kev siv cov duab keeb kwm yav dhau los lossis gradient tom qab cov ntawv nyeem, thiab tom qab ntawd txiav nws mus rau cov duab ntawm cov ntawv. Qhov no tso siab rau ob lub zog ua haujlwm ua ke: keeb kwm-clip: ntawv thiab ntawv sau-xim: pob tshab.
Ua ntej, kuv siv keeb kwm yav dhau tom qab cov ntawv nyeem. Qhov no tuaj yeem yog daim duab duab lossis duab vector lossis CSS gradient. Rau qhov piv txwv no los ntawm Quick Draw McGraw ntu "Baba Bait," cov ntawv sau muaj xws li hloov maj mam sab saum toj-hauv qab gradient los ntawm tsaus rau lub teeb: keeb kwm yav dhau: linear-gradient(0deg, #667b6a, #1d271a);
Tom ntej no, kuv muab cov keeb kwm yav dhau los rau cov glyphs thiab ua kom cov ntawv pob tshab kom cov keeb kwm yav dhau los ntawm: -webkit-background-clip: ntawv; -webkit-text-sau-xim: pob tshab;
Tsuas yog ob kab no, cov keeb kwm yav dhau tsis tau pleev xim tom qab cov ntawv; xwb, nws yog pleev xim rau hauv nws. Cov txheej txheem no ua haujlwm tshwj xeeb tshaj yog thaum ua ke nrog cov hlab ntsha thiab cov duab ntxoov ntxoo. Ib qho clipped gradient muab cov ntawv sau nrog cov xim thiab kev ntxhib los mos, mob stroke ua kom nws cov npoo ntse, thiab tus duab ntxoov ntxoo elevates nws los ntawm keeb kwm yav dhau. Ua ke, lawv rov tsim kho cov txheej txheem ntawm cov ntawv kos npe kos npe siv tsis muaj dab tsi ntau dua li CSS me ntsis. Raws li ib txwm muaj, sim txiav cov ntawv nyeem kom zoo, vim tias qhov browser quirks tuaj yeem cuam tshuam rau duab ntxoov ntxoo thiab ua kom pom. Sib faib cov ntawv rau hauv tus kheej tus cwj pwm Qee lub sij hawm kuv tsis xav style tag nrho lo lus lossis nqe lus. Kuv xav kom tus kheej cov ntawv sau - txhawm rau hloov tus cwj pwm rau hauv qhov chaw, muab ib qho glyph ntxiv qhov hnyav, lossis ua kom muaj ob peb tsab ntawv ntawm nws tus kheej. Hauv HTML thiab CSS, tsuas yog ib txoj hauv kev txhim khu kev qha los ua qhov ntawd: qhwv txhua tus cwj pwm hauv nws tus kheej ntu. Kuv tuaj yeem ua qhov ntawd manually, tab sis qhov ntawd yuav tsis yooj yim, nyuaj rau tswj, thiab yuav poob sai sai thaum luam hloov pauv. Hloov chaw, thaum kuv xav tau kev tswj ib tsab ntawv, kuv siv lub tsev qiv ntawv sib cais xws li splt.js (txawm tias muaj lwm cov kev daws teeb meem). Qhov no yuav siv cov ntawv sau thiab txiav cov lus los yog cov cim, muab kuv ntxiv hooks rau animate thiab style yam tsis muaj messing kuv markup. Nws yog ib txoj hauv kev uas ua rau kuv HTML nyeem tau thiab cov lus hais, thaum muab kev tswj kom zoo rau kuv kuv yuav tsum tau rov tsim qhov tsis sib xws, tus cwj pwm zoo li koj pom hauv cov ntawv sau npe classic. Txawm li cas los xij, txoj hauv kev no los nrogaccessibility caveats, raws li feem ntau screen nyeem nyeem ntawv nodes nyob rau hauv kev txiav txim. Yog li no:
Hum Sweet Hum
... nyeem raws li koj xav tau: Hum Sweet Hum
Tab sis qhov no:
H u m
... tuaj yeem txhais txawv nyob ntawm qhov browser thiab screen nyeem ntawv. Qee tus yuav muab cov ntawv sib txuas thiab nyeem cov lus kom raug. Lwm tus tuaj yeem ncua ntawm cov ntawv, uas nyob rau hauv qhov xwm txheej phem tshaj plaws yuav zoo li: “H…” “U…” “M…”
Tu siab, qee qhov kev daws teeb meem tsis xa cov txiaj ntsig ib txwm siv tau, yog li kuv tau sau kuv tus kheej cov ntawv splitter, splinter.js, uas tam sim no nyob rau hauv beta. Hloov cov tsiaj ntawv tus kheej Txhawm rau qhib kuv Toon Text Splitter, Kuv ntxiv cov ntaub ntawv-tus cwj pwm rau lub caij kuv xav faib:
Hmoob qab zib
Ua ntej, kuv tsab ntawv cais txhua lo lus rau hauv ib tus tsiaj ntawv thiab qhwv lawv nyob rau hauv ib lub caij nrog cov chav kawm thiab ARIA cov yam ntxwv siv:
Tsab ntawv tom qab ntawd siv cov ntsiab lus thawj zaug ntawm cov khoom sib cais thiab ntxiv nws ua tus cwj pwm aria los pab tswj kev siv tau:
Nrog rau cov yam ntxwv ntawm chav kawm no, kuv tuaj yeem ua tus cwj pwm ntawm tus kheej raws li kuv xaiv.
Piv txwv li, rau "Hum Sweet Hum," Kuv xav rov ua dua li cas nws cov ntawv hloov mus deb ntawm lub hauv paus. Tom qab siv kuv tus Toon Text Splitter, kuv tau siv plaub qhov kev txhais lus sib txawv siv ob peb : nth-child selectors los tsim ib qho kev saib ib nrab: /* 4th, 8th, 12th...*/ .toon-char:nth-child(4n) { txhais: 0 -8px; } /* 1st, 5th, 9th...*/ .toon-char:nth-child(4n+1) { txhais: 0 -4px; } /* II, 6, 10...*/ .toon-char:nth-child(4n+2) { txhais: 0 4px; } /* 3rd, 7th, 11th...*/ .toon-char:nth-child(4n+3) { txhais: 0 8px; }
Tab sis txhais lus tsuas yog ib qho cuab yeej uas kuv tuaj yeem siv los hloov kuv cov ntawv nyeem.
Kuv kuj tseem tuaj yeem tig cov cim ntawm tus kheej kom muaj kev sib cav ntau dua: /* 4th, 8th, 12th...*/ .toon-line .toon-char:nth-child(4n) { tig: -4deg; } /* 1st, 5th, 9th...*/ .toon-char:nth-child(4n+1) { tig: -8deg; } /* II, 6, 10...*/ .toon-char:nth-child(4n+2) { tig: 4deg; } /* 3rd, 7th, 11th...*/ .toon-char:nth-child(4n+3) { tig: 8deg; }
Tab sis txhais lus tsuas yog ib qho cuab yeej uas kuv tuaj yeem siv los hloov kuv cov ntawv nyeem. Kuv kuj tseem tuaj yeem tig cov cim ntawm tus kheej kom muaj kev sib cav ntau dua: /* 4th, 8th, 12th...*/ .toon-line .toon-char:nth-child(4n) { tig: -4deg; }
/* 1st, 5th, 9th...*/ .toon-char:nth-child(4n+1) { tig: -8deg; }
/* II, 6, 10...*/ .toon-char:nth-child(4n+2) { tig: 4deg; }
/* 3rd, 7th, 11th...*/ .toon-char:nth-child(4n+3) { tig: 8deg; }
Thiab, ntawm chav kawm, kuv tuaj yeem ntxiv cov animations rau jiggle cov cim thiab coj kuv cov ntawv sau npe rau lub neej. Ua ntej, kuv tsim ib qho keyframe animation uas tig cov cim:
@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)); } }
Ua ntej siv nws rau cov ntsiab lus span tsim los ntawm kuv Toon Text Splitter: .toon-char { animation: jiggle 3s infinite yooj yim-hauv-tawm; transform-kiv keeb: nruab nrab hauv qab; }
Thiab thaum kawg, teeb tsa tus nqi sib hloov thiab ncua ua ntej txhua tus cim pib 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) { 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; }
Ib Ncej Ua Kom Muaj Kev Txaus Siab Cov kws kos duab kos duab kos duab muaj ib lub thav duab los ua qhov kev xav, thiab lawv cov ntawv sau tseem ceeb npaum li cov duab uas lawv tau pleev xim. Tib yam muaj tseeb hauv lub vev xaib. Ib tug zoo-tsim header los yog herothaj chaw xav tau kev pom meej, tus cwj pwm, thiab kev ntseeg siab - tsis yog ib qho duab tag nrho-dav dav tom qab. Nrog rau ob peb ua tib zoo xaiv CSS cov khoom - duab ntxoov ntxoo, mob stroke, clipped keeb kwm yav dhau, thiab qee cov yeeb yaj kiab txwv - peb tuaj yeem tsim qhov cuam tshuam zoo ib yam. Kuv nyiam toon ntawv tsis yog vim kuv nostalgic, tab sis vim nws tsim yog txhob txwm. Ua kom txhob txwm xaiv, thiab cia me ntsis toon ntawv typography ntxiv punch rau koj tus qauv tsim.
