Ina ua maeʻa se poloketi na manaʻomia ai aʻu e aʻoaʻoina mea uma ou te mafaia e uiga i CSS ma SVG animations, na amata ona ou tusia lenei faasologa e uiga i le Smashing Animations ma le "How Classic Cartoons Inspire Modern CSS." Ina ia faʻataʻamilo i lenei tausaga, ou te manaʻo e faʻaali atu ia te oe le faʻaogaina o le CSS faʻaonaponei e fatu ai lena elemene e faʻatupu ai le aʻafiaga o Toon Titles: o latou faʻataʻitaʻiga. Igoa Tusiga Faufautua I le vaitau le leoa o le 1920s ma le amataga o le 30s, o le typography o se kata autu o se ata tifaga na fatuina ai se lagona, setiina le vaaiga, ma faamanatu atu ai i le au maimoa le ituaiga ata na latou totogiina e matamata ai.
O kata fa'aigoa ata sa fa'apea fo'i le fa'ailoga, lagona, ma le fa'atulagaina o vaaiga, sa ta'avale uma i le tasi. I ulua'i tausaga, a'o tetele atu tala o tupe a le potu aoga, o nei pepa fa'ailoga sa masani ona fa'ata'ita'i ma vali.
Ae ina ua sasao le televise i le vaitau o le 1950, na paʻu le paketi, ma o kata na mamanuina e tusiata e pei o Lawrence "Art" Goble na faʻaaogaina se gagana vaaia fou, ma sili atu ona faʻamaonia, faʻavasegaina, ma faʻaitiitia le lavelave. Manatua: Lawrence "Art" Goble o se tasi o toa e masani ona le amanaiaina i le ogatotonu o le seneturi Amerika animation. Na galue muamua o ia mo Hanna-Barbera i ona tausaga sili ona taua o le 1950s ma le 1960s. O Goble e le o se tagata fai ata. O lana matafaioi o le fatuina o le siosiomaga, o lea na ia mamanuina ai siosiomaga mo The Flintstones, Huckleberry Hound, Quick Draw McGraw, ma Yogi Bear, faʻapea foʻi ma kata taʻutaʻua amata e setiina le leo. O ana pepa fa'aulutala, o lo'o fa'aalia ai ata vali o lo'o fa'apipi'iina se logo, na fesoasoani e fa'amatala ai le fa'ailoga iloga o Hanna-Barbera. O ata a Goble mo tagata e pei o le Quick Draw McGraw ma Yogi Bear sa aoga i luga o lau TV laiti. Nai lo le toe faia o se ata mai le ata, na ia taulaʻi i le tuʻuina atu o se manatu e tasi, malosi - e masani lava i ata - e puʻeina lona uiga. I le "The Buzzin' Bear," o loʻo faʻalogo Yogi i totonu o se helikopa. Na te fiti ese, ata-a-nic ato i le lima, i le "Bear on a Picnic," ma mo lana "Prize Fight Fright," Yogi pusa le ulutala ulutala.
Faatasi ai ma le itiiti pe leai foi se lafo e faalagolago i ai, o ata e tasi a Goble e tatau ona fatuina se lagona, seti le vaaiga, ma faamatala se tala. Na latou faia lenei mea i le fa'aogaina o lanu mafolafola, foliga fa'akalafi, ma fa'asologa o lo'o fa'apipi'i so'o i totonu o le ata.
I le avea ai ma tagata mamanu o loʻo galulue i luga o le upega tafaʻilagi, o suafa toon e mafai ona aʻoaʻoina i tatou i le tele o auala e faʻaalia ai uiga o se ituaiga, faia se lagona muamua, ma seti faʻamoemoega mo le poto masani a se tasi i le faʻaaogaina o se oloa poʻo se upega tafaʻilagi. E mafai ona tatou aʻoaʻoina mai auala a le au tusiata e fai ai fuʻa lelei, faʻauluulu itulau, ma e oʻo lava i lau faʻapipiʻi lelei. Toon Title Typography O kata fa'aigoa ata e fa'aalia ai le tu'ufa'atasia o ituaiga ma ata e maua ai le tu'i e mana'omia e se ulu po'o se toa. Faatasi ai ma se luutaga o tusitusiga-ata, tusitusiga-stroke, ma le suiga o togafiti, CSS faʻaonaponei e mafai ai ona e faʻaogaina i lena lava malosi.
Le Toon Text Title Generator I le vaeluaga o le tusiaina o lenei tusiga, na ou iloa ai o le a aoga le i ai o se meafaigaluega mo le fatuina o tusitusiga e faʻapena pei o igoa taʻaloga ou te fiafia tele i ai. O lea na ou faia ai se tasi. O la'u Toon Text Title Generator e mafai ai ona e fa'ata'ita'i i lanu, ta, ma ata lafoia e tele. E mafai ona e fetuutuuna'i le fa'asologa o vali, fa'aoga le va o mataitusi, va'ai lau tusitusiga i se filifiliga o fa'ata'ita'iga fonuka, ona kopi lea sa'o le CSS fa'atupuina i lau laupapa kilipa e fa'aoga i se galuega. Toon Igoa CSS E mafai lava ona e kopi-pasi le CSS lea e maua e le Toon Text Title Generator. Ae sei o tatou tilotilo totoa i le mea e fai. Ata lafoia Va'ai i le ituaiga i lenei ulutala mai le tala a Augie Doggie "Yuk-Yuk Duck," ma ona mataitusi lanu samasama ma le pogisa, malo, ata lafoia e sii ese ai mai tua ma fatuina ai le faafoliga o le loloto.
Masalo ua uma ona e iloa o le ata-tusi e talia tulaga taua e fa: (1) faalava ma (2) fa'alava tu'usa'o, (3) faanenefu, ma le (4) lanu e mafai ona mafiafia pe semi-manino. E mafai ona lelei pe le lelei na tau fa'a'ese'ese, o lea e mafai ai ona 'ou fa'atusaina le "Yuk-Yuk Duck" e fa'aaoga ai se ata malo e toso i lalo ma le itu taumatau: lanu: #f7f76d; ata-ata: 5px 5px 0 #1e1904;
I le isi itu, o lenei igoa "Pint Giant" e ese lona lagona ma lona ata lafoia le lelei: lanu: #c2a872; ata lafoia: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Ina ia faʻaopoopo atili le loloto ma faʻatupuina atili faʻafiafiaga, e mafai ona ou faʻapipiʻi le tele o ata lafoia. Mo le "Let's Duck Out," ou te tuʻufaʻatasia ni ata se fa: o le muamua o se paolo malo ma se faʻataʻitaʻiga le lelei e faʻafefe ai le tusitusiga mai tua, sosoo ai ma ata faʻasolosolo malie e faʻafefe ai: lanu: #6F4D80; ata lafoia: -5px5px 0 #260e1e, /* Ataata 1 */ 0 0 15px #e9ce96, /* Ataata 2 */ 0 0 30px #e9ce96, /* Ataata 3 */ 0 0 30px #e9ce96; /* Ataata 4 */
O nei ata lafoia o loʻo faʻaalia ai o le faʻaaogaina o tusitusiga-ata e le naʻo le fatuina o faʻamalamalamaga, aua e mafai foi ona teuteu ma faʻaopopo uiga. Ta'i Tusi O le tele o kata fa'aigoa ta'iala o lo'o iai mata'itusi ma se fa'ata'otoga mata'utia e fa'ailoa mai ai i tua. E mafai ona ou toe faia lenei aafiaga e faaaoga ai le text-stroke. Mo se taimi umi, o lenei meatotino sa na'o avanoa e ala i le -webkit- prefix, ae o lona uiga ua lagolagoina nei i suʻesuʻega faʻaonaponei.
text-stroke ose fa'apuupuu mo meatotino e lua. O le muamua, text-stroke-width, e fa'ata'amilo i mata'itusi ta'itasi, ae o le lona lua, text-stroke-color, e pulea lona lanu. Mo le "Whatever Goes Pup," na ou faʻaopoopoina se 4px lanu lanumoana i le tusitusiga samasama: lanu: #eff0cd; -webkit-text-stroke: 4px #7890b5; fa'atusi-tusi: 4px #7890b5;
E mafai ona aoga faʻapitoa pe a tuʻufaʻatasia faʻatasi ma ata, o lea mo le "Tuputupu, Tuputupu, Ua leai," na ou faʻaopoopoina se paʻu manifinifi 3px i se ata 1px e tau le faanenefu e fatu ai lenei faʻamatalaga e tolu-dimensional: lanu: #fbb999; ata-ata: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; upu-tu'i: 3px #984336;
Poloaiga vali O le fa'aaogaina o tusitusiga-stroke e le o taimi uma e maua ai le fa'amoemoega fa'amoemoe, ae maise lava i mata'itusi manifinifi ma ta'i mafiafia, ona o le fa'aletonu e toso ai e le su'esu'e se ta i luga o le fa'atumu. O le mea e faanoanoa ai, e le mafai e le CSS ona faʻatagaina aʻu e fetuunai le tuʻuina o le taʻavale e pei ona masani ona ou faia i le Sketch. Ae ui i lea, o le meatotino o le vali-order e iai tulaga taua e mafai ai ona ou tuʻu le ta i tua, nai lo le pito i luma, le faʻatumu.
paint-order: pa'i e vali muamua le ta, ona fa'atumu ai lea, a'o vali-order: fa'atumu e fa'afeagai ai: lanu: #fbb999; vali-fa'atonu: fa'atumu; ata-ata: 3px 5px 1px #5160b1; lanu-tu'i-tusi:#984336; tusitusiga-stroke-lautele: 3px;
O se ta'i lelei e mafai ai ona faitau mata'itusi, fa'aopoopo le mamafa, ma - pe a tu'ufa'atasia ma ata ma le fa'asologa o vali - e maua ai le fa'aaliga moni o tusitusiga mafolafola. Tala'aga i totonu Tusitusiga O le tele o kata fa'aigoa pepa e sili atu i le lanu mafolafola e ala i le fa'aopoopoina o mea, gradients, po'o fa'amatalaga fa'ata'ita'i ile mata'itusi. O nisi taimi o se mea'ai, o isi taimi atonu o se fa'alili'i ma se suiga fa'apitoa. I luga o le upega tafaʻilagi, e mafai ona ou toe faia lenei aafiaga e ala i le faʻaogaina o se ata pito i tua poʻo le kesi i tua o le tusitusiga, ona tipi lea i foliga o mataitusi. E fa'alagolago lea i mea e lua o lo'o galulue fa'atasi: background-clip: text ma text-fill-color: transparent.
Muamua, ou te faʻaogaina se talaaga i tua o le tusitusiga. E mafai ona avea lenei mea ma se ata pusi po'o se ata ve'a po'o se gradient CSS. Mo lenei fa'ata'ita'iga mai le fa'asologa o le Quick Draw McGraw "Baba Bait," o le ulutala ulutala e aofia ai se fa'ase'e la'ititi pito i luga-lalo mai le pogisa i le malamalama: talaaga: laina-gradient(0deg, #667b6a, #1d271a);
Le isi, ou te kitiina lena talaaga i glyphs ma faʻamalamalama le tusitusiga ina ia faʻaalia le talaaga e ala i: -webkit-background-clip: tusitusiga; -webkit-text-fill-color: manino;
Faatasi ai ma na o laina e lua, e le o toe valiina le pito i tua o le tusitusiga; ae, o loo valiina i totonu. O lenei metotia e sili ona aoga pe a tuʻufaʻatasia ma paʻu ma ata. O le kilipi gradient e maua ai le mataitusi i le lanu ma le tino, o le sasa e faʻamaʻi ai ona pito, ma o se ata lafoia e siitia mai le pito i tua. Faʻatasi, latou te toe faʻafoʻiina foliga faʻapipiʻiina o kata faʻailoga lima e faʻaaoga ai se mea e sili atu nai lo sina CSS. E pei lava o taimi uma, su'esu'e ma le fa'aeteete tusitusiga, aua e mafai ona a'afia ata ma fa'aliliuga i nisi taimi. Vaevaeina o Tusitusiga i Tagata Ta'ito'atasi O nisi taimi ou te le manaʻo e fai se upu atoa poʻo se ulutala. Ou te manaʻo e faʻavasega mataʻitusi taʻitasi - ia faʻapipiʻi se tagata i le tulaga, tuʻu se tasi glyph mamafa faaopoopo, pe faʻaola ni nai mataitusi tutoatasi. I le HTML manino ma le CSS, e tasi lava le auala faʻatuatuaina e fai ai lena mea: afifi tagata taʻitasi i lona lava elemene. E mafai ona ou faia ma le lima, ae o le a maaleale, faigata ona tausia, ma e vave lava ona malepelepe pe a suia kopi. Ae, pe a ou manaʻomia le faʻatonutonuina o mataitusi taʻitasi, ou te faʻaogaina se faletusi vaelua tusitusiga pei o splt.js (e ui o loʻo avanoa isi fofo). E mana'omia ai se node o tusitusiga ma otometi lava ona afifiina upu po'o mataitusi, ma tu'uina mai ia te a'u ni matau faaopoopo e fa'aola ma sitaili e aunoa ma le fa'alavelaveina o la'u fa'ailoga. O se faiga e fa'atumauina ai la'u HTML e mafai ona faitau ma fa'auigaina, a'o tu'uina mai ia te a'u le fa'atonuga lelei e mana'omia e toe fa'afo'i ai le le tutusa, fa'ata'ita'iga uiga fa'atusa e te va'aia i kata fa'aigoa ta'aloga masani. Ae ui i lea, o lenei auala e sau mafa'atagaga avanoa, aua o le to'atele o le au faitau mata'itusi e faitau fa'asologa o tusitusiga. O lea la:
Hamu Suamalie
… faitau e pei ona e faʻamoemoeina: Hum Sweet Hum
Ae o lenei:
H u m
…e mafai ona faauigaina eseese e faalagolago ile su'esu'e ma lau lau faitau. O nisi o le a tuufaatasia mataitusi ma faitau sa'o upu. O isi e mafai ona malolo i le va o mataitusi, lea i se tulaga sili ona leaga atonu e foliga mai: “H…” “U…” “M…”
O le mea e faanoanoa ai, o nisi o fofo vaeluaina e le maua ai se taunuuga e mafai ona maua i taimi uma, o lea ua ou tusia ai laʻu lava text splitter, splinter.js, lea o loʻo i ai nei i le beta. Suia o Tusi Ta'ito'atasi Ina ia faʻagaoioia laʻu Toon Text Splitter, ou te faʻaopoopoina se faʻamatalaga- uiga i le elemene ou te manaʻo e vaelua:
Hum Sweet Hum
Muamua, o laʻu tusitusiga e vavae ese upu taʻitasi i mataʻitusi taʻitasi ma afifi i se elemene faʻatasi ma le vasega ma le ARIA uiga faʻaaogaina:
Ona ave lea e le tusitusiga le mea muamua o le elemene vaevae ma faʻaopoopo e avea o se uiga aria e fesoasoani e faʻamautinoa le faʻaogaina:
Faatasi ai ma na uiga o le vasega o loʻo faʻaogaina, e mafai ona ou faʻavasegaina tagata taʻitasi pe a ou filifilia.
Mo se faʻataʻitaʻiga, mo le "Hum Sweet Hum," ou te manaʻo e toe fai pe faʻafefea ona suia ona mataitusi mai le laina faavae. Ina ua uma ona faʻaogaina laʻu Toon Text Splitter, sa ou faʻaogaina faʻaliliuga faʻaliliu eseese e faʻaaoga ai le tele o :nth-child selectors e fatu ai se vaʻaiga faʻafuaseʻi: /* 4, 8, 12... */ .toon-char:nth-child(4n) { fa'aliliu: 0 -8px; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { fa'aliliu: 0 -4px; } /* Lona 2, 6, 10... */ .toon-char:nth-child(4n+2) { fa'aliliu: 0 4px; } /* Lona 3, 7, 11... */ .toon-char:nth-child(4n+3) { fa'aliliu: 0 8px; }
Ae o le fa'aliliu e na'o le tasi le meatotino e mafai ona ou fa'aogaina e sui ai la'u tusitusiga toon.
E mafai foʻi ona ou fesuiaʻi na tagata taʻitoʻatasi mo se foliga sili atu le vevesi: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { rotate: -4deg; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { liliu: -8deg; } /* Lona 2, 6, 10... */ .toon-char:nth-child(4n+2) { taamilo: 4deg; } /* Lona 3, 7, 11... */ .toon-char:nth-child(4n+3) { taamilo: 8deg; }
Ae o le fa'aliliu e na'o le tasi le meatotino e mafai ona ou fa'aogaina e sui ai la'u tusitusiga toon. E mafai foʻi ona ou fesuiaʻi na tagata taʻitoʻatasi mo se foliga sili atu le vevesi: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { liliu: -4deg; }
/* 1, 5, 9... */ .toon-char:nth-child(4n+1) { liliu: -8deg; }
/* Lona 2, 6, 10... */ .toon-char:nth-child(4n+2) { liliu: 4deg; }
/* Lona 3, 7, 11... */ .toon-char:nth-child(4n+3) { liliu: 8deg; }
Ma, ioe, e mafai ona ou faʻaopoopoina mea faʻafiafia e faʻafefe ai na tagata ma faʻaola ai aʻu ulutala sitaili tusitusiga. Muamua, na ou faia se animation keyframe e sui ai mataitusi:
@keyframes fe'ai { 0%, 100% {suia: sui(var(--base-rotate, 0deg)); } 25% {suia: liliu(calc(var(--base-rotate, 0deg) + 3deg)); } 50% {suia: liliu(calc(var(--base-rotate, 0deg) - 2deg)); } 75% {suia: liliu(calc(var(--base-rotate, 0deg) + 1deg)); } }
Aʻo leʻi faʻaaogaina i elemene span na faia e laʻu Toon Text Splitter: .toon-char { fa'afiafiaga: si'isi'i 3s le i'u faigofie-i totonu; suiga-afuaga: ogatotonu pito i lalo; }
Ma le mea mulimuli, faʻatulagaina le aofaʻi o le suiga ma le tuai aʻo leʻi amata ona faʻafefe tagata taʻitasi: .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-tuai: 0.3s; } .toon-char:nth-child(4n+2) { animation-tuai: 0.5s; } .toon-char:nth-child(4n+3) { animation-tuai: 0.7s; }
Tasi Fa'avaa e Fa'ailoa ai E tasi le fa'avaa a le au tusiata igoa ata e fa'aalia ai, ma sa taua tele a latou fa'ata'ita'iga e pei o ata na latou valiina. E faapena foi i luga o le upega tafailagi. O se ulutala ua mamanuina lelei po o se toaE mana'omia e le eria le manino, uiga, ma le mautinoa - e le na'o se ata fa'asolo atoa-lautele ua mou atu. Faatasi ai ma ni nai mea totino CSS filifilia ma le faaeteete - ata lafoia, paʻu, pito i tua, ma nisi faʻafiafiaga taofiofia - e mafai ona tatou toe faia lena lava aafiaga. Ou te fiafia i le toon text e le ona o aʻu e nostalgic, ae ona o lona mamanu e faʻamoemoeina. Faia filifiliga ma'oti, ma tu'u sina fa'aupuga o tusitusiga e fa'aopoopoina ai le tu'i i au mamanu.
