I muri i te whakaoti i tetahi kaupapa e hiahia ana ahau ki te ako i nga mea katoa ka taea e au mo te CSS me te SVG hākoritanga, i timata ahau ki te tuhi i tenei raupapa mo te Smashing Animations me te "How Classic Cartoons Inspire Modern CSS." Hei whakaahuru i tenei tau, e hiahia ana ahau ki te whakaatu ki a koe me pehea te whakamahi CSS hou ki te hanga i taua huānga e tino whai mana ai nga Taitara Toon: to ratou momotuhi. Taitara Mahi Toi Hoahoa I te wa wahangu o te 1920s me te timatanga o te 30s, na te tuhipoka o te kaari taitara o te kiriata i hanga he ahua, i whakatakoto te ahua, me te whakamahara i te hunga whakarongo ki te momo kiriata i utua e ratou kia kite.
Ko nga kaari taitara pakiwaituhi he waitohu, he ahua, he ahuatanga-whakaahua, ka huri katoa ki te kotahi. I nga tau o mua, i te mea he nui ake nga putea mo te studio, ko enei kaari taitara he whakaahua me te peita.
Engari i te kaha o te pouaka whakaata i te tekau tau atu i 1950, ka heke iho nga tahua, a, ko nga kaari i hangaia e nga kaitoi penei i a Lawrence "Art" Goble i tango i tetahi reo ataata hou, ka piki ake te whakairoiro, te ahua, me te iti ake te uaua. Tuhipoka: Ko Lawrence "Toi" Goble tetahi o nga toa e warewarehia ana o te pakiwaituhi o Amerika i waenganui o te rau tau. I mahi tuatahi ia mo Hanna-Barbera i ona tau tino whai mana o te 1950s me te 1960s. Ehara a Goble i te kaiwhakaahua ahua. Ko tana mahi he hanga i te hau, no reira i hangaia e ia nga taiao mo The Flintstones, Huckleberry Hound, Quick Draw McGraw, me Yogi Bear, me nga kaari taitara whakatuwhera e whakatau ana i te reo. Ko ana kaari taitara, e whakaatu ana i nga peita kua whakakikoruatia he tohu, i awhina ki te tautuhi i te ahua rongonui o Hanna-Barbera. Ko nga mahi toi a Goble mo nga kiripuaki penei i a Quick Draw McGraw me Yogi Bear i whai hua ki nga mata pouaka whakaata iti. Engari i te whakaputa i te kiriata mai i te pakiwaituhi, i aro ia ki te whakaatu i te whakaaro kotahi, te kaha - he maha tonu te ahua o te ahua - i mau i tona hiranga. I roto i te "The Buzzin' Bear," ka haruru a Yogi i roto i te helicopter. Ka peke atu ia, he kete pic-a-nic i te ringa, i roto i te "Bear on a Picnic," a mo tana "Prize Fight Fright," ka pouaka a Yogi te tuhinga taitara.
Ma te iti, kaore ranei he motini hei whirinaki, ko nga papa kotahi a Goble te hanga i te ahua, te whakatakoto i te waahi, me te whakaahua i tetahi korero. I mahia e ratou tenei ma te whakamahi i nga tae papatahi, nga ahua whakairoiro, me te momotuhi i whakauruhia ki roto i nga mahi toi.
I te mea ko nga kaihoahoa e mahi ana i runga i te paetukutuku, ka taea e nga taitara toon te ako ki a tatou me pehea te kawe i te ahuatanga o te waitohu, te whai whakaaro tuatahi, me te whakarite tumanako mo te wheako o tetahi ki te whakamahi i tetahi hua, paetukutuku ranei. Ka taea e tatou te ako mai i nga tikanga a nga kaitoi ki te hanga kara whai hua, pane wharangi taunga, tae atu ki nga mata riiwhi ahua pai. Toon Title Typography Ko nga kaari taitara pakiwaituhi e whakaatu ana me pehea te whakakotahitanga o te momo me nga whakaahua e whakaputa i te whiu e hiahiatia ana e te pane, te toa ranei. Ma te ringaringa o te kupu-atarangi, te whiu-tuhinga, me te whakarereke i nga mahi tinihanga, ka taea e CSS hou te uru ki taua kaha.
Ko te Kaihanga Taitara Kuputuhi Toon I te wahanga o te tuhi i tenei tuhinga, i mohio ahau he pai te whai taputapu mo te whakaputa tuhinga penei i nga taitara pakiwaituhi e tino arohaina ana e au. Na ka hanga e ahau tetahi. Ko taku Kaihanga Taitara Kuputuhi Toon ka taea e koe te whakamatautau ki nga tae, nga whiu, me nga atarangi kuputuhi maha. Ka taea e koe te whakatika i te raupapa peita, te whakamahi i te mokowhiti reta, te arokite i to tuhinga i roto i te kowhiringa o nga momo momotuhi, katahi ka kape tika i te CSS i hangaia ki to papatopenga hei whakamahi i roto i tetahi kaupapa. CSS Taitara Toon Ka taea e koe te kape-whakapiri noa i te CSS e whakaratohia ana e te Toon Text Title Generator ki a koe. Engari kia ata titiro atu ki nga mahi. Atarangi kupu Titiro ki te momo o tenei taitara mai i te wahanga o Augie Doggie "Yuk-Yuk Duck," me ona reta kowhai kowhai me te atarangi pouri, pakeke, whakahiato e hikina ana i te papamuri me te hanga i te pohehe o te hohonu.
Kua mohio kua mohio koe ka whakaaetia e te atarangi-tuhinga nga uara e wha: (1) whakapae me te (2) nga taapiri poutū, (3) te pupuhi, me te (4) he tae he maamaa, he maamaa ranei. He pai, he kino ranei aua uara utu, no reira ka taea e au te whakahoki i te "Yuk-Yuk Duck" ma te whakamarumaru maataki kua kumea ki raro me te taha matau: tae: #f7f76d; kupu-atarangi: 5px 5px 0 #1e1904;
I tetahi atu taha, he rereke te ahua o tenei taitara "Pint Giant" me tona atarangi ahua-ngohengohe kino: tae: #c2a872; Atarangi-kupu: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Hei taapiri i te hohonutanga me te hanga i nga paanga whakamere, ka taea e au te whakatakoto i nga atarangi maha. Mo "Let's Duck Out," ka whakakotahihia e au nga atarangi e wha: ko te tuatahi he atarangi totoka me te whakapae whakapae kino hei hiki ake i te tuhinga mai i te papamuri, whai muri mai i nga atarangi ngawari ake hei hanga i te purongo huri noa: tae: #6F4D80; Atarangi-kupu: -5px5px 0 #260e1e, /* Kōruru 1 */ 0 0 15px #e9ce96, /* Kōruru 2 */ 0 0 30px #e9ce96, /* Kōruru 3 */ 0 0 30px #e9ce96; /* Kōruru 4 */
Ko enei atarangi e whakaatu ana ko te whakamahi i te kupu-atarangi ehara i te mea ko te hanga i nga paanga rama, ka taea hoki te whakapaipai me te taapiri i te tangata. Tuhi Kuputuhi He maha nga kaari taitara pakiwaituhi e whakaatu ana i nga reta me te whakahuahua maia kia tu mai i te papamuri. Ka taea e au te hanga ano i tenei paanga ma te whakamahi i te whiu-kuputuhi. Mo te wa roa, i waatea noa tenei taonga ma te -webkit- prefix, engari ko te tikanga kei te tautokohia inaianei puta noa i nga kaitirotiro hou.
Ko te whiu-kupu he kupu poto mo nga taonga e rua. Ko te tuatahi, ko te whanui-whiu-kupu-tuhi, ka kumea he porohita huri noa i nga reta takitahi, ko te tuarua, ko te tae-whiu-tuhi, ka whakahaere i tona tae. Mo te "Whatever Goes Pup," i tapiritia e ahau he whiu kikorangi 4px ki te tuhinga kowhai: tae: #eff0cd; -webkit-text-stroke: 4px #7890b5; whiu-kupu: 4px #7890b5;
Ka tino whai hua nga whiu ina honoa ki nga atarangi, no reira mo te "Tipu, Tipu, Kua ngaro," ka taapirihia e ahau he whiu angiangi 3px ki te atarangi 1px kua kore e puhoi ki te hanga i tenei paanga kupu-toru: tae: #fbb999; kupu-atarangi: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; whiu-kupu: 3px #984336;
Raupapa peita Ko te whakamahi i te whiu-kupu kaore e puta i nga wa katoa te hua e tumanakohia ana, ina koa me nga reta angiangi me nga whiu matotoru, na te mea ma te taunoa ka kumea e te kaitirotiro he whiu ki runga i te whakakii. Ko te mea pouri, kare ano a CSS e whakaae ki a au ki te whakatika i te tuunga whiu pera i taku mahi i te Sketch. Heoi, he uara te taonga ota-peita ka taea e au te tuu i te whiu ki muri, kaua ki mua o te whakakii.
peita-raupapa: te whiu ka peita i te whiu i te tuatahi, katahi ka whakakiia, engari ko te raupapa-peita: whakakī ka rere ke atu: tae: #fbb999; peita-raupapa: whakakiia; kupu-atarangi: 3px 5px 1px #5160b1; tae-whiu-kupu:#984336; kupu-whiu-whanui: 3px;
Ma te whiu whai hua ka taea te panui o nga reta, te taapiri i te taumaha, a - ka honoa ki nga atarangi me te raupapa peita - ka whakaatu i nga tuhinga papatahi. Papamuri o Roto Kuputuhi He maha nga kaari taitara pakiwaituhi kei tua atu i te tae papatahi ma te taapiri kakano, rōnaki, taipitopito whakaahua ranei ki te reta. I etahi wa he kakano tera, i etahi wa he rōnaki me te huringa tonal ngawari. I runga i te paetukutuku, ka taea e au te hanga ano i tenei paanga ma te whakamahi i te ahua papamuri, te rōnaki ranei i muri i te tuhinga, ka tope ai kia rite ki te ahua o nga reta. Ka whakawhirinaki tenei ki nga taonga e rua e mahi tahi ana: papamuri-topenga: tuhinga me te tae-whakakii-tuhi: marama.
Tuatahi, ka tono ahau i tetahi papamuri i muri i te tuhinga. He maheremoka, he ahua vector ranei, he rōnaki CSS ranei. Mo tenei tauira mai i te wahanga Tere Draw McGraw "Baba Bait," kei roto i te tuhinga taitara he rōnaki ngawari o runga-raro mai i te pouri ki te marama: papamuri: rārangi-rōnaki(0deg, #667b6a, #1d271a);
I muri mai, ka tope ahau i taua papamuri ki nga glyphs ka whakamaarama te tuhinga kia whakaatu te papamuri: -webkit-background-clip: kuputuhi; -webkit-text-fill-color: maramara;
Na enei rarangi e rua anake, kua kore te papamuri e peita i muri i te tuhinga; engari, kua peitahia ki roto. He pai rawa te mahi o tenei tikanga ina honoa ki nga whiu me nga atarangi. Ma te rōnaki kua tapahia te reta me te tae me te kakano, ma te whiu kia koi ona tapa, a ma te atarangi ka hikina mai i te papamuri. Ka mahi tahi ratou i te ahua paparanga o nga kaari taitara peita-a-ringa ma te whakamahi noa i te CSS iti. Pērā i ngā wā katoa, āta whakamātauhia ngā tuhinga kua tapahia, nā te mea ka pā pea ngā quirks pūtirotiro i ētahi wā ki ngā atarangi me te tāhuahua. Te Waahanga Kuputuhi Ki Nga Tohu Takitahi I etahi wa kare au e pirangi ki te tuhi i te kupu katoa, i te upoko ranei. Kei te pirangi au ki te whakakakahu i nga reta takitahi — ki te whakakorikori i tetahi kiripuaki ki te tuunga, hoatu te taumahatanga kotahi, te whakakorikori ranei i etahi reta takitahi. I roto i te HTML me te CSS, kotahi anake te huarahi pono ki te mahi i tera: takai ia ahua ki roto i tana ake waahanga. Ka taea e au te mahi a-ringa, engari he ngoikore, he uaua ki te pupuri, ka tere ka taka ke ina huri te kape. Engari, ina hiahia au ki te whakahaere reta-a-reta, ka whakamahi ahau i te whare pukapuka wehewehe kupu penei i te splt.js (ahakoa kei te waatea etahi atu otinga). Ka mau tenei i te node kuputuhi me te takai aunoa i nga kupu, nga tohu ranei, ka homai etahi matau hei whakakorikori me te ahua me te kore e raru i taku tohu. He huarahi e pupuri ana i taku HTML ki te panui me te korero, i te wa e homai ana e au te mana pai me hanga ano e au te ahua koretake me te ahua o te momotuhi e kitea ana e koe i nga kaari taitara pakiwaituhi matarohia. Heoi, ka tae mai tenei huarahiKo nga whakatupato mo te urunga, i te mea ko te nuinga o nga kaipanui mata e panui ana i nga waahanga kuputuhi kia raupapa. Na ko tenei:
Hum Sweet Hum
… ka panui penei i to whakaaro: Hum Sweet Hum
Engari tenei:
H u m
…ka taea te whakamaori rereke i runga i te kaitirotiro me te panui mata. Ko etahi ka whakakotahi i nga reta me te panui tika i nga kupu. Ko etahi atu ka okioki i waenga i nga reta, ka penei pea te ahua o te ahua kino: “H…” “U…” “M…”
Ko te mea pouri, karekau etahi o nga otinga wehewehe e tuku i nga hua e waatea ana, no reira kua tuhia e au taku ake wehenga kupu, splinter.js, kei te beta i tenei wa. Te Huri Reta Takitahi Hei whakahohe i taku Toon Text Splitter, ka taapirihia he huanga-raraunga ki te huānga e hiahia ana ahau ki te wehe:
Hum Sweet Hum
Tuatahi, ka wehea e taku tuhinga ia kupu ki roto i nga reta takitahi ka takai ki roto i te huānga whanganga me nga huanga o te karaehe me te ARIA:
Ka tangohia e te tuhinga te ihirangi tuatahi o te huānga wehe ka taapirihia hei huanga aria hei awhina i te urunga:
Ma te whakamahi i aua huanga o te karaehe, ka taea e au te whakakakahu i nga ahuatanga o ia tangata ki taku e whiriwhiri ai.
Hei tauira, mo "Hum Sweet Hum," e hiahia ana ahau ki te whakahoki i te ahua o te neke atu o ana reta mai i te rarangi turanga. Whai muri i taku whakamahi i taku Toon Text Splitter, ka whakamahia e ahau nga uara whakamaori rereke e wha ma te whakamahi i te maha o nga kaiwhiriwhiri:nth-child ki te hanga i tetahi ahua matapōkere: /* 4, 8, 12... */ .toon-char:nth-child(4n) { whakamaori: 0 -8px; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { whakamaori: 0 -4px; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) { whakamaori: 0 4px; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { whakamaori: 0 8px; }
Engari ko te whakamaori he mea kotahi anake ka taea e au te whakarereke i taku tuhinga toon.
Ka taea hoki e au te huri i aua kiripuaki mo te ahua hepohepo ake: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { hurihuri: -4deg; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { takahuri: -8deg; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) { takahuri: 4deg; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { takahuri: 8deg; }
Engari ko te whakamaori he mea kotahi anake ka taea e au te whakarereke i taku tuhinga toon. Ka taea hoki e au te huri i aua kiripuaki mo te ahua hepohepo ake: /* 4, 8, 12... */ .toon-line .toon-char:nth-tamaiti(4n) { takahuri: -4deg; }
/* 1, 5, 9... */ .toon-char:nth-child(4n+1) { takahuri: -8deg; }
/* 2, 6, 10... */ .toon-char:nth-child(4n+2) { takahuri: 4deg; }
/* 3, 7, 11... */ .toon-char:nth-tamaiti(4n+3) { takahuri: 8deg; }
Ae ra, ka taea e au te taapiri i nga pakiwaituhi hei whakakorikori i aua kiripuaki kia ora ai aku taitara momo tuhinga toon. Tuatahi, i hanga e ahau he hākoritanga anga matua e huri ana i nga kiripuaki:
@keyframes hūpekepeke { 0%, 100% { huri: huri(var(--turanga-hurihuri, 0deg)); } 25% { huri: hurihuri(calc(var(--base-huri, 0deg) + 3deg)); } 50% { huri: huri(calc(var(--base-huri, 0deg) - 2deg)); } 75% { huri: hurihuri(calc(var(--base-huri, 0deg) + 1deg)); } }
I mua i te tono ki nga huānga whanga i hangaia e taku Toon Text Splitter: .toon-char { hākoritanga: jiggle 3s te ngawari mutunga kore-roto-waho; huri-taketake: waenganui o raro; }
Ka mutu, te whakarite i te nui o te hurihanga me te whakaroa i mua i te tiimata o ia ahua ki te wiri: .toon-char:nth-child(4n) { --base-hurihuri: -2deg; } .toon-char:nth-tamaiti(4n+1) { --base-hurihuri: -4deg; } .toon-char:nth-child(4n+2) { --base-hurihuri: 2deg; } .toon-char:nth-child(4n+3) { --base-hurihuri: 4deg; }
.toon-char:nth-tamaiti(4n) { hākoritanga-roa: 0.1s; } .toon-char:nth-child(4n+1) { hākoritanga-roa: 0.3s; } .toon-char:nth-child(4n+2) { hākoritanga-roa: 0.5s; } .toon-char:nth-child(4n+3) { hākoritanga-roa: 0.7s; }
Kotahi Tāpare Hei Whakaputa Kotahi te anga a nga kaitoi taitara pakiwaituhi hei whakamaarama, a, he mea nui o ratou momotuhi ki nga mahi toi i peitahia e ratou. He pera ano i runga i te ipurangi. He pane, he toa ranei i hangaia paiMe marama te waahi, te ahua, me te maia - ehara i te whakaahua papamuri whanui-katoa kua memenge. Me etahi o nga taonga CSS i whiriwhiria - he atarangi, he whiu, he tapahi papamuri, me etahi hākoritanga aukati - ka taea e tatou te hanga ano i taua paanga. E pai ana ahau ki te tuhinga toon ehara i te mea he nostalgic ahau, engari na te mea he mea whakaaro tana hoahoa. Whakaritehia nga whiringa pai, ka waiho ma te iti o te tuhi tuhi tuhi ki te whakauru i te pupuhi ki o hoahoa.
