Huk proyecto tukusqaymanta, chaymi tukuy atisqayta yachanaypaq CSSmanta, SVG animacionkunamantapas, kay serieta qillqayta qallarirqani Smashing Animationsmanta hinaspa “Imaynatataq Dibujos Animados Clásicos Inspire Modern CSS” nisqamanta. Kay wata tukunaypaq, rikuchiyta munani imaynatachus kunan pacha CSS llamk'achiyta chay elementota ruwanaykipaq mayqinchus Toon Titles ancha llamk'achiq ruwan: tipografía kaqninku. Titulo Diseño de Obras de Arte 1920 watakunapi, ’30 wata qallariypipas ch’inlla pachakunapin, peliculaq tarjetanpa tipografía nisqa huk yuyayta paqarichirqan, escenariota churarqan, qhawaqkunatataq yuyarichirqan ima clase peliculatachus pagarqanku qhawanankupaq.
Dibujos animados titulo tarjetakunapas karqan marca, estado de ánimo, escena-setting, llapanku hukllaman rollo. Ñawpaq watakunapi, hatun estudiokunaq presupuestonkuna aswan hatun kaqtin, kay tarjeta de título nisqakunaqa sapa kutillanmi rikch’anachiy hinallataq pintor hina karqan.
Ichaqa 1950 watakunapi television wiñaqtinmi, presupuestokuna pisiyapurqan, Lawrence “Arte” Goble hina artistakunaq ruwasqan tarjetakunapas mosoq rikuy simitan hap’irqanku, aswan gráfico, estilizasqa, mana ancha sasachakuyniyoq ima kapurqan. Qhawariy: Lawrence “Arte” Gobleqa hukninmi sapa kuti mana qhawarisqa heroesmanta, chawpi siglopi Estados Unidospi animacionpi. Ñawpaqtaqa Hanna-Barbera nisqapaqmi llamk'arqan, 1950, 1960 watakunapi aswan atiyniyuq watakunapi. Gobleqa manan personajekuna animadorchu karqan. Paypa llamk'ayninqa karqan pachata paqarichiymi, chayrayku The Flintstones, Huckleberry Hound, Quick Draw McGraw, Yogi Bear nisqapaq pachakunatam rurarqan, chaynallataq kicharina titulu tarjetakunatapas, chaykunam tonota churarqan. Paypa titulo tarjetankuna, pinturakuna logotipowan qatasqa, yanaparqa Hanna-Barbera icónico rikchayninta riqsichinanpaq. Goblepa dibujo ruwasqanqa Quick Draw McGraw hinallataq Yogi Bear hina personajekunapaqmi allin karqan aswan huch’uy TV pantallakunapi. Dibujo animadomanta huk stillta mirachinamantaqa, huklla, sinchi yuyayta rikuchiypi yuyaykurqan — sapa kuti siluetapi — chaymi hap'irqan esencianta. “The Buzzin’ Bear” nisqapiqa Yogiqa helicóptero nisqapin kuyurispa pasashan. Payqa saltanmi, pic-a-nic canasta makinpi, “Oso en un Picnic” nisqapi, hinaspa “Prize Fight Fright” nisqanpaq, Yogiqa cajapi churan titulo textota.
Pisilla otaq mana kuyuypi confianapaq kasqanraykun Gobleq sapallan marconkunaqa huk yuyayta paqarichinan karqan, escenariota churanan karqan, huk willakuytapas willanan karqan. Chaytaqa ruwarqanku llañu llimp’ikunata, siq’i rikch’aykunata, tipografía nisqawan ima, chaykunaqa sapa kutillanmi dibujo ruwaypi hukllachasqa karqan.
Web kaqpi llamk’aq diseñadores hina, toon titulukuna achkata yachachiwasunman imayna huk markapa personalidadninta willayta, ñawpaq impresionta ruwayta, chaymanta suyakuykunata piqpa experiencianpaq churayta huk ruru utaq web kitita llamk’achispa. Artistakunap técnicasninmanta yachayta atiykuman allin pancartakuna ruwanapaq, chayana p’anqa umalliqkuna, chaymanta allin ol’ fashioned splash pantallakuna ruwanapaq. Toon Titulo Tipografía Dibujos animados titulu tarjetakuna rikuchinku imaynatachus tipo siq'ikunawan tinkuchiy huk umalliq utaq hero necesitasqan punchuta qun. Huk makilla qillqa-llantuy, qillqa-llachpay chaymanta tikray toqllakunawan, kunan pacha CSS chay kikin kallpaman llalliyta saqin.
Toon Texto Titulo Generador nisqa Kay qillqasqata qillqachkaptiymi, musyakurqani allin kananta huk herramientayuq kay, chaynapi ancha kuyasqay dibujo animadokunapa titulonkuna hina estiloyuq qillqasqata paqarichinanpaq. Chaymi hukninta ruwarqani. Toon Text Title Generatorniyqa llimp'ikunawan, siq'ikunawan, achka qillqa llantukunawan ima experimentayta saqin. Pintura ordenta allichayta atikunki, qillqakuna chiqanchayta churayta atikunki, qillqaykita ñawpaqmanta qhawayta atikunki huk akllasqa muestra letrakunapi, chaymanta ruwasqa CSS chiqamanta portapapelesniykiman copiayta atikunki huk proyectopi llamk'achinaykipaq. Toon Titulo CSS CSS kaqmanta copia-k'askachiylla atikunki mayqinchus Toon Text Title Generator qusunki. Ichaqa allinta qhawarisun ima ruwasqanmanta. Texto llantuy Qhawariy kay titulopi tipota Augie Doggie’s episodio “Yuk-Yuk Duck” nisqamanta, q’illu q’illu letrankunawan hinallataq yana, sinchi, desplazado llanthunwan, chaymi qhepaman hoqarin hinaspa ukhunchasqa ilusionta paqarichimun.
Yaqapaschá yachankiña texto-llantu tawa chanikunata chaskisqanmanta: (1) horizontal chaymanta (2) sayaq desplazamientos, (3) blur, chaymanta (4) huk color mayqinchus solido utaq semi-transparente kanman. Chay desplazamiento valores kanman positivo utaq negativo, chayrayku “Yuk-Yuk Pato” kaqmanta ruwayta atiyman huk sinchi llantuta urayman chaymanta pañaman aysasqawan: llimp'i: #f7f76d; qillqa-llantu: 5px 5px 0 #1e1904;
Huk ladumanta, kay “Pint Giant” tituluqa hukniray sensaciónniyuqmi negativo yaqa llampu llantuyninwan: llimp'i: #c2a872; qillqa-llantu: -7px 5px 0 #b100e, 1999 watapi. 0 -5px 10px #546c6f nisqamanta;
Yapa ukhunta yapanaypaq chaymanta aswan munay efectos ruwanapaq, achka llantuykunata qatayta atiyman. “Let’s Duck Out” nisqapaqmi tawa llantuykunata huñuni: ñawpaq kaqmi huk takyasqa llantuy negativo horizontal desplazamiento nisqawan qillqasqata qipamanta hoqarinanpaq, chaymantañataqmi pisi pisimanta aswan llampu llantuykuna muyuriqninpi huk borradorta ruwananpaq: llimp'i: #6F4D80; qillqa-llantu: -5px5px 0 #260e1e, /* Llantu 1 */ . 0 0 15px #e9ce96, /* Llantu 2 */ . 0 0 30px #e9ce96, /* Llantu 3 */ . 0 0 30px #e9ce96 nisqapi; /* Llantu 4 */ .
Kay llanthunkuna rikuchinku qillqa-llantu llamk’achiyta mana k’anchay efectos ruwayllachu, imaynachus sumaqchasqa kankuman chaymanta personalidadta yapankuman. Texto Trazo Achka dibujo animadokunapa titulon tarjetakunapim kachkan letrakuna yana bosquejoyuq, chaymi qipamanta aswan allinta qawakun. Kay efectota musuqmanta ruwayta atiyman text-stroke nisqawan. Unay pachamanta, kay propiedad -webkit- ñawpaq simiwanlla tarikurqa, ichaqa chaypas niyta munan kunan kunan pacha maskaqkunapi yanapasqa.
text-stroke nisqaqa iskay propiedad nisqapaq taquigrafía nisqa. Ñawpaq kaq, qillqa-trazo-ancho, sapa qillqakunap muyuriqninpi huk contornota siq'in, iskay kaqtaq, qillqa-stroke-color, llimp'inta kamachin. “Imapas Pup” nisqapaqmi, q’illu qillqaman 4px azul siq’ita yaparqani: llimp'i: #eff0cd; -webkit-texto-trazo: 4px #7890b5; qillqa-trazo: 4px #7890b5;
Trazos aswan allin kanman llanthunkunawan tinkisqa kaptinku, chayrayku “Wiñay, Wiñaq, Ripusqa” kaqpaq, huk llañu 3px llamk’ayta yaparqani huk pisilla ch’usaq 1px llanthuman kay kimsa dimensional qillqa efectota ruwanaypaq: llimp'i: #fbb999; qillqa-llantu: 3px 5px 1px #5160b1; -webkit-texto-trazo: 3px #984336; texto-trazo: 3px #984336;
Pintura Orden Texto-stroke kaqwan llamk’ayqa mana sapa kutichu suyasqa ruwayta ruwan, aswanta aswan llañu qillqakunawan chaymanta aswan rakhu siq’ikunawan, imaraykuchus ñawpaqmantapacha maskaq huk llamk’ayta hunt’achiy patamanta siq’in. Llakikuypaqmi, CSS kunankamapas manam saqiwanchu stroke churayta allichayta imaynam sapa kuti Sketch nisqapi ruwasqayman hina. Ichaqa, pintura-orden propiedadqa valoresniyuqmi, chaymi permitiwan chay trazota churayta qipaman, manam ñawpaqninpichu, huntachiypa.
pintura-orden: trazoqa ñawpaqta llamk'ayta pintan, chaymantataq hunt'achiyta, pintura-orden: hunt'achiytataq chiqanta ruwan: llimp'i: #fbb999; pintura-orden: hunt'achiy; qillqa-llantu: 3px 5px 1px #5160b1; qillqa-trazo-color:#984336; qillqa-trazo-ancho: 3px;
Huk allin llamk'ayqa qillqakunata ñawirinapaq hina waqaychan, llasayta yapan, chaymanta — llanthunkunawan chaymanta pintura ordenwan kuskachasqa kaqtin — llañu qillqa chiqa kayninta qun. Texto Ukhupi Fondos Askha dibujo animadokunaq titulon tarjetakunaqa manan llañu colorchu, chaypaqmi letrakunaman texturata, gradientekunata otaq dibujoyoq detallekunata yapanku. Wakin kutiqa chayqa textura, wakin kutitaq gradiente kanman sutil cambio tonalwan. Web kaqpi, kay efectota wakmanta ruwayta atiyman huk qhipa siq'ita utaq gradiente qillqa qhipanpi llamk'achispa, chaymanta qillqakunap rikch'ayninman kuchuspa. Kayqa iskay propiedades kuska llamk'ayninpi hapipakun: background-clip: texto chaymanta text-fill-color: transparent.
Ñawpaqtaqa, qillqasqapa qipanpi huk fondota churani. Kayqa bitmap icha vector siq'i icha CSS gradiente kanman. Kay ejemplopaq Quick Draw McGraw episodiomanta “Baba Bait”, titulo qillqapi huk sutil pata–ura gradiente tutayaymanta k’anchayman churan: qhipa: lineal-gradiente (0deg, # 667b6a, # 1d271a);
Chaymanta, chay qhipamanta glifokunaman k'utuni chaymanta qillqasqata sut'i kaqta ruwani chaymanta qhipaman rikuchikun kayhinata: -webkit-background-clip: qillqasqa; -webkit-texto-fill-color: sut'i;
Chay iskay chirukunallawanqa manañam qillqasqapa qipanpi qipanqa pintasqañachu; aswanpas chay ukhupin pintasqa kashan. Kay técnicaqa aswan allintam llamkan trazokunawan hinaspa llantukunawan kuskanchasqa kaptin. Gradiente k’utusqa letrakunata colorta, texturata ima qon, trazoqa kantunkunata k’irisqata waqaychan, llanthuntaq qhepamanta hoqarin. Kuska, makiwan pintasqa tarjetakuna titulukunap capas rikch'ayninta musuqmanta ruwanku mana imatapas aswan pisi CSS nisqawan. Sapa kuti hina, prueba k'utusqa qillqata allinta, imaynachus navegador quirks wakin kuti llantuykunata chaymanta ruwayta afectanman. Sapakama qillqakunaman qillqakunata rakiy Wakin kutiqa manan munanichu huk simi hunt’ata otaq umalliqta estilochayta. Sapa qillqakunata estilochayta munani — huk qillqata maychus kananpi tanqanapaq, huk glifoman yapasqa llasayta qunapaq, utaq huk pisi qillqakunata sapallamanta kawsachiyta. Llanu HTML kaqpi chaymanta CSS kaqpi, huklla atikuq ñan kan chayta ruwanapaq: sapa qillqata kikin span elemento kaqpi p’istuy. Chaytaqa makillawanmi ruwayman, ichaqa chayqa mana allinchu kanman, sasa mantenimiento, copia cambiaqtintaq usqhaylla urmapunman. Aswanpas, sapa qillqa kamachiyta necesitaptiy, huk qillqa rakiq bibliotecata splt.js hina llamk'achini (huk allichaykuna kaptinpas). Kayqa huk nodo de texto nisqatam hapin hinaspam kikillanmanta palabrakunata utaq personajekunata p'istuykun, chaymi quwan extra ganchos nisqakunata kawsachinaypaq hinaspa estilota ruwanaypaq mana marcadoyta chaqruspa. Huk ruwaymi HTMLniyta ñawirinapaq chaymanta semántico kaqta waqaychan, chaymanta quwan control fino-grano necesitasqayta wakmanta ruwanaypaq mana kaqlla, caracterniyuq tipografía kaqmanta rikunki clásico dibujos animados título tarjetakunapi. Ichaqa, kay hamutayqa hamunmiaccesibilidad advertenciakuna, imaynachus aswan pantalla ñawiriqkuna qillqa nodos ordenpi ñawirinku. Chaymi kay:
Hum Miski Hum
...suyasqaykiman hina ñawinchan: Hum Miski Hum
Ichaqa kaymi:
nisqa H u m
nisqa...huknirayta t'ikrakunman navegadormanta chaymanta pantalla ñawiriqmanta. Wakinqa letrakunata tinkuchispa simikunata allinta leenqaku. Wakintaq letrakunaq chawpinpi huk rato sayaykunkuman, aswan mana allin kaqtinqa kay hinatan uyarikunman: “H...” “U...” “M...” nispa.
Llakikuypaq, wakin rakina allichaykunaqa mana sapa kuti yaykuy atikuq ruwayta qunkuchu, chayrayku ñuqa kikiypa qillqa rakiqniyta qillqarqani, splinter.js, kunan beta kaqpi kachkan. Sapakama qillqakunata tikray Toon Text Splitterniyta llamk'achinaypaq, huk data- atributota yapani chay elemento rakiyta munasqayman:
Hum Miski Hum
Ñawpaqta, guionniyqa sapa simita sapa qillqakunaman t'aqaspa huk elemento span nisqapi k'uyuykun clase chaymanta ARIA atributokuna churasqawan: H u m
Chaymanta qillqa mayt'u rakisqa elementopa qallariy kaqninta hapin chaymanta aria atributo hina yapan chayayta waqaychayta yanapanapaq:
H u m
nisqaChay clase atributokuna churasqawan, chaymanta sapalla qillqakunata akllasqaymanhina estilochayta atiyman.
Ejemplopaq, “Hum Sweet Hum” nisqapaqmi, imayna letrankuna base nisqamanta karunchakusqanmanta yapamanta ruwayta munani. Toon Text Splitterniyta llamk'achispa, tawa chikan tikray chanikunata churarqani achka :nth-child akllaqkunata llamk'achispa huk kuskan random qhawayta ruwanaypaq: /* 4 kaq, 8 kaq, 12 kaq... */ .toon-char:nth-child(4n) { tikray: 0 -8px; } . /* 1 kaq, 5 kaq, 9 kaq... */ .toon-char:nth-child(4n+1) { tikray: 0 -4px; } . /* 2 kaq, 6 kaq, 10 kaq... */ .toon-char:nth-child(4n+2) { tikray: 0 4px; } . /* 3 kaq, 7 kaq, 11 kaq... */ .toon-char:nth-child(4n+3) { tikray: 0 8px; } .
Ichaqa tikrayqa huk propiedadllam, chaywanmi toon qillqasqayta tikrani.
Chay sapan runachakunatapas muyuchiymanmi aswan chaqwa qhawaypaq: /* 4 kaq, 8 kaq, 12 kaq... */ .toon-line .toon-char:nth-wawa (4n) { muyuchiy: -4deg; } . /* 1 kaq, 5 kaq, 9 kaq... */ .toon-char:nth-wawa (4n+1) { muyuchiy: -8deg; } . /* 2 kaq, 6 kaq, 10 kaq... */ .toon-char:nth-wawa (4n+2) { muyuchiy: 4deg; } . /* 3 kaq, 7 kaq, 11 kaq... */ .toon-char:nth-wawa(4n+3) { muyuchiy: 8deg; } .
Ichaqa tikrayqa huk propiedadllam, chaywanmi toon qillqasqayta tikrani. Chay sapan runachakunatapas muyuchiymanmi aswan chaqwa qhawaypaq: /* 4 kaq, 8 kaq, 12 kaq... */ .toon-line .toon-char:n kaq-wawa(4n) { . muyuchiy: -4deg; } .
/* 1 kaq, 5 kaq, 9 kaq... */ .toon-char:n kaq-wawa(4n+1) { . muyuchiy: -8deg; } .
/* 2 kaq, 6 kaq, 10 kaq... */ .toon-char:n kaq-wawa(4n+2) { . muyuchiy: 4deg; } .
/* 3 kaq, 7 kaq, 11 kaq... */ .toon-char:n kaq-wawa(4n+3) { . muyuchiy: 8deg; } .
Hinaspa, chiqapmi, animacionkunata yapayman chay personajekunata kuyurichinaypaq hinaspa toon texto estilo tituloykunata kawsachinaypaq. Ñawpaqtaqa, huk keyframe animación nisqatam ruwarqani, chaymi personajekunata muyuchin:
@keyframes kuyurichiy { . 0%, 100% { tikray: muyuchiy (var (--base-muyuchiy, 0deg)); } . 25% { tikray: muyuchiy (calc (var (--base-muyuchiy, 0deg) + 3deg)); } . 50% { tikray: muyuchiy (calc (var (--base-muyuchiy, 0deg) - 2deg)); } . 75% { tikray: muyuchiy (calc (var (--base-muyuchiy, 0deg) + 1deg)); } . } .
Manaraq Toon Text Splitterniypa ruwasqan span elementokunaman churachkaspa: .toon-char { . animación: jiggle 3s mana tukukuq facil-in-out; transform-origin: chawpi uray; } .
Hinallataq tukukuypaq, muyuypa qullqita chaymanta huk tardayta churay manaraq sapa qillqa kuyuriyta qallarichkaptin: .toon-char:nth-wawa (4n) { --base-muyuchiy: -2deg; } . .toon-char:nth-wawa (4n+1) { --base-muyuchiy: -4deg; } . .toon-char:nth-wawa (4n+2) { --base-muyuchiy: 2deg; } . .toon-char:nth-wawa (4n+3) { --base-muyuchiy: 4deg; } .
.toon-char:nth-child(4n) { animación-tardanza: 0.1s; } . .toon-char:nth-child(4n+1) { animación-tardanza: 0.3s; } . .toon-char:nth-child(4n+2) { animación-tardanza: 0.5s; } . .toon-char:nth-child(4n+3) { animación-tardanza: 0.7s; } .
Huk Marco Impresión Hacer Dibujos animados titulo artistakunaqa huk marcoyuqmi karqan huk impresionta ruwanankupaq, tipografía nisqankupas ancha importanten karqan pintasqanku dibujokuna hina. Chaynallataqmi web nisqapipas. Allin ruwasqa umalliq utaq wiraquchaárea sut'i kayta, caracterta, chaymanta confianzata necesitan — mana huk chinkasqa hunt'a ancho qhipa siq'illachu. Huk pisi allin akllasqa CSS kaqninkunawan — llantukuna, llamk'ay, kuchusqa qhipakuna, wakin hark'asqa kawsachiy ima — chay kikin llamk'ayta wakmanta ruwayta atiykuman. Toon textota anchata munani manan nostálgico kasqayraykuchu, aswanpas diseñon intencional kasqanrayku. Deliberada akllanakunata ruway, hinaspa saqiy huk uchuy toon qillqa tipografía yapananpaq punch diseñoykikunaman.
