Wara li spiċċajt proġett li kien jeħtieġni nitgħallem dak kollu li stajt dwar l-animazzjonijiet CSS u SVG, bdejt nikteb din is-sensiela dwar Smashing Animations u "Kif Classic Cartoons Inspire Modern CSS." Biex intemm din is-sena, irrid nuruk kif tuża CSS modern biex toħloq dak l-element li jagħmel it-Titoli Toon tant impatt: it-tipografija tagħhom. Titolu Disinn ta' Xogħol tal-Arti Fl-era siekta tas-snin 20 u l-bidu tas-snin 30, it-tipografija tal-karta tat-titlu ta’ film ħolqot burdata, stabbilixxiet ix-xena, u fakkret lill-udjenza dwar it-tip ta’ film li kienu ħallsu biex jaraw.
Karti tat-titlu tal-kartuns kienu wkoll branding, burdata, u xena-setting, kollha rrumblati f'wieħed. Fis-snin bikrija, meta l-baġits ewlenin tal-istudjo kienu akbar, dawn il-karti tat-titlu spiss kienu illustrattivi u pittoriċi.
Iżda meta t-televiżjoni żdiedet matul is-snin ħamsin, il-baġits naqsu, u kards iddisinjati minn artisti bħal Lawrence “Art” Goble adottaw lingwaġġ viżiv ġdid, li saru aktar grafiku, stilizzat, u inqas kumplessi. Nota: Lawrence "Art" Goble huwa wieħed mill-eroj ta' spiss injorati tal-animazzjoni Amerikana ta' nofs is-seklu. Huwa ħadem primarjament għal Hanna-Barbera matul is-snin l-aktar influwenti tagħha tal-1950 u s-sittinijiet. Goble ma kienx animatur tal-karattru. Ir-rwol tiegħu kien li joħloq atmosfera, għalhekk iddisinja ambjenti għal The Flintstones, Huckleberry Hound, Quick Draw McGraw, u Yogi Bear, kif ukoll il-karti tat-titlu tal-ftuħ li jistabbilixxu t-ton. Il-karti tat-titlu tiegħu, li fihom pitturi b'logo miksi, għenu biex jiddefinixxu d-dehra emblematika ta' Hanna-Barbera. Ix-xogħol artistiku ta 'Goble għal karattri bħal Quick Draw McGraw u Yogi Bear kien effettiv fuq skrins tat-TV iżgħar. Minflok ma jirriproduċi stilla mill-kartun, huwa ffoka fuq il-preżentazzjoni ta 'idea waħda u b'saħħitha - ħafna drabi f'siluwett - li qabad l-essenza tagħha. F'"The Buzzin' Bear," Yogi jdaqq f'ħelikopter. Huwa bounces bogħod, basket pic-a-nic fl-idejn, fi "Bear on a Picnic," u għall-"Premju Ġlieda Fright" tiegħu, Yogi kaxxi t-test tat-titlu.
Bi ftit jew l-ebda mozzjoni fuqiex jistrieħu, il-frejms singoli ta’ Goble kellhom joħolqu burdata, ifasslu x-xena, u jiddeskrivu storja. Huma għamlu dan bl-użu ta 'kuluri ċatti, forom grafiċi, u tipografija li ta' spiss kienet integrata fix-xogħol tal-arti.
Bħala disinjaturi li jaħdmu fuq il-web, it-titli toon jistgħu jgħallmuna ħafna dwar kif inwasslu l-personalità ta’ marka, nagħmlu l-ewwel impressjoni, u nistabbilixxu l-aspettattivi għall-esperjenza ta’ xi ħadd bl-użu ta’ prodott jew websajt. Nistgħu nitgħallmu mit-tekniki tal-artisti biex noħolqu banners effettivi, headers ta’ landing-page, u anke splash screens ta’ dari. Tipografija tat-Titolu Toon Kards tat-titlu tal-kartuns juru kif it-tip li jingħaqad ma' xbihat jagħti l-punch li header jew eroj jeħtieġ. B'numru żgħir ta 'text-shadow, text-stroke, u tricks ta' trasformazzjoni, CSS modern iħallik tisfrutta dik l-istess enerġija.
Il-Ġeneratur tat-Titolu Toon Test Sakemm nikteb dan l-artikolu, indunajt li jkun utli li jkollok għodda biex tiġġenera test b'stil bħat-titli tal-kartuns li tant inħobb. Allura għamilt waħda. My Toon Test Title Generator iħallik tesperimenta b'kuluri, puplesiji, u dellijiet tat-test multipli. Tista 'taġġusta l-ordni taż-żebgħa, tapplika l-ispazjar tal-ittri, tipprevedi t-test tiegħek f'għażla ta' fonts kampjun, u mbagħad tikkopja s-CSS iġġenerat direttament fil-clipboard tiegħek biex tużah fi proġett. Toon Titolu CSS Tista 'sempliċement tikkopja-pejst is-CSS li jipprovdilek il-Ġeneratur tat-Titolu tat-Toon. Imma ejja nħarsu aktar mill-qrib lejn dak li tagħmel. Dell tat-test Ħares lejn it-tip f’dan it-titlu mill-episodju ta’ Augie Doggie “Yuk-Yuk Duck”, bl-ittri isfar ċari u d-dell skur, iebes u offset li jneħħih mill-isfond u joħloq l-illużjoni tal-fond.
Probabbilment diġà taf li text-shadow jaċċetta erba 'valuri: (1) orizzontali u (2) offsets vertikali, (3) ċċajpar, u (4) kulur li jista' jkun solidu jew semi-trasparenti. Dawk il-valuri ta' kumpens jistgħu jkunu pożittivi jew negattivi, għalhekk nista' nirreplika "Yuk-Yuk Duck" billi tuża dell iebes miġbud 'l isfel u lejn il-lemin: kulur: #f7f76d; test-dell: 5px 5px 0 #1e1904;
Min-naħa l-oħra, dan it-titlu "Pint Giant" għandu sensazzjoni differenti bid-dell negattiv semi artab tiegħu: kulur: #c2a872; dell-test: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Biex inżid fond żejjed u noħloq effetti aktar interessanti, nista' nissaffi diversi dellijiet. Għal "Let's Duck Out," ngħaqqad erba' dellijiet: l-ewwel dell solidu b'offset orizzontali negattiv biex inneħħi t-test mill-isfond, segwit minn dellijiet progressivament aktar artab biex toħloq ċċajpar madwaru: kulur: #6F4D80; dell-test: -5px5px 0 #260e1e, /* Shadow 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Shadow 4 */
Dawn id-dellijiet juru li l-użu tat-test-dell mhuwiex biss dwar il-ħolqien ta 'effetti tad-dawl, peress li jistgħu wkoll ikunu dekorattivi u jżidu l-personalità. Test Stroke Ħafna kards tat-titlu tal-kartuns jinkludu ittri b'kontorn kuraġġuż li jagħmilhom jispikkaw mill-isfond. Kapaċi nirrealizza dan l-effett billi tuża text-stroke. Għal żmien twil, din il-proprjetà kienet disponibbli biss permezz ta' prefiss -webkit-, iżda dan ifisser ukoll li issa hija appoġġjata minn browsers moderni.
text-stroke huwa shorthand għal żewġ proprjetajiet. L-ewwel waħda, text-stroke-width, tfassal kontorn madwar ittri individwali, filwaqt li t-tieni, text-stroke-color, tikkontrolla l-kulur tagħha. Għal "Whatever Goes Pup," żidt stroke blu 4px mat-test isfar: kulur: #eff0cd; -webkit-test-stroke: 4px #7890b5; test-stroke: 4px #7890b5;
Il-puplesiji jistgħu jkunu utli b'mod speċjali meta jkunu kkombinati ma' dellijiet, għalhekk għal "Tkabbir, Tkabbir, Għaddew," żidt puplesija rqiqa ta' 3px ma' dell ta' 1px bilkemm imċajpra biex noħloq dan l-effett tat-test tridimensjonali: kulur: #fbb999; test-dell: 3px 5px 1px #5160b1; -webkit-test-stroke: 3px #984336; test-stroke: 3px #984336;
Ordni taż-Żebgħa L-użu ta 'test-stroke mhux dejjem jipproduċi r-riżultat mistenni, speċjalment b'ittri irqaq u puplesiji eħxen, għaliex b'mod awtomatiku l-browser jiġbed stroke fuq il-mili. Sfortunatament, is-CSS għadu ma jippermettilix naġġusta t-tqegħid tal-puplesija kif spiss nagħmel fl-Isketch. Madankollu, il-proprjetà tal-ordni taż-żebgħa għandha valuri li jippermettuni npoġġi l-puplesija wara, aktar milli quddiem, il-mili.
paint-order: stroke żebgħa l-puplesija l-ewwel, imbagħad il-mili, filwaqt li paint-order: imla jagħmel l-oppost: kulur: #fbb999; żebgħa-ordni: imla; test-dell: 3px 5px 1px #5160b1; text-stroke-color:#984336; test-stroke-wisa ': 3px;
Puplesija effettiva żżomm l-ittri li jinqraw, iżid il-piż, u - meta kkombinat ma 'dellijiet u ordni taż-żebgħa - tagħti test ċatt preżenza reali. Sfondi Ġewwa Test Ħafna kards tat-titlu tal-kartuns imorru lil hinn mill-kulur ċatt billi jżidu tessut, gradjenti, jew dettall illustrat mal-ittri. Xi drabi dik hija tessut, drabi oħra jista 'jkun gradjent b'bidla tonali sottili. Fuq il-web, nista' nirrekreka dan l-effett billi nuża immaġni ta' sfond jew gradjent wara t-test, u mbagħad naqbadha għall-forma tal-ittri. Dan jiddependi fuq żewġ proprjetajiet li jaħdmu flimkien: background-clip: test u text-fill-color: trasparenti.
L-ewwel, napplika sfond wara t-test. Dan jista 'jkun bitmap jew immaġni vettur jew gradjent CSS. Għal dan l-eżempju mill-episodju ta' Quick Draw McGraw "Baba Bait", it-test tat-titlu jinkludi gradjent sottili minn fuq għal isfel mid-dlam għad-dawl: sfond: lineari-gradjent(0deg, #667b6a, #1d271a);
Sussegwentement, nikklippja dak l-isfond mal-glyphs u nagħmel it-test trasparenti sabiex l-isfond juri: -webkit-background-clip: test; -webkit-test-mili-kulur: trasparenti;
B'dawk iż-żewġ linji biss, l-isfond m'għadux miżbugħ wara t-test; minflok, huwa miżbugħ fih. Din it-teknika taħdem tajjeb speċjalment meta kkombinata ma 'puplesiji u dellijiet. Grajjent maqtugħ jipprovdi l-ittri bil-kulur u n-nisġa, puplesija żżomm it-truf tagħha jaqtgħu, u dell tgħolliha mill-isfond. Flimkien, jirrikreaw id-dehra f'saffi ta' karti tat-titlu miżbugħin bl-idejn bl-użu ta' xejn aktar minn ftit CSS. Bħal dejjem, ittestja t-test imqatta 'b'attenzjoni, peress li l-kwirks tal-browser xi kultant jistgħu jaffettwaw dellijiet u rendering. Qsim tat-Test F'Karattri Individwali Xi drabi ma rridx nistilja kelma sħiħa jew intestatura. Irrid nagħmel stil ta' ittri individwali — biex indaħħal karattru f'posthom, nagħti piż żejjed ta' glyph wieħed, jew janima ftit ittri b'mod indipendenti. F'HTML sempliċi u CSS, hemm mod affidabbli wieħed biss biex tagħmel dan: wrap kull karattru fl-element tal-firxa tiegħu stess. Nista' nagħmel dan manwalment, iżda dan ikun fraġli, diffiċli biex jinżamm, u malajr jinqasam meta tinbidel il-kopja. Minflok, meta jkolli bżonn kontroll għal kull ittra, nuża librerija li jaqsam it-test bħal splt.js (għalkemm soluzzjonijiet oħra huma disponibbli). Dan jieħu node tat-test u awtomatikament ikebbeb kliem jew karattri, u jagħtini ganċijiet żejda biex janima u nagħmel stil mingħajr ma tħawwad il-markup tiegħi. Huwa approċċ li jżomm l-HTML tiegħi li jinqara u semantiku, filwaqt li jagħtini l-kontroll tal-qamħa fin li għandi bżonn biex nirrekreja t-tipografija irregolari u ta 'karattru li tara fil-karti tat-titlu tal-kartuns klassiċi. Madankollu, dan l-approċċ jiġi ma 'twissijiet dwar l-aċċessibbiltà, peress li l-biċċa l-kbira tal-qarrejja tal-iskrin jaqraw in-nodi tat-test fl-ordni. Allura dan:
Hum Ħelu Hum
… jaqra kif tistenna: Hum Ħelu Hum
Imma dan:
H u m
...jistgħu jiġu interpretati b'mod differenti skont il-brawżer u l-screen reader. Xi wħud jgħaqqdu l-ittri u jaqraw il-kliem b'mod korrett. Oħrajn jistgħu jieqfu bejn ittri, li fl-agħar xenarju jista’ jinstema’ bħal: “H…” “U…” “M…”
Sfortunatament, xi soluzzjonijiet ta 'qsim ma jagħtux riżultat dejjem aċċessibbli, għalhekk ktibt is-divider tat-test tiegħi stess, splinter.js, li bħalissa jinsab fil-beta. Ittri Individwali Trasformazzjoni Biex nattiva Toon Text Splitter tiegħi, inżid attribut tad-dejta mal-element li rrid naqsam:
Hum Sweet Hum
L-ewwel, l-iskrittura tiegħi tifred kull kelma f'ittri individwali u tgeżwerhom f'element ta 'firxa b'attributi ta' klassi u ARIA applikati:
L-iskrittura mbagħad tieħu l-kontenut inizjali tal-element maqsum u żżidu bħala attribut aria biex tgħin iżżomm l-aċċessibilità:
B'dawk l-attributi tal-klassi applikati, nista' mbagħad nistilja karattri individwali kif nagħżel.
Pereżempju, għal "Hum Sweet Hum," irrid nirreplika kif l-ittri tiegħu jitbiegħdu mil-linja bażi. Wara li użajt it-Toon Text Splitter tiegħi, applikajt erba' valuri ta' traduzzjoni differenti bl-użu ta' diversi selettori :nth-child biex noħloq dehra semi-random: /* 4, 8, 12... */ .toon-char:nth-child (4n) { translate: 0 -8px; } /* 1, 5, 9... */ .toon-char:nth-child (4n+1) { translate: 0 -4px; } /* 2, 6, 10... */ .toon-char:nth-child (4n+2) { translate: 0 4px; } /* 3, 7, 11... */ .toon-char:nth-child (4n+3) { translate: 0 8px; }
Imma translate hija proprjetà waħda biss li nista' nuża biex nittrasforma t-test toon tiegħi.
Nista 'wkoll iddawwar dawk il-karattri individwali għal dehra saħansitra aktar kaotika: /* 4, 8, 12... */ .toon-line .toon-char:nth-child (4n) { dawwar: -4deg; } /* 1, 5, 9... */ .toon-char:nth-child (4n+1) { dawwar: -8deg; } /* 2, 6, 10... */ .toon-char:nth-child (4n+2) { dawwar: 4deg; } /* 3, 7, 11... */ .toon-char:nth-child (4n+3) { dawwar: 8deg; }
Imma translate hija proprjetà waħda biss li nista' nuża biex nittrasforma t-test toon tiegħi. Nista 'wkoll iddawwar dawk il-karattri individwali għal dehra saħansitra aktar kaotika: /* 4, 8, 12... */ .toon-line .toon-char:nth-child (4n) { dawwar: -4deg; }
/* 1, 5, 9... */ .toon-char:nth-child (4n+1) { dawwar: -8deg; }
/* 2, 6, 10... */ .toon-char:nth-child (4n+2) { dawwar: 4deg; }
/* 3, 7, 11... */ .toon-char:nth-child (4n+3) { dawwar: 8deg; }
U, ovvjament, nista 'nżid animazzjonijiet biex jitgħawweġ dawk il-karattri u nġib it-titli tal-istil tat-test toon tiegħi għall-ħajja. L-ewwel, ħloqt animazzjoni keyframe li ddawwar il-karattri:
@keyframes jiggle { 0%, 100% { tittrasforma: dawwar(var(--base-rotate, 0deg)); } 25% { trasforma: dawwar(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { trasforma: dawwar(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { trasforma: dawwar(calc(var(--base-rotate, 0deg) + 1deg)); } }
Qabel ma tapplikaha għall-elementi tal-firxa maħluqa minn Toon Text Splitter tiegħi: .toon-char { animazzjoni: jiggle 3s infinita ease-in-out; transform-oriġini: qiegħ taċ-ċentru; }
U fl-aħħarnett, issettja l-ammont ta 'rotazzjoni u dewmien qabel ma kull karattru jibda 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) { animazzjoni-dewmien: 0.1s; } .toon-char:nth-child (4n+1) { animazzjoni-dewmien: 0.3s; } .toon-char:nth-child (4n+2) { animazzjoni-dewmien: 0.5s; } .toon-char:nth-child (4n+3) { animazzjoni-dewmien: 0.7s; }
Qafas Wieħed Biex Tagħmel Impressjoni L-artisti tat-titlu tal-kartuns kellhom qafas wieħed biex jagħmlu impressjoni, u t-tipografija tagħhom kienet importanti daqs ix-xogħol tal-arti li kienu jiżbgħu. L-istess jgħodd fuq il-web. Header jew eroj iddisinjat tajjebiż-żona teħtieġ ċarezza, karattru, u kunfidenza — mhux sempliċiment immaġni fl-isfond faded full-wisa '. Bi ftit proprjetajiet CSS magħżula bir-reqqa — dellijiet, puplesiji, sfondi maqtugħin, u xi animazzjoni ristretta — nistgħu nirrikrejaw dak l-istess impatt. Inħobb it-test tat-toon mhux għax inkun nostalġiku, iżda għax id-disinn tiegħu huwa intenzjonat. Agħmel għażliet intenzjonati, u ħalli ftit tipografija tat-test toon żżid punch mad-disinji tiegħek.
