CSS மற்றும் SVG அனிமேஷன்களைப் பற்றி என்னால் முடிந்த அனைத்தையும் கற்றுக்கொள்ள வேண்டிய ஒரு திட்டத்தை முடித்த பிறகு, ஸ்மாஷிங் அனிமேஷன்கள் மற்றும் "எப்படி கிளாசிக் கார்ட்டூன்கள் நவீன CSS ஐ ஊக்குவிக்கிறது" பற்றி இந்தத் தொடரை எழுதத் தொடங்கினேன். இந்த ஆண்டை நிறைவு செய்ய, டூன் தலைப்புகளை மிகவும் தாக்கத்தை ஏற்படுத்தக்கூடிய அந்த உறுப்பை உருவாக்க நவீன CSSஐ எவ்வாறு பயன்படுத்துவது என்பதை உங்களுக்குக் காட்ட விரும்புகிறேன்: அவற்றின் அச்சுக்கலை. தலைப்பு கலைப்படைப்பு வடிவமைப்பு 1920கள் மற்றும் 30களின் முற்பகுதியில் அமைதியான காலகட்டங்களில், ஒரு படத்தின் டைட்டில் கார்டின் அச்சுக்கலை ஒரு மனநிலையை உருவாக்கி, காட்சியை அமைத்து, பார்வையாளர்கள் எந்த வகையான திரைப்படத்தைப் பார்க்க வேண்டும் என்பதை நினைவூட்டியது.
கார்ட்டூன் தலைப்பு அட்டைகள் பிராண்டிங், மனநிலை மற்றும் காட்சி அமைப்பு ஆகியவையும் ஒன்றாக இருந்தன. ஆரம்ப ஆண்டுகளில், பெரிய ஸ்டுடியோ பட்ஜெட்கள் பெரியதாக இருந்தபோது, இந்த தலைப்பு அட்டைகள் பெரும்பாலும் விளக்கமாகவும் ஓவியமாகவும் இருந்தன.
ஆனால் 1950 களில் தொலைக்காட்சி வளர்ச்சியடைந்தபோது, பட்ஜெட்கள் வீழ்ச்சியடைந்தன, மேலும் லாரன்ஸ் "ஆர்ட்" கோபிள் போன்ற கலைஞர்களால் வடிவமைக்கப்பட்ட அட்டைகள் ஒரு புதிய காட்சி மொழியை ஏற்றுக்கொண்டன, மேலும் கிராஃபிக், பகட்டான மற்றும் குறைவான சிக்கலானதாக மாறியது. குறிப்பு: லாரன்ஸ் "ஆர்ட்" கோபல், நூற்றாண்டின் நடுப்பகுதியில் அமெரிக்க அனிமேஷனில் அடிக்கடி கவனிக்கப்படாத ஹீரோக்களில் ஒருவர். 1950கள் மற்றும் 1960களில் ஹன்னா-பார்பெராவின் மிகவும் செல்வாக்குமிக்க ஆண்டுகளில் அவர் முதன்மையாக பணியாற்றினார். கோபல் ஒரு கேரக்டர் அனிமேட்டராக இருக்கவில்லை. வளிமண்டலத்தை உருவாக்குவதே அவரது பங்கு, எனவே அவர் தி ஃபிளிண்ட்ஸ்டோன்ஸ், ஹக்கிள்பெர்ரி ஹவுண்ட், குயிக் டிரா மெக்ரா மற்றும் யோகி பியர் ஆகியவற்றிற்கான சூழல்களையும், தொனியை அமைக்கும் தொடக்க தலைப்பு அட்டைகளையும் வடிவமைத்தார். அவரது தலைப்பு அட்டைகள், லோகோ மேலெழுதப்பட்ட ஓவியங்கள், ஹன்னா-பார்பெராவின் சின்னமான தோற்றத்தை வரையறுக்க உதவியது. குயிக் டிரா மெக்ரா மற்றும் யோகி பியர் போன்ற கதாபாத்திரங்களுக்கான கோபலின் கலைப்படைப்பு சிறிய டிவி திரைகளில் பயனுள்ளதாக இருந்தது. கார்ட்டூனில் இருந்து ஒரு ஸ்டில் ஒன்றை மீண்டும் உருவாக்குவதற்குப் பதிலாக, ஒற்றை, வலுவான யோசனையை - பெரும்பாலும் நிழற்படத்தில் - முன்வைப்பதில் கவனம் செலுத்தினார். "The Buzzin' Bear" இல், யோகி ஹெலிகாப்டரில் ஒலிக்கிறார். "பியர் ஆன் எ பிக்னிக்கில்" கையில் பிக்-ஏ-நிக் கூடையுடன் அவர் குதிக்கிறார், மேலும் அவரது "பரிசு சண்டை பயத்திற்காக" யோகி தலைப்பு உரையை பெட்டியில் வைக்கிறார்.
நம்புவதற்கு சிறிதளவு அல்லது எந்த இயக்கமும் இல்லாமல், கோபலின் ஒற்றை பிரேம்கள் ஒரு மனநிலையை உருவாக்க வேண்டும், காட்சியை அமைக்க வேண்டும் மற்றும் ஒரு கதையை விவரிக்க வேண்டும். தட்டையான வண்ணங்கள், கிராஃபிக் வடிவங்கள் மற்றும் அச்சுக்கலை ஆகியவற்றைப் பயன்படுத்தி அவர்கள் இதைச் செய்தார்கள், அவை அடிக்கடி கலைப்படைப்பில் ஒருங்கிணைக்கப்பட்டன.
இணையத்தில் பணிபுரியும் வடிவமைப்பாளர்களாக, டூன் தலைப்புகள் ஒரு பிராண்டின் ஆளுமையை எவ்வாறு வெளிப்படுத்துவது, முதல் தோற்றத்தை உருவாக்குவது மற்றும் ஒரு தயாரிப்பு அல்லது இணையதளத்தைப் பயன்படுத்தி ஒருவரின் அனுபவத்திற்கான எதிர்பார்ப்புகளை எவ்வாறு அமைப்பது என்பதைப் பற்றி நிறைய கற்றுக்கொடுக்கும். பயனுள்ள பேனர்கள், இறங்கும் பக்க தலைப்புகள் மற்றும் நல்ல பழைய ஸ்பிளாஸ் திரைகளை உருவாக்க கலைஞர்களின் நுட்பங்களிலிருந்து நாம் கற்றுக்கொள்ளலாம். டூன் தலைப்பு அச்சுக்கலை கார்ட்டூன் தலைப்பு அட்டைகள், படத்துடன் வகையை இணைப்பது, தலைப்பு அல்லது ஹீரோவுக்குத் தேவையான பஞ்சை எவ்வாறு வழங்குகிறது என்பதைக் காட்டுகிறது. ஒரு சில உரை-நிழல், உரை-அழுத்தம் மற்றும் மாற்றும் தந்திரங்களுடன், நவீன CSS உங்களை அதே ஆற்றலைப் பயன்படுத்த அனுமதிக்கிறது.
டூன் உரை தலைப்பு ஜெனரேட்டர் இந்த கட்டுரையை எழுதுவதன் மூலம், நான் மிகவும் விரும்பும் கார்ட்டூன் தலைப்புகளைப் போன்ற உரையை உருவாக்குவதற்கான ஒரு கருவி பயனுள்ளதாக இருக்கும் என்பதை உணர்ந்தேன். அதனால் ஒன்றை உருவாக்கினேன். மை டூன் டெக்ஸ்ட் டைட்டில் ஜெனரேட்டர் நிறங்கள், ஸ்ட்ரோக்குகள் மற்றும் பல டெக்ஸ்ட் ஷேடோக்களுடன் பரிசோதனை செய்ய உங்களை அனுமதிக்கிறது. நீங்கள் வண்ணப்பூச்சு வரிசையை சரிசெய்யலாம், எழுத்து இடைவெளியைப் பயன்படுத்தலாம், மாதிரி எழுத்துருக்களின் தேர்வில் உங்கள் உரையை முன்னோட்டமிடலாம், பின்னர் ஒரு திட்டத்தில் பயன்படுத்த, உருவாக்கப்பட்ட CSS ஐ நேரடியாக உங்கள் கிளிப்போர்டுக்கு நகலெடுக்கலாம். டூன் தலைப்பு CSS டூன் டெக்ஸ்ட் டைட்டில் ஜெனரேட்டர் உங்களுக்கு வழங்கும் CSSஐ நகலெடுத்து ஒட்டலாம். ஆனால் அது என்ன செய்கிறது என்பதை இன்னும் விரிவாகப் பார்ப்போம். உரை நிழல் Augie Doggie இன் "யுக்-யுக் டக்" எபிசோடில் இருந்து இந்த தலைப்பில் உள்ள வகையைப் பாருங்கள், அதன் வெளிர் மஞ்சள் எழுத்துக்கள் மற்றும் அடர், கடினமான, ஆஃப்செட் நிழலை பின்னணியில் இருந்து தூக்கி, ஆழத்தின் மாயையை உருவாக்குகிறது.
உரை-நிழல் நான்கு மதிப்புகளை ஏற்றுக்கொள்கிறது என்பதை நீங்கள் ஏற்கனவே அறிந்திருக்கலாம்: (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 */
இந்த நிழல்கள் உரை-நிழலைப் பயன்படுத்துவது லைட்டிங் விளைவுகளை உருவாக்குவது மட்டுமல்ல, அவை அலங்காரமாகவும் ஆளுமையைச் சேர்க்கும். உரை பக்கவாதம் பல கார்ட்டூன் தலைப்பு அட்டைகள் தடிமனான அவுட்லைன் கொண்ட எழுத்துக்களைக் கொண்டுள்ளன, அவை பின்னணியில் இருந்து தனித்து நிற்கின்றன. டெக்ஸ்ட் ஸ்ட்ரோக்கைப் பயன்படுத்தி என்னால் இந்த விளைவை மீண்டும் உருவாக்க முடியும். நீண்ட காலமாக, இந்த சொத்து -வெப்கிட்- முன்னொட்டு வழியாக மட்டுமே கிடைத்தது, ஆனால் இது இப்போது நவீன உலாவிகளில் ஆதரிக்கப்படுகிறது.
உரை பக்கவாதம் என்பது இரண்டு பண்புகளுக்கான சுருக்கெழுத்து. முதல், டெக்ஸ்ட்-ஸ்ட்ரோக்-அகலம், தனிப்பட்ட எழுத்துக்களைச் சுற்றி ஒரு விளிம்பை வரைகிறது, இரண்டாவது, டெக்ஸ்ட்-ஸ்ட்ரோக்-கலர், அதன் நிறத்தைக் கட்டுப்படுத்துகிறது. “Whatever Goes Pup” என்பதற்கு, மஞ்சள் உரையில் 4px நீல நிற ஸ்ட்ரோக்கைச் சேர்த்துள்ளேன்: நிறம்: #eff0cd; -webkit-text-stroke: 4px #7890b5; உரை-பக்கவாதம்: 4px #7890b5;
இந்த முப்பரிமாண உரை விளைவை உருவாக்க, "வளரும், வளரும், கான்" என்பதற்கு, பக்கவாதம் மிகவும் பயனுள்ளதாக இருக்கும். நிறம்: #fbb999; உரை-நிழல்: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; உரை பக்கவாதம்: 3px #984336;
பெயிண்ட் ஆர்டர் டெக்ஸ்ட்-ஸ்ட்ரோக்கைப் பயன்படுத்துவது எப்போதும் எதிர்பார்த்த முடிவைத் தராது, குறிப்பாக மெல்லிய எழுத்துக்கள் மற்றும் தடிமனான ஸ்ட்ரோக்குகளுடன், முன்னிருப்பாக உலாவி நிரப்புதலின் மீது ஒரு ஸ்ட்ரோக்கை இழுக்கிறது. துரதிர்ஷ்டவசமாக, ஸ்கெட்சில் நான் அடிக்கடி செய்வது போல் ஸ்ட்ரோக் பிளேஸ்மென்ட்டை சரிசெய்ய CSS இன்னும் என்னை அனுமதிக்கவில்லை. இருப்பினும், பெயிண்ட்-ஆர்டர் சொத்து மதிப்புகளைக் கொண்டுள்ளது, இது பக்கவாதத்தை முன் நிரப்புவதற்குப் பதிலாக பின்னால் வைக்க அனுமதிக்கிறது.
பெயிண்ட்-ஆர்டர்: ஸ்ட்ரோக் முதலில் ஸ்ட்ரோக்கை வர்ணிக்கிறது, பின்னர் நிரப்புகிறது, அதேசமயம் பெயிண்ட்-ஆர்டர்: ஃபில் இதற்கு நேர்மாறாக செய்கிறது: நிறம்: #fbb999; பெயிண்ட்-ஆர்டர்: நிரப்பு; உரை-நிழல்: 3px 5px 1px #5160b1; உரை-பக்க-வண்ணம்:#984336; உரை-பக்க-அகலம்: 3px;
ஒரு பயனுள்ள பக்கவாதம் கடிதங்களைப் படிக்கக்கூடியதாக வைத்திருக்கிறது, எடையைக் கூட்டுகிறது மற்றும் - நிழல்கள் மற்றும் வண்ணப்பூச்சு வரிசையுடன் இணைந்தால் - தட்டையான உரையின் உண்மையான இருப்பை அளிக்கிறது. உரையின் உள்ளே பின்னணிகள் பல கார்ட்டூன் தலைப்பு அட்டைகள் எழுத்துக்கு அமைப்பு, சாய்வு அல்லது விளக்கப்பட விவரங்களைச் சேர்ப்பதன் மூலம் தட்டையான நிறத்திற்கு அப்பால் செல்கின்றன. சில நேரங்களில் அது ஒரு அமைப்பு, மற்ற நேரங்களில் அது ஒரு நுட்பமான டோனல் மாற்றத்துடன் ஒரு சாய்வாக இருக்கலாம். இணையத்தில், உரைக்குப் பின்னால் ஒரு பின்னணி படத்தை அல்லது சாய்வு பயன்படுத்தி, பின்னர் அதை எழுத்துக்களின் வடிவத்தில் கிளிப்பிங் செய்வதன் மூலம் இந்த விளைவை மீண்டும் உருவாக்க முடியும். இது ஒன்றாக வேலை செய்யும் இரண்டு பண்புகளை நம்பியுள்ளது: பின்னணி-கிளிப்: உரை மற்றும் உரை நிரப்பு-நிறம்: வெளிப்படையானது.
முதலில், நான் உரைக்குப் பின்னால் ஒரு பின்னணியைப் பயன்படுத்துகிறேன். இது பிட்மேப் அல்லது வெக்டர் படமாகவோ அல்லது CSS சாய்வாகவோ இருக்கலாம். Quick Draw McGraw எபிசோடில் இருந்து இந்த உதாரணத்திற்கு, "பாபா பைட்", தலைப்பு உரையில் இருட்டில் இருந்து வெளிச்சத்திற்கு நுட்பமான மேல்-கீழ் சாய்வு உள்ளது: பின்னணி: நேரியல் சாய்வு(0deg, #667b6a, #1d271a);
அடுத்து, நான் அந்த பின்னணியை கிளிஃப்களுக்கு கிளிப் செய்து உரையை வெளிப்படையானதாக ஆக்குகிறேன், இதன் மூலம் பின்னணி காட்டுகிறது: -webkit-background-clip: text; -வெப்கிட்-உரை-நிரப்பு-நிறம்: வெளிப்படையானது;
அந்த இரண்டு வரிகளைக் கொண்டு, பின்புலத்தை உரைக்குப் பின்னால் வரைய முடியாது; அதற்கு பதிலாக, அது அதற்குள் வரையப்பட்டுள்ளது. பக்கவாதம் மற்றும் நிழல்களுடன் இணைந்தால் இந்த நுட்பம் சிறப்பாக செயல்படுகிறது. க்ளிப் செய்யப்பட்ட சாய்வு எழுத்துகளை வண்ணம் மற்றும் அமைப்புடன் வழங்குகிறது, ஒரு பக்கவாதம் அதன் விளிம்புகளை கூர்மையாக வைத்திருக்கும், மேலும் ஒரு நிழல் அதை பின்னணியில் இருந்து உயர்த்துகிறது. ஒன்றாக, அவர்கள் சிறிய CSS ஐத் தவிர வேறு எதையும் பயன்படுத்தி கையால் வரையப்பட்ட தலைப்பு அட்டைகளின் அடுக்கு தோற்றத்தை மீண்டும் உருவாக்குகிறார்கள். எப்பொழுதும் போல, க்ளிப் செய்யப்பட்ட உரையை கவனமாக சோதிக்கவும், ஏனெனில் உலாவி வினோதங்கள் சில நேரங்களில் நிழல்கள் மற்றும் ரெண்டரிங் பாதிக்கலாம். உரையை தனிப்பட்ட எழுத்துகளாகப் பிரித்தல் சில நேரங்களில் நான் ஒரு முழு வார்த்தையையோ அல்லது தலைப்பையோ வடிவமைக்க விரும்பவில்லை. நான் தனித்தனி எழுத்துக்களை வடிவமைக்க விரும்புகிறேன் - ஒரு எழுத்தை இடத்தில் நகர்த்த, ஒரு கிளிஃப் கூடுதல் எடையைக் கொடுக்க அல்லது சில எழுத்துக்களை சுயாதீனமாக அனிமேட் செய்ய. எளிய HTML மற்றும் CSS இல், அதைச் செய்ய ஒரே ஒரு நம்பகமான வழி உள்ளது: ஒவ்வொரு எழுத்தையும் அதன் சொந்த ஸ்பான் உறுப்பில் மடிக்கவும். நான் அதை கைமுறையாக செய்ய முடியும், ஆனால் அது உடையக்கூடியதாக இருக்கும், பராமரிக்க கடினமாக இருக்கும், மேலும் நகல் மாறும் போது விரைவாக உடைந்துவிடும். அதற்குப் பதிலாக, ஒவ்வொரு எழுத்துக்கும் கட்டுப்பாடு தேவைப்படும்போது, splt.js போன்ற உரைப் பிரிப்பு நூலகத்தைப் பயன்படுத்துகிறேன் (பிற தீர்வுகள் இருந்தாலும்). இது ஒரு உரை முனையை எடுத்து தானாகவே வார்த்தைகள் அல்லது எழுத்துக்களை மூடுகிறது, என் மார்க்அப்பைக் குழப்பாமல் அனிமேட் செய்வதற்கும் ஸ்டைல் செய்வதற்கும் கூடுதல் கொக்கிகளை வழங்குகிறது. இது எனது HTML ஐ படிக்கக்கூடியதாகவும் சொற்பொருளாகவும் வைத்திருக்கும் ஒரு அணுகுமுறையாகும், அதே நேரத்தில் கிளாசிக் கார்ட்டூன் தலைப்பு அட்டைகளில் நீங்கள் காணும் சீரற்ற, குணாதிசயமான அச்சுக்கலையை மீண்டும் உருவாக்க வேண்டும். இருப்பினும், இந்த அணுகுமுறை வருகிறதுபெரும்பாலான ஸ்க்ரீன் ரீடர்கள் டெக்ஸ்ட் நோட்களை வரிசையாகப் படிப்பதால், அணுகல்தன்மை எச்சரிக்கைகள். எனவே இது:
ஹம் ஸ்வீட் ஹம்
நீங்கள் எதிர்பார்ப்பது போல் படிக்கிறது: ஹம் ஸ்வீட் ஹம்
ஆனால் இது:
H u m
…உலாவி மற்றும் ஸ்க்ரீன் ரீடரைப் பொறுத்து வித்தியாசமாக விளக்கலாம். சிலர் எழுத்துக்களை ஒருங்கிணைத்து வார்த்தைகளைச் சரியாகப் படிப்பார்கள். மற்றவர்கள் கடிதங்களுக்கு இடையில் இடைநிறுத்தப்படலாம், இது ஒரு மோசமான சூழ்நிலையில் இப்படி ஒலிக்கலாம்: "எச்..." "உ..." "எம்..."
துரதிர்ஷ்டவசமாக, சில பிளவு தீர்வுகள் எப்போதும் அணுகக்கூடிய முடிவை வழங்காது, எனவே நான் எனது சொந்த உரை பிரிப்பான், splinter.js ஐ எழுதியுள்ளேன், இது தற்போது பீட்டாவில் உள்ளது. தனிப்பட்ட எழுத்துக்களை மாற்றுதல் எனது டூன் டெக்ஸ்ட் ஸ்ப்ளிட்டரைச் செயல்படுத்த, நான் பிரிக்க விரும்பும் உறுப்புக்கு தரவுப் பண்புகளைச் சேர்க்கிறேன்:
ஹம் ஸ்வீட் ஹம்
முதலில், எனது ஸ்கிரிப்ட் ஒவ்வொரு வார்த்தையையும் தனித்தனி எழுத்துக்களாகப் பிரித்து, வர்க்கம் மற்றும் ARIA பண்புக்கூறுகளுடன் ஒரு இடைவெளி உறுப்பில் மூடப்பட்டிருக்கும்:
ஸ்கிரிப்ட் பின்னர் பிளவு உறுப்பின் ஆரம்ப உள்ளடக்கத்தை எடுத்து அணுகலைப் பராமரிக்க உதவும் ஏரியா பண்புக்கூறாக சேர்க்கிறது:
அந்த வகுப்பு பண்புக்கூறுகள் பயன்படுத்தப்பட்டால், நான் தேர்ந்தெடுக்கும் விதத்தில் தனிப்பட்ட எழுத்துக்களை வடிவமைக்க முடியும்.
எடுத்துக்காட்டாக, “ஹம் ஸ்வீட் ஹம்” என்பதற்கு, அதன் எழுத்துக்கள் அடிப்படையிலிருந்து எப்படி மாறுகின்றன என்பதை நான் பிரதிபலிக்க விரும்புகிறேன். எனது Toon Text Splitter ஐப் பயன்படுத்திய பிறகு, அரை-சீரற்ற தோற்றத்தை உருவாக்க பல :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) { சுழற்று: -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; }
மற்றும், நிச்சயமாக, அந்த கதாபாத்திரங்களை அசைக்க அனிமேஷன்களைச் சேர்க்கலாம் மற்றும் எனது டூன் உரை பாணி தலைப்புகளுக்கு உயிர் கொடுக்க முடியும். முதலில், எழுத்துக்களை சுழற்றும் கீஃப்ரேம் அனிமேஷனை உருவாக்கினேன்:
@keyframes ஜிகிள் { 0%, 100% {மாற்றம்: சுழற்று(var(--base-rotate, 0deg)); } 25% {மாற்றம்: சுழற்று(கால்க்(var(--base-rotate, 0deg) + 3deg)); } 50% {உருமாற்றம்: சுழற்று(calc(var(--base-rotate, 0deg) - 2deg)); } 75% {மாற்றம்: சுழற்று(கால்க்(var(--base-rotate, 0deg) + 1deg)); } }
எனது டூன் டெக்ஸ்ட் ஸ்ப்ளிட்டரால் உருவாக்கப்பட்ட ஸ்பான் கூறுகளுக்கு அதைப் பயன்படுத்துவதற்கு முன்: .டூன்-சார் { animation: jiggle 3s infinite Ease-in-out; உருமாற்றம்-தோற்றம்: மையத்தின் கீழ்; }
இறுதியாக, ஒவ்வொரு எழுத்தும் நடுங்கத் தொடங்கும் முன் சுழற்சி அளவு மற்றும் தாமதத்தை அமைத்தல்: .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-delay: 0.3s; } .toon-char:nth-child(4n+2) {animation-delay: 0.5s; } .toon-char:nth-child(4n+3) {animation-delay: 0.7s; }
ஒரு தாக்கத்தை ஏற்படுத்த ஒரு சட்டகம் கார்ட்டூன் தலைப்பு கலைஞர்கள் ஒரு தோற்றத்தை உருவாக்க ஒரு சட்டத்தை வைத்திருந்தனர், மேலும் அவர்கள் வரைந்த கலைப்படைப்பு போலவே அவர்களின் அச்சுக்கலையும் முக்கியமானது. இணையத்திலும் அப்படித்தான். நன்கு வடிவமைக்கப்பட்ட தலைப்பு அல்லது ஹீரோபகுதிக்கு தெளிவு, தன்மை மற்றும் நம்பிக்கை தேவை - ஒரு மங்கலான முழு அகல பின்னணி படம் அல்ல. கவனமாக தேர்ந்தெடுக்கப்பட்ட சில CSS பண்புகள் - நிழல்கள், பக்கவாதம், கிளிப் செய்யப்பட்ட பின்னணிகள் மற்றும் சில கட்டுப்படுத்தப்பட்ட அனிமேஷன் - அதே தாக்கத்தை நாம் மீண்டும் உருவாக்க முடியும். நான் டூன் உரையை விரும்புவது நான் ஏக்கமாக இருப்பதால் அல்ல, மாறாக அதன் வடிவமைப்பு வேண்டுமென்றே இருப்பதால். வேண்டுமென்றே தேர்வுகளை மேற்கொள்ளுங்கள், மேலும் கொஞ்சம் டூன் டெக்ஸ்ட் டைபோகிராஃபி உங்கள் டிசைன்களுக்கு பஞ்ச் சேர்க்கலாம்.
