Rehefa avy nahavita tetikasa iray izay nitaky ahy hianatra ny zavatra rehetra azoko momba ny sary mihetsika CSS sy SVG aho, dia nanomboka nanoratra ity andian-tantara ity momba ny Smashing Animations sy ny "Ahoana no mandrisika ny CSS maoderina ny sariitatra klasika." Mba hamaranana ity taona ity, tiako haseho anao ny fomba fampiasana CSS maoderina hamoronana ilay singa izay mahatonga ny Lohatenin'ny Toon tena misy fiantraikany: ny typography. Lohateny Artwork Design Tamin'ny vanim-potoana mangina tamin'ny taona 1920 sy ny fiandohan'ny taona 30, ny typography amin'ny karatry ny lohatenin'ny sarimihetsika dia namorona toe-tsaina, nametraka ny sehatra, ary nampahatsiahy ny mpihaino ny karazana sarimihetsika naloan'izy ireo.
Ny karatry ny sariitatra koa dia marika, toe-po ary toe-javatra, natambatra ho iray. Tany am-piandohana, rehefa lehibe kokoa ny teti-bolan'ny studio, dia matetika ireo karatra anaram-boninahitra ireo no sary sy sary hosodoko.
Saingy rehefa niroborobo ny fahitalavitra nandritra ny taona 1950, dia nihena ny teti-bola, ary ny karatra novolavolain'ny mpanakanto toa an'i Lawrence "Art" Goble dia nandray fiteny vaovao hita maso, nanjary lasa sary, voalamina ary tsy dia be pitsiny kokoa. Fanamarihana: Lawrence "Art" Goble dia iray amin'ireo mahery fo matetika tsy nojerena tamin'ny sarimiaina Amerikana tamin'ny tapaky ny taonjato. Niasa voalohany tao amin'ny Hanna-Barbera izy nandritra ireo taona nanan-kery indrindra tamin'ny taona 1950 sy 1960. Tsy mpilalao sarimihetsika i Goble. Ny anjara asany dia ny mamorona atmosfera, ka nanamboatra tontolo ho an'ny The Flintstones, Huckleberry Hound, Quick Draw McGraw, ary Yogi Bear izy, ary koa ireo karatra fanokafana izay mametraka ny feo. Nanampy tamin'ny famaritana ny endriky ny Hanna-Barbera ny karatry ny anaram-boninahitra nataony. Ny sangan'asan'i Goble ho an'ny mpilalao toa an'i Quick Draw McGraw sy Yogi Bear dia nahomby tamin'ny fahitalavitra kely kokoa. Raha tokony hamerina sary mihetsika avy amin'ny sariitatra izy, dia nifantoka tamin'ny fanolorana hevitra tokana sy matanjaka - matetika amin'ny silhouette - izay nahasarika ny maha-izy azy. Ao amin'ny "The Buzzin' Bear", Yogi dia mitabataba amin'ny helikoptera. Mitsambikina izy, harona pic-a-nic eny an-tanany, ao amin'ny "Bear on a Picnic," ary ho an'ny "Prize Fight Fright", Yogi dia mametraka ny lahatsoratry ny lohateny.
Miaraka amin'ny fihetsika kely na tsy misy hianteherana, ny sarin'i Goble tokana dia tsy maintsy namorona toe-tsaina, nametraka ny sehatra ary mamaritra tantara iray. Nanao izany izy ireo tamin'ny fampiasana loko fisaka, endrika sary, ary typography izay nampidirina matetika tao amin'ny sanganasa.
Amin'ny maha-mpamolavola miasa amin'ny tranonkala, ny lohateny toon dia afaka mampianatra antsika betsaka momba ny fomba fampitana ny toetran'ny marika iray, manao fahatsapana voalohany ary mametra ny zavatra andrasan'ny olona iray amin'ny fampiasana vokatra na tranokala. Afaka mianatra avy amin'ny teknikan'ny mpanakanto isika mba hamoronana sora-baventy mahomby, lohatenin'ny pejy fipetrahana, ary eny amin'ny efijery fitetezam-paritra tsara tarehy aza. Toon Lohateny Typography Asehon'ny karatra anaram-boninahitry ny sariitatra ny fomba ahafahan'ny karazan-tsary mitambatra amin'ny sary ny totohondry ilain'ny lohapejy na mahery fo. Miaraka amin'ny aloka vitsivitsy, text-stroke, ary tetika fanovana, ny CSS maoderina dia mamela anao hampiasa an'io angovo io ihany.
Ny Toon Text Lohateny Generator Teo am-panoratana ity lahatsoratra ity dia tsapako fa ilaina ny manana fitaovana hamoronana lahatsoratra mitovitovy amin'ireo lohateny sariitatra tiako indrindra. Dia nanao iray aho. Ny My Toon Text Title Generator dia mamela anao hanandrana loko, kapoka ary alokaloka maromaro. Azonao atao ny manitsy ny filaharan'ny loko, mampihatra ny elanelan'ny litera, mijery mialoha ny lahatsoratrao amin'ny karazana endri-tsoratra voafantina, ary avy eo dia mandika mivantana ny CSS vokarinao amin'ny takelakao hampiasaina amin'ny tetikasa iray. Toon Lohateny CSS Azonao atao ny mandika tsotra izao ny CSS izay omen'ny Toon Text Title Generator anao. Fa andeha hojerentsika akaiky ny ataony. Aloky ny soratra Jereo ny karazana amin'ity lohateny ity avy amin'ny fizarana "Yuk-Yuk Duck" an'i Augie Doggie, miaraka amin'ny litera mavo mavo sy ny aloky ny maizina, mafy, izay manaisotra azy amin'ny lamosina ary mamorona ny halalin'ny saina.
Mety efa fantatrao fa ny aloka lahatsoratra dia manaiky soatoavina efatra: (1) marindrano sy (2) mitsangana, (3) manjavozavo, ary (4) loko iray izay mety ho mafy na semi-mangarahara. Mety ho tsara na ratsy ireo soatoavina offset ireo, noho izany dia afaka mamerina ny “Dana Yuk-Yuk” aho amin'ny alalan'ny aloka mafy nosintonina miankavanana: loko: #f7f76d; aloka-soratra: 5px 5px 0 #1e1904;
Amin'ny lafiny iray, ity anaram-boninahitra "Pint Giant" ity dia manana fahatsapana hafa miaraka amin'ny aloky ny semi-malefaka ratsy: loko: #c2a872; text-shadow: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Mba hanampiana halalinina fanampiny sy hamoronana vokatra mahaliana kokoa dia afaka manarona aloka maromaro aho. Ho an'ny "Let's Duck Out", dia manambatra aloka efatra aho: ny voalohany dia aloka mivaingana miaraka amin'ny offset mitsivalana ratsy mba hanaisotra ny lahatsoratra amin'ny lamosina, arahin'ny aloka malefaka kokoa mba hamoronana blur manodidina azy: loko: #6F4D80; text-shadow: -5px5px 0 #260e1e, /* Aloky 1 */ 0 0 15px #e9ce96, /* Aloky 2 */ 0 0 30px #e9ce96, /* Aloky 3 */ 0 0 30px #e9ce96; /* Aloka 4 */
Ireo aloka ireo dia mampiseho fa ny fampiasana text-shadow dia tsy vitan'ny hoe mamorona fiantraikany amin'ny hazavana, satria mety haingo sy manampy ny maha-izy azy ihany koa. Text Stroke Karatra lohateny sariitatra maro no ahitana litera misy rindran-damina izay mampisongadina azy ireo avy any aoriana. Afaka mamorona ity vokatra ity aho amin'ny fampiasana text-stroke. Nandritra ny fotoana ela, ity fananana ity dia tsy nisy afa-tsy tamin'ny alàlan'ny prefix -webkit-, saingy midika koa izany fa tohana amin'ny navigateur maoderina izy io.
text-stroke dia fanafohezana ho an'ny fananana roa. Ny voalohany, text-stroke-width, dia manao contour manodidina ny litera tsirairay, raha ny faharoa, text-stroke-color, mifehy ny lokony. Ho an'ny "Whatever Goes Pup", dia nampiditra dika manga 4px aho tamin'ny lahatsoratra mavo: loko: #eff0cd; -webkit-text-stroke: 4px #7890b5; kapoka lahatsoratra: 4px #7890b5;
Mety hahasoa indrindra ny kapoka rehefa ampiarahina amin'ny aloka, noho izany ho an'ny "Mitombo, Mitombo, Manjavona," dia nampiako tsipika manify 3px amin'ny aloka 1px zara raha manjavozavo mba hamoronana ity vokatry ny lahatsoratra telo dimensions ity: loko: #fbb999; aloka-soratra: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; fametahana lahatsoratra: 3px #984336;
Loko baiko Ny fampiasana lahatsoratra-kapoka dia tsy mamokatra vokatra andrasana foana, indrindra amin'ny litera manify sy kapoka matevina kokoa, satria amin'ny alàlan'ny default ny navigateur dia misintona ny famenoana. Mampalahelo fa ny CSS dia mbola tsy mamela ahy hanitsy ny fametrahana ny tsipika toy ny ataoko matetika amin'ny Sketch. Na izany aza, ny fananana baiko-loko dia manana soatoavina izay mamela ahy hametraka ny kapoka ao ambadika, fa tsy eo anoloan'ny, feno.
fandokoana: fametahana mandoko ny kapoka aloha, avy eo ny famenoana, fa ny famenoana kosa dia ny mifanohitra amin'izany: loko: #fbb999; fandokoana: mameno; aloka-soratra: 3px 5px 1px #5160b1; text-stroke-color:#984336; text-stroke-width: 3px;
Ny kapoka mahomby dia mitazona ny litera ho mora vakina, manampy lanja, ary - raha ampiarahina amin'ny aloka sy ny filaharan'ny loko - dia manome ny tena fisian'ny soratra fisaka. Backgrounds ao anaty lahatsoratra Karatra lohateny sariitatra maro no mihoatra noho ny loko fisaka amin'ny alalan'ny famenoana ny soratra, ny gradient, na ny antsipirian'ny sary amin'ny litera. Indraindray izany dia texture, amin'ny fotoana hafa dia mety ho gradient miaraka amin'ny fiovan'ny tonal. Ao amin'ny tranonkala, afaka mamorona ity vokatra ity aho amin'ny fampiasana sary ambadika na gradient ao ambadiky ny lahatsoratra, ary avy eo manapaka azy amin'ny endriky ny litera. Izany dia miankina amin'ny fananana roa miara-miasa: background-clip: lahatsoratra sy text-fill-color: mangarahara.
Voalohany, mametraka lafika ao ambadiky ny lahatsoratra aho. Ity dia mety ho sary bitmap na sary vector na gradient CSS. Ho an'ity ohatra avy amin'ny fizarana Quick Draw McGraw "Baba Bait", ny lohatenin'ny lahatsoratra dia misy gradient an-tampony-ambany manomboka amin'ny maizina mankany amin'ny mazava: ambadika: linear-gradient(0deg, #667b6a, #1d271a);
Manaraka izany dia apetako amin'ny glyphs io fiaviana io ary ataoko mangarahara ilay lahatsoratra mba hisehoan'ny background: -webkit-background-clip: lahatsoratra; -webkit-text-fill-color: mangarahara;
Miaraka amin'ireo andalana roa ireo fotsiny dia tsy voaloko ao ambadiky ny lahatsoratra intsony ny ambadika; fa voaloko ao anatiny. Ity teknika ity dia miasa tsara indrindra rehefa mitambatra amin'ny kapoka sy aloka. Ny gradient voatetika dia manome loko sy haingon-tsoratra ny litera, ny dingan-dava dia mitazona ny sisiny ho maranitra, ary ny aloka dia manandratra azy avy any aoriana. Miara-mamorona ny endrika sosona amin'ny karatra anaram-boninahitry ny tanana izy ireo amin'ny fampiasana tsy misy afa-tsy CSS kely. Toy ny mahazatra, andramo amim-pitandremana ny lahatsoratra voatetika, satria mety hisy fiantraikany amin'ny aloka sy ny famandrihana indraindray ny quirks navigateur. Fizarana lahatsoratra ho tarehin-tsoratra tsirairay Indraindray aho dia tsy te hanao teny na lohateny iray manontolo. Te-hamolavola litera tsirairay aho — hanosika toetra iray ho eo amin'ny toerany, hanome lanja fanampiny glyph iray, na hamelona litera vitsivitsy tsy miankina. Ao amin'ny HTML tsotra sy CSS, tsy misy afa-tsy fomba azo antoka hanaovana izany: fonosy ny endri-tsoratra tsirairay amin'ny singany manokana. Afaka nanao izany tamin'ny tanana aho, saingy mety ho marefo, sarotra ny fikojakojana, ary ho rava haingana rehefa miova ny kopia. Fa kosa, rehefa mila fanaraha-maso isaky ny litera aho dia mampiasa tranomboky mizara lahatsoratra toy ny splt.js (na dia misy vahaolana hafa aza). Mitaky node lahatsoratra izany ary mandrakotra ho azy ireo teny na tarehin-tsoratra, manome ahy hook fanampiny hamelomana sy hamolavola nefa tsy hanakorontana ny marikako. Fomba iray mitazona ny HTML ho mora vakiana sy ho semantika izy io, ary manome ahy ny fifehezana tsara ilainy mba hamerenana indray ny typografia tsy mirindra sy miavaka izay hitanao amin'ny karatra anaram-boninahitra sariitatra mahazatra. Na izany aza, ity fomba ity dia tonga miarakafampitandremana ho an'ny fidirana, satria ny ankamaroan'ny mpamaky efijery dia mamaky ny node lahatsoratra araka ny filaharany. Ka ity:
Hum Sweet Hum
… mamaky araka izay nantenainao: Hum Sweet Hum
Fa ity:
H u m
…azo adika amin'ny fomba hafa arakaraka ny navigateur sy ny mpamaky efijery. Ny sasany dia hampifandray ireo litera ary hamaky tsara ireo teny. Ny hafa dia mety miato eo anelanelan'ny litera, izay amin'ny toe-javatra ratsy indrindra dia mety ho toy izao: “H…” “U…” “M…”
Mampalahelo fa tsy manome vokatra azo idirana foana ny vahaolana fisarahana sasany, ka nanoratra ny splinter.js ahy manokana aho, izay ao anaty beta amin'izao fotoana izao. Manova ny litera tsirairay Mba hampavitrika ny Toon Text Splitter dia ampiako ny toetran'ny angona amin'ilay singa tiako zaraina:
Hum Sweet Hum
Voalohany, ny script-ko dia manasaraka ny teny tsirairay ho litera tsirairay ary mamehy azy ireo amin'ny singa span miaraka amin'ny toetran'ny kilasy sy ARIA:
Ny script avy eo dia maka ny votoaty voalohany amin'ny singa misaraka ary manampy azy io ho toetra aria hanampy amin'ny fitazonana ny fidirana:
Amin'ny fampiharana ireo toetran'ny kilasy ireo, dia afaka manamboatra tarehin-tsoratra tsirairay araka izay safidiko aho.
Ohatra, ho an'ny "Hum Sweet Hum," tiako ny hamerina ny fomba fifindran'ny litera amin'ny tsipika fototra. Taorian'ny nampiasako ny Toon Text Splitter, dia nampihatra soatoavina fandikan-teny efatra samihafa aho tamin'ny fampiasana mpifidy :nth-child maromaro mba hamoronana endrika semi-random: /* faha-4, faha-8, faha-12... */ .toon-char:nth-child(4n) { fandikana: 0 -8px; } /* faha-1, faha-5, faha-9... */ .toon-char:nth-child(4n+1) { dikanteny: 0 -4px; } /* faha-2, faha-6, faha-10... */ .toon-char:nth-child(4n+2) { dikanteny: 0 4px; } /* faha-3, faha-7, faha-11... */ .toon-char:nth-child(4n+3) { dikanteny: 0 8px; }
Fa ny fandikana dia fananana tokana azoko ampiasaina hanovana ny lahatsoratra toon-ko.
Azoko atao koa ny manodina ireo tarehin-tsoratra tsirairay ireo mba hisian'ny fijery mikorontana kokoa: /* faha-4, faha-8, faha-12... */ .toon-line .toon-char:nth-child(4n) { rotate: -4deg; } /* faha-1, faha-5, faha-9... */ .toon-char:nth-child(4n+1) { mihodina: -8deg; } /* faha-2, faha-6, faha-10... */ .toon-char:nth-child(4n+2) { mihodina: 4deg; } /* faha-3, faha-7, faha-11... */ .toon-char:nth-child(4n+3) { mihodina: 8deg; }
Fa ny fandikana dia fananana tokana azoko ampiasaina hanovana ny lahatsoratra toon-ko. Azoko atao koa ny manodina ireo tarehin-tsoratra tsirairay ireo mba hisian'ny fijery mikorontana kokoa: /* faha-4, faha-8, faha-12... */ .toon-line .toon-char:nth-child(4n) { mihodina: -4deg; }
/* faha-1, faha-5, faha-9... */ .toon-char:nth-child(4n+1) { mihodina: -8deg; }
/* faha-2, faha-6, faha-10... */ .toon-char:nth-child(4n+2) { mihodina: 4deg; }
/* faha-3, faha-7, faha-11... */ .toon-char:nth-child(4n+3) { mihodina: 8deg; }
Ary, mazava ho azy, afaka manampy sary mihetsika aho mba hampihetsi-po ireo tarehin-tsoratra ireo ary hamelona ny lohatenin-gazetiko. Voalohany, namorona animation keyframe aho izay manodina ny endri-tsoratra:
@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)); } }
Alohan'ny hampiharana azy amin'ireo singa span noforonin'ny Toon Text Splitter: .toon-char { sarimiaina: jiggle 3s tsy manam-petra fahafahana miditra; fiovana-fiaviana: afovoany ambany; }
Ary farany, mametra ny habetsaky ny fihodinana sy ny fahatarana alohan'ny hanombohan'ny tarehintsoratra tsirairay: .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; }
Frame Iray Hampiavaka Nanana sary iray hanaitra ny sariitatra ireo mpanakanto manana lohatenin-gazety, ary zava-dehibe toy ny sary hoso-doko ny typography. Toy izany koa amin'ny Internet. Lohateny na maherifo voalamina tsaraNy faritra dia mila mazava, toetra ary fahatokisana - fa tsy sary lafika feno sakan'ny lafika fotsiny. Miaraka amin'ny fananana CSS vitsivitsy nofidina tsara — aloka, kapoka, fiaviana voatetika, ary sarimiaina voafehy sasany — dia afaka mamerina izany fiantraikany izany ihany koa isika. Tiako ny lahatsoratra toon tsy hoe satria nostalgique aho, fa satria fanahy iniana ny famolavolana azy. Manaova safidy an-tsaina, ary avelao ny typography lahatsoratra toon kely hanampy totohondry ny drafitrao.
