CSS మరియు SVG యానిమేషన్ల గురించి నేను చేయగలిగినదంతా నేర్చుకోవాల్సిన ప్రాజెక్ట్ను పూర్తి చేసిన తర్వాత, నేను స్మాషింగ్ యానిమేషన్ల గురించి మరియు “క్లాసిక్ కార్టూన్లు ఆధునిక CSSని ఎలా ప్రేరేపిస్తాయి” గురించి ఈ సిరీస్ని రాయడం ప్రారంభించాను. ఈ సంవత్సరం పూర్తి చేయడానికి, టూన్ శీర్షికలను చాలా ప్రభావవంతం చేసే మూలకాన్ని సృష్టించడానికి ఆధునిక CSSని ఎలా ఉపయోగించాలో నేను మీకు చూపించాలనుకుంటున్నాను: వాటి టైపోగ్రఫీ. టైటిల్ ఆర్ట్వర్క్ డిజైన్ 1920లు మరియు 30వ దశకం ప్రారంభంలో నిశ్శబ్ద యుగంలో, చలనచిత్రం యొక్క టైటిల్ కార్డ్ యొక్క టైపోగ్రఫీ ఒక మూడ్ని సృష్టించింది, సన్నివేశాన్ని సెట్ చేసింది మరియు ప్రేక్షకులు వారు చూడటానికి చెల్లించిన సినిమా రకాన్ని గుర్తు చేసింది.
కార్టూన్ టైటిల్ కార్డ్లు కూడా బ్రాండింగ్, మూడ్ మరియు సీన్-సెట్టింగ్, అన్నీ ఒకటిగా మార్చబడ్డాయి. ప్రారంభ సంవత్సరాల్లో, ప్రధాన స్టూడియో బడ్జెట్లు పెద్దవిగా ఉన్నప్పుడు, ఈ టైటిల్ కార్డ్లు తరచుగా సచిత్రంగా మరియు పెయింటర్గా ఉండేవి.
కానీ 1950లలో టెలివిజన్ విజృంభించినప్పుడు, బడ్జెట్లు పడిపోయాయి మరియు లారెన్స్ "ఆర్ట్" గోబుల్ వంటి కళాకారులచే రూపొందించబడిన కార్డ్లు కొత్త దృశ్యమాన భాషను స్వీకరించాయి, ఇది మరింత గ్రాఫిక్, శైలీకృత మరియు తక్కువ క్లిష్టంగా మారింది. గమనిక: లారెన్స్ "ఆర్ట్" గోబుల్ మధ్య-శతాబ్దపు అమెరికన్ యానిమేషన్ యొక్క తరచుగా పట్టించుకోని హీరోలలో ఒకరు. అతను ప్రధానంగా 1950లు మరియు 1960లలో అత్యంత ప్రభావవంతమైన సంవత్సరాల్లో హన్నా-బార్బెరా కోసం పనిచేశాడు. గోబుల్ క్యారెక్టర్ యానిమేటర్ కాదు. వాతావరణాన్ని సృష్టించడం అతని పాత్ర, కాబట్టి అతను ది ఫ్లింట్స్టోన్స్, హకిల్బెర్రీ హౌండ్, క్విక్ డ్రా మెక్గ్రా మరియు యోగి బేర్ కోసం వాతావరణాలను రూపొందించాడు, అలాగే టోన్ సెట్ చేసే ప్రారంభ టైటిల్ కార్డ్లను రూపొందించాడు. అతని టైటిల్ కార్డ్లు, లోగో ఓవర్లేడ్తో పెయింటింగ్లను కలిగి ఉన్నాయి, హన్నా-బార్బెరా యొక్క ఐకానిక్ రూపాన్ని నిర్వచించడంలో సహాయపడింది. క్విక్ డ్రా మెక్గ్రా మరియు యోగి బేర్ వంటి పాత్రల కోసం గోబుల్ యొక్క ఆర్ట్వర్క్ చిన్న టీవీ స్క్రీన్లపై ప్రభావవంతంగా ఉంది. కార్టూన్ నుండి స్టిల్ను పునరుత్పత్తి చేయడానికి బదులుగా, అతను దాని సారాంశాన్ని సంగ్రహించే ఒకే బలమైన ఆలోచనను - తరచుగా సిల్హౌట్లో ప్రదర్శించడంపై దృష్టి సారించాడు. "ది బజ్జిన్ బేర్"లో యోగి హెలికాప్టర్లో సందడి చేస్తున్నాడు. అతను "బేర్ ఆన్ ఎ పిక్నిక్"లో పిక్-ఎ-నిక్ బాస్కెట్తో దూరంగా బౌన్స్ అయ్యాడు మరియు అతని "ప్రైజ్ ఫైట్ ఫ్రైట్" కోసం యోగి టైటిల్ టెక్స్ట్ని పెట్టెలో పెట్టాడు.
ఆధారపడటానికి తక్కువ లేదా ఎటువంటి చలనం లేకుండా, గోబుల్ యొక్క సింగిల్ ఫ్రేమ్లు ఒక మానసిక స్థితిని సృష్టించాలి, సన్నివేశాన్ని సెట్ చేయాలి మరియు కథను వివరించాలి. వారు చదునైన రంగులు, గ్రాఫిక్ ఆకారాలు మరియు టైపోగ్రఫీని ఉపయోగించి దీన్ని చేసారు, వీటిని తరచుగా కళాకృతిలో విలీనం చేశారు.
వెబ్లో పని చేసే డిజైనర్లుగా, టూన్ శీర్షికలు బ్రాండ్ వ్యక్తిత్వాన్ని ఎలా తెలియజేయాలి, మొదటి అభిప్రాయాన్ని ఏర్పరచడం మరియు ఉత్పత్తి లేదా వెబ్సైట్ని ఉపయోగించి ఒకరి అనుభవం కోసం అంచనాలను ఎలా సెట్ చేయాలనే దాని గురించి మాకు పుష్కలంగా నేర్పుతాయి. ప్రభావవంతమైన బ్యానర్లు, ల్యాండింగ్-పేజీ హెడర్లు మరియు మంచి ఓల్ ఫ్యాషన్ స్ప్లాష్ స్క్రీన్లను రూపొందించడానికి కళాకారుల సాంకేతికత నుండి మనం నేర్చుకోవచ్చు. టూన్ టైటిల్ టైపోగ్రఫీ కార్టూన్ టైటిల్ కార్డ్లు చిత్రాలతో రకాన్ని విలీనం చేయడం వలన హెడర్ లేదా హీరోకి అవసరమైన పంచ్ను ఎలా అందిస్తాయో చూపుతాయి. కొన్ని టెక్స్ట్-షాడో, టెక్స్ట్-స్ట్రోక్ మరియు ట్రాన్స్ఫార్మ్ ట్రిక్స్తో, ఆధునిక CSS అదే శక్తిని పొందేందుకు మిమ్మల్ని అనుమతిస్తుంది.
టూన్ టెక్స్ట్ టైటిల్ జనరేటర్ ఈ కథనాన్ని వ్రాయడం ద్వారా, నేను చాలా ఇష్టపడే కార్టూన్ శీర్షికల తరహాలో వచనాన్ని రూపొందించడానికి ఒక సాధనాన్ని కలిగి ఉండటం ఉపయోగకరంగా ఉంటుందని నేను గ్రహించాను. కాబట్టి నేను ఒకటి చేసాను. మై టూన్ టెక్స్ట్ టైటిల్ జనరేటర్ రంగులు, స్ట్రోక్లు మరియు బహుళ టెక్స్ట్ షాడోలతో ప్రయోగాలు చేయడానికి మిమ్మల్ని అనుమతిస్తుంది. మీరు పెయింట్ ఆర్డర్ని సర్దుబాటు చేయవచ్చు, అక్షరాల అంతరాన్ని వర్తింపజేయవచ్చు, నమూనా ఫాంట్ల ఎంపికలో మీ వచనాన్ని ప్రివ్యూ చేసి, ఆపై ప్రాజెక్ట్లో ఉపయోగించడానికి రూపొందించిన CSSని నేరుగా మీ క్లిప్బోర్డ్కు కాపీ చేయవచ్చు. టూన్ శీర్షిక CSS టూన్ టెక్స్ట్ టైటిల్ జనరేటర్ మీకు అందించే CSSని మీరు కాపీ-పేస్ట్ చేయవచ్చు. కానీ అది ఏమి చేస్తుందో దగ్గరగా చూద్దాం. వచన నీడ ఆగీ డాగీ యొక్క ఎపిసోడ్ "యుక్-యుక్ డక్" నుండి ఈ శీర్షికలోని రకాన్ని దాని లేత పసుపు అక్షరాలు మరియు ముదురు, గట్టి, ఆఫ్సెట్ నీడతో చూడండి, అది నేపథ్యం నుండి పైకి లేపి లోతు యొక్క భ్రమను సృష్టిస్తుంది.
టెక్స్ట్-షాడో నాలుగు విలువలను అంగీకరిస్తుందని మీకు ఇప్పటికే తెలిసి ఉండవచ్చు: (1) క్షితిజ సమాంతర మరియు (2) నిలువు ఆఫ్సెట్లు, (3) బ్లర్ మరియు (4) ఘన లేదా పాక్షిక-పారదర్శకంగా ఉండే రంగు. ఆ ఆఫ్సెట్ విలువలు సానుకూలంగా లేదా ప్రతికూలంగా ఉండవచ్చు, కాబట్టి నేను "యుక్-యుక్ డక్"ని క్రిందికి మరియు కుడి వైపునకు లాగి గట్టి నీడను ఉపయోగించి పునరావృతం చేయగలను: రంగు: #f7f76d; టెక్స్ట్-షాడో: 5px 5px 0 #1e1904;
మరోవైపు, ఈ "పింట్ జెయింట్" టైటిల్ దాని ప్రతికూల సెమీ-సాఫ్ట్ షాడోతో భిన్నమైన అనుభూతిని కలిగి ఉంది: రంగు: #c2a872; వచన నీడ: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
అదనపు లోతును జోడించడానికి మరియు మరింత ఆసక్తికరమైన ప్రభావాలను సృష్టించడానికి, నేను బహుళ నీడలను లేయర్ చేయగలను. "లెట్స్ డక్ అవుట్" కోసం, నేను నాలుగు నీడలను మిళితం చేస్తాను: మొదటిది నెగటివ్ క్షితిజ సమాంతర ఆఫ్సెట్తో కూడిన ఘనమైన నీడను బ్యాక్గ్రౌండ్ నుండి పైకి లేపడానికి, దాని చుట్టూ అస్పష్టతను సృష్టించడానికి క్రమంగా మృదువైన నీడలు ఉంటాయి: రంగు: #6F4D80; వచన నీడ: -5px5px 0 #260e1e, /* షాడో 1 */ 0 0 15px #e9ce96, /* షాడో 2 */ 0 0 30px #e9ce96, /* షాడో 3 */ 0 0 30px #e9ce96; /* షాడో 4 */
ఈ నీడలు టెక్స్ట్-షాడోను ఉపయోగించడం అనేది కేవలం లైటింగ్ ప్రభావాలను సృష్టించడం మాత్రమే కాదని చూపిస్తుంది, ఎందుకంటే అవి అలంకారమైనవి మరియు వ్యక్తిత్వాన్ని కూడా జోడించగలవు. టెక్స్ట్ స్ట్రోక్ అనేక కార్టూన్ టైటిల్ కార్డ్లు బోల్డ్ అవుట్లైన్తో అక్షరాలను కలిగి ఉంటాయి, అవి వాటిని నేపథ్యం నుండి వేరు చేస్తాయి. నేను టెక్స్ట్-స్ట్రోక్ని ఉపయోగించి ఈ ప్రభావాన్ని మళ్లీ సృష్టించగలను. చాలా కాలంగా, ఈ ప్రాపర్టీ కేవలం -webkit- ప్రిఫిక్స్ ద్వారా మాత్రమే అందుబాటులో ఉంది, అయితే ఇది ఇప్పుడు ఆధునిక బ్రౌజర్లలో మద్దతునిస్తుందని కూడా అర్థం.
టెక్స్ట్-స్ట్రోక్ అనేది రెండు లక్షణాలకు సంక్షిప్తలిపి. మొదటిది, టెక్స్ట్-స్ట్రోక్-వెడల్పు, వ్యక్తిగత అక్షరాల చుట్టూ ఒక ఆకృతిని గీస్తుంది, రెండవది, టెక్స్ట్-స్ట్రోక్-రంగు, దాని రంగును నియంత్రిస్తుంది. “వాట్ ఎవర్ గోస్ పప్” కోసం, నేను పసుపు వచనానికి 4px బ్లూ స్ట్రోక్ని జోడించాను: రంగు: #eff0cd; -వెబ్కిట్-టెక్స్ట్-స్ట్రోక్: 4px #7890b5; టెక్స్ట్-స్ట్రోక్: 4px #7890b5;
స్ట్రోక్లు నీడలతో కలిపి ఉన్నప్పుడు ప్రత్యేకంగా ఉపయోగపడతాయి, కాబట్టి “గ్రోయింగ్, గ్రోయింగ్, గాన్” కోసం నేను ఈ త్రిమితీయ టెక్స్ట్ ఎఫెక్ట్ని సృష్టించడానికి కేవలం అస్పష్టమైన 1px షాడోకి సన్నని 3px స్ట్రోక్ని జోడించాను: రంగు: #fbb999; టెక్స్ట్-షాడో: 3px 5px 1px #5160b1; -వెబ్కిట్-టెక్స్ట్-స్ట్రోక్: 3px #984336; టెక్స్ట్-స్ట్రోక్: 3px #984336;
పెయింట్ ఆర్డర్ టెక్స్ట్-స్ట్రోక్ని ఉపయోగించడం ఎల్లప్పుడూ ఆశించిన ఫలితాన్ని అందించదు, ప్రత్యేకించి సన్నని అక్షరాలు మరియు మందమైన స్ట్రోక్లతో, ఎందుకంటే డిఫాల్ట్గా బ్రౌజర్ పూరకంపై స్ట్రోక్ను గీస్తుంది. పాపం, స్కెచ్లో నేను తరచుగా చేసే విధంగా స్ట్రోక్ ప్లేస్మెంట్ని సర్దుబాటు చేయడానికి CSS ఇప్పటికీ నన్ను అనుమతించలేదు. అయితే, పెయింట్-ఆర్డర్ ప్రాపర్టీ విలువలను కలిగి ఉంది, ఇది స్ట్రోక్ను ఫిల్ ముందు కాకుండా వెనుక ఉంచడానికి నన్ను అనుమతిస్తుంది.
పెయింట్-ఆర్డర్: స్ట్రోక్ మొదట స్ట్రోక్ను పెయింట్ చేస్తుంది, ఆపై పూరించండి, అయితే పెయింట్-ఆర్డర్: ఫిల్ దీనికి విరుద్ధంగా చేస్తుంది: రంగు: #fbb999; పెయింట్-ఆర్డర్: పూరించండి; టెక్స్ట్-షాడో: 3px 5px 1px #5160b1; టెక్స్ట్-స్ట్రోక్-కలర్:#984336; టెక్స్ట్-స్ట్రోక్-వెడల్పు: 3px;
ప్రభావవంతమైన స్ట్రోక్ అక్షరాలను చదవగలిగేలా ఉంచుతుంది, బరువును జోడిస్తుంది మరియు - నీడలు మరియు పెయింట్ ఆర్డర్తో కలిపినప్పుడు - ఫ్లాట్ టెక్స్ట్ నిజమైన ఉనికిని ఇస్తుంది. టెక్స్ట్ లోపల నేపథ్యాలు అనేక కార్టూన్ టైటిల్ కార్డ్లు అక్షరానికి ఆకృతి, గ్రేడియంట్లు లేదా ఇలస్ట్రేటెడ్ వివరాలను జోడించడం ద్వారా ఫ్లాట్ కలర్కు మించి ఉంటాయి. కొన్నిసార్లు ఇది ఆకృతి, ఇతర సమయాల్లో ఇది సూక్ష్మమైన టోనల్ షిఫ్ట్తో గ్రేడియంట్ కావచ్చు. వెబ్లో, నేను టెక్స్ట్ వెనుక బ్యాక్గ్రౌండ్ ఇమేజ్ లేదా గ్రేడియంట్ని ఉపయోగించి, ఆపై దానిని అక్షరాల ఆకృతికి క్లిప్ చేయడం ద్వారా ఈ ప్రభావాన్ని మళ్లీ సృష్టించగలను. ఇది కలిసి పని చేసే రెండు లక్షణాలపై ఆధారపడుతుంది: బ్యాక్గ్రౌండ్-క్లిప్: టెక్స్ట్ మరియు టెక్స్ట్-ఫిల్-కలర్: పారదర్శకం.
మొదట, నేను వచనం వెనుక నేపథ్యాన్ని వర్తింపజేస్తాను. ఇది బిట్మ్యాప్ లేదా వెక్టార్ ఇమేజ్ లేదా CSS గ్రేడియంట్ కావచ్చు. క్విక్ డ్రా మెక్గ్రా ఎపిసోడ్ "బాబా బైట్" నుండి ఈ ఉదాహరణ కోసం, టైటిల్ టెక్స్ట్లో చీకటి నుండి కాంతి వరకు సూక్ష్మమైన టాప్-బాటమ్ గ్రేడియంట్ ఉంటుంది: నేపథ్యం: లీనియర్-గ్రేడియంట్(0deg, #667b6a, #1d271a);
తర్వాత, నేను ఆ నేపథ్యాన్ని గ్లిఫ్లకు క్లిప్ చేసి, వచనాన్ని పారదర్శకంగా ఉండేలా చేస్తాను కాబట్టి నేపథ్యం దీని ద్వారా చూపబడుతుంది: -వెబ్కిట్-బ్యాక్గ్రౌండ్-క్లిప్: టెక్స్ట్; -వెబ్కిట్-టెక్స్ట్-ఫిల్-కలర్: పారదర్శకం;
కేవలం ఆ రెండు పంక్తులతో, నేపథ్యం టెక్స్ట్ వెనుక పెయింట్ చేయబడదు; బదులుగా, అది దానిలో పెయింట్ చేయబడింది. స్ట్రోక్స్ మరియు షాడోలతో కలిపినప్పుడు ఈ టెక్నిక్ ప్రత్యేకంగా పనిచేస్తుంది. క్లిప్ చేయబడిన గ్రేడియంట్ అక్షరాన్ని రంగు మరియు ఆకృతితో అందిస్తుంది, స్ట్రోక్ దాని అంచులను పదునుగా ఉంచుతుంది మరియు నీడ దానిని నేపథ్యం నుండి పైకి లేపుతుంది. కలిసి, వారు కొద్దిగా CSS కంటే ఎక్కువ ఏమీ ఉపయోగించి చేతితో చిత్రించిన టైటిల్ కార్డ్ల యొక్క లేయర్డ్ రూపాన్ని పునఃసృష్టిస్తారు. ఎప్పటిలాగే, క్లిప్ చేసిన వచనాన్ని జాగ్రత్తగా పరీక్షించండి, ఎందుకంటే బ్రౌజర్ విచిత్రాలు కొన్నిసార్లు నీడలు మరియు రెండరింగ్ను ప్రభావితం చేస్తాయి. వచనాన్ని వ్యక్తిగత అక్షరాలుగా విభజించడం కొన్నిసార్లు నేను మొత్తం పదం లేదా శీర్షికను స్టైల్ చేయకూడదనుకుంటున్నాను. నేను వ్యక్తిగత అక్షరాలను స్టైల్ చేయాలనుకుంటున్నాను - ఒక పాత్రను సరైన స్థానంలో ఉంచడానికి, ఒక గ్లిఫ్ అదనపు బరువును ఇవ్వడానికి లేదా కొన్ని అక్షరాలను స్వతంత్రంగా యానిమేట్ చేయడానికి. సాదా HTML మరియు CSSలో, అలా చేయడానికి ఒకే ఒక నమ్మదగిన మార్గం ఉంది: ప్రతి అక్షరాన్ని దాని స్వంత స్పాన్ ఎలిమెంట్లో చుట్టండి. నేను దానిని మాన్యువల్గా చేయగలను, కానీ అది పెళుసుగా ఉంటుంది, నిర్వహించడం కష్టంగా ఉంటుంది మరియు కాపీ మారినప్పుడు త్వరగా పడిపోతుంది. బదులుగా, నాకు ప్రతి అక్షరానికి నియంత్రణ అవసరమైనప్పుడు, నేను splt.js వంటి టెక్స్ట్-స్ప్లిటింగ్ లైబ్రరీని ఉపయోగిస్తాను (ఇతర పరిష్కారాలు అందుబాటులో ఉన్నప్పటికీ). ఇది టెక్స్ట్ నోడ్ని తీసుకుంటుంది మరియు స్వయంచాలకంగా పదాలు లేదా అక్షరాలను చుట్టి, నా మార్కప్ను గందరగోళానికి గురిచేయకుండా యానిమేట్ చేయడానికి మరియు స్టైల్ చేయడానికి నాకు అదనపు హుక్స్ని ఇస్తుంది. ఇది నా HTMLను చదవగలిగేలా మరియు అర్థవంతమైనదిగా ఉంచే విధానం, నాకు చక్కటి నియంత్రణను ఇస్తూ మీరు క్లాసిక్ కార్టూన్ టైటిల్ కార్డ్లలో చూసే అసమానమైన, క్యారెక్టర్ఫుల్ టైపోగ్రఫీని మళ్లీ సృష్టించాలి. అయితే, ఈ విధానం వస్తుందియాక్సెసిబిలిటీ హెచ్చరికలు, చాలా మంది స్క్రీన్ రీడర్లు టెక్స్ట్ నోడ్లను వరుసగా చదువుతారు. కాబట్టి ఇది:
హమ్ స్వీట్ హమ్
… మీరు ఆశించిన విధంగా చదువుతుంది: హమ్ స్వీట్ హమ్
కానీ ఇది:
H u m
…బ్రౌజర్ మరియు స్క్రీన్ రీడర్ ఆధారంగా విభిన్నంగా అర్థం చేసుకోవచ్చు. కొందరు అక్షరాలను క్రోడీకరించి పదాలను సరిగ్గా చదువుతారు. ఇతరులు అక్షరాల మధ్య పాజ్ చేయవచ్చు, ఇది చెత్త దృష్టాంతంలో ఇలా అనిపించవచ్చు: “H...” “U...” “M...”
దురదృష్టవశాత్తు, కొన్ని విభజన పరిష్కారాలు ఎల్లప్పుడూ ప్రాప్యత చేయగల ఫలితాన్ని అందించవు, కాబట్టి నేను నా స్వంత టెక్స్ట్ స్ప్లిటర్, splinter.jsని వ్రాసాను, ఇది ప్రస్తుతం బీటాలో ఉంది. వ్యక్తిగత అక్షరాలను మార్చడం నా టూన్ టెక్స్ట్ స్ప్లిటర్ని యాక్టివేట్ చేయడానికి, నేను విభజించాలనుకుంటున్న ఎలిమెంట్కు డేటా-లక్షణాన్ని జోడిస్తాను:
హమ్ స్వీట్ హమ్
ముందుగా, నా స్క్రిప్ట్ ప్రతి పదాన్ని ఒక్కొక్క అక్షరాలుగా విడదీస్తుంది మరియు క్లాస్ మరియు ARIA అట్రిబ్యూట్లు వర్తింపజేయబడిన ఒక స్పాన్ ఎలిమెంట్లో వాటిని వ్రాప్ చేస్తుంది:
స్క్రిప్ట్ అప్పుడు స్ప్లిట్ ఎలిమెంట్ యొక్క ప్రారంభ కంటెంట్ని తీసుకుంటుంది మరియు యాక్సెస్బిలిటీని నిర్వహించడంలో సహాయపడటానికి దానిని అరియా లక్షణంగా జోడిస్తుంది:
ఆ క్లాస్ అట్రిబ్యూట్లు వర్తింపజేయడంతో, నేను ఎంచుకున్న విధంగా వ్యక్తిగత పాత్రలను స్టైల్ చేయగలను.
ఉదాహరణకు, “హమ్ స్వీట్ హమ్” కోసం, దాని అక్షరాలు బేస్లైన్ నుండి ఎలా మారతాయో నేను పునరావృతం చేయాలనుకుంటున్నాను. నా టూన్ టెక్స్ట్ స్ప్లిటర్ని ఉపయోగించిన తర్వాత, నేను సెమీ యాదృచ్ఛిక రూపాన్ని సృష్టించడానికి అనేక :nth-child ఎంపికలను ఉపయోగించి నాలుగు విభిన్న అనువాద విలువలను వర్తింపజేసాను: /* 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; }
కానీ ట్రాన్స్లేట్ అనేది నా టూన్ టెక్స్ట్ని మార్చడానికి నేను ఉపయోగించగల ఒకే ఒక ఆస్తి.
నేను మరింత అస్తవ్యస్తంగా కనిపించడం కోసం ఆ వ్యక్తిగత అక్షరాలను కూడా తిప్పగలను: /* 4వ, 8వ, 12వ... */ .toon-line .toon-char:nth-child(4n) {రొటేట్: -4deg; } /* 1వ, 5వ, 9వ... */ .toon-char:nth-child(4n+1) {రొటేట్: -8deg; } /* 2వ, 6వ, 10వ... */ .toon-char:nth-child(4n+2) {రొటేట్: 4deg; } /* 3వ, 7వ, 11వ... */ .toon-char:nth-child(4n+3) {రొటేట్: 8deg; }
కానీ ట్రాన్స్లేట్ అనేది నా టూన్ టెక్స్ట్ని మార్చడానికి నేను ఉపయోగించగల ఒకే ఒక ఆస్తి. నేను మరింత అస్తవ్యస్తంగా కనిపించడం కోసం ఆ వ్యక్తిగత అక్షరాలను కూడా తిప్పగలను: /* 4వ, 8వ, 12వ... */ .toon-line .toon-char:nth-child(4n) { తిప్పండి: -4డిగ్రీలు; }
/* 1వ, 5వ, 9వ... */ .toon-char:nth-child(4n+1) { తిప్పండి: -8డిగ్రీలు; }
/* 2వ, 6వ, 10వ... */ .toon-char:nth-child(4n+2) { తిప్పండి: 4deg; }
/* 3వ, 7వ, 11వ... */ .toon-char:nth-child(4n+3) { తిప్పండి: 8డిగ్రీలు; }
మరియు, వాస్తవానికి, నేను ఆ పాత్రలను కదిలించడానికి మరియు నా టూన్ టెక్స్ట్ స్టైల్ టైటిల్లకు జీవం పోయడానికి యానిమేషన్లను జోడించగలను. మొదట, నేను అక్షరాలను తిప్పే కీఫ్రేమ్ యానిమేషన్ను సృష్టించాను:
@keyframes జిగిల్ { 0%, 100% {పరివర్తన: తిప్పండి(var(--బేస్-రొటేట్, 0డిగ్)); } 25% {పరివర్తన: తిప్పండి(calc(var(--base-rotate, 0deg) + 3deg)); } 50% {పరివర్తన: తిప్పండి(calc(var(--base-rotate, 0deg) - 2deg)); } 75% {పరివర్తన: తిప్పండి(calc(var(--base-rotate, 0deg) + 1deg)); } }
నా టూన్ టెక్స్ట్ స్ప్లిటర్ ద్వారా సృష్టించబడిన స్పాన్ ఎలిమెంట్లకు దీన్ని వర్తించే ముందు: .టూన్-చార్ { యానిమేషన్: జిగల్ 3s అనంతమైన ఈజ్-ఇన్-అవుట్; రూపాంతరం-మూలం: మధ్య దిగువన; }
చివరగా, ప్రతి అక్షరం జిగిల్ చేయడం ప్రారంభించే ముందు భ్రమణ మొత్తాన్ని మరియు ఆలస్యాన్ని సెట్ చేయడం: .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) {యానిమేషన్-ఆలస్యం: 0.1s; } .toon-char:nth-child(4n+1) {యానిమేషన్-ఆలస్యం: 0.3s; } .toon-char:nth-child(4n+2) {యానిమేషన్-ఆలస్యం: 0.5s; } .toon-char:nth-child(4n+3) {యానిమేషన్-ఆలస్యం: 0.7s; }
ఒక ముద్ర వేయడానికి ఒక ఫ్రేమ్ కార్టూన్ టైటిల్ ఆర్టిస్టులు ముద్ర వేయడానికి ఒక ఫ్రేమ్ని కలిగి ఉన్నారు మరియు వారి టైపోగ్రఫీ వారు చిత్రించిన కళాకృతి వలె ముఖ్యమైనది. వెబ్లో కూడా ఇదే వర్తిస్తుంది. చక్కగా రూపొందించబడిన హెడర్ లేదా హీరోప్రాంతానికి స్పష్టత, పాత్ర మరియు విశ్వాసం అవసరం - కేవలం క్షీణించిన పూర్తి-వెడల్పు నేపథ్య చిత్రం కాదు. కొన్ని జాగ్రత్తగా ఎంచుకున్న CSS లక్షణాలతో — నీడలు, స్ట్రోక్లు, క్లిప్ చేయబడిన బ్యాక్గ్రౌండ్లు మరియు కొన్ని నియంత్రిత యానిమేషన్ — మేము అదే ప్రభావాన్ని మళ్లీ సృష్టించగలము. నేను టూన్ టెక్స్ట్ని ప్రేమిస్తున్నాను ఎందుకంటే నేను వ్యామోహంతో కాదు, దాని రూపకల్పన ఉద్దేశపూర్వకంగా ఉంది. ఉద్దేశపూర్వక ఎంపికలు చేయండి మరియు కొద్దిగా టూన్ టెక్స్ట్ టైపోగ్రఫీ మీ డిజైన్లకు పంచ్ను జోడించనివ్వండి.
