CSS আৰু SVG এনিমেচনৰ বিষয়ে মই যিমান পাৰো শিকিবলগীয়া হোৱা এটা প্ৰজেক্ট শেষ কৰাৰ পিছত মই এই ধাৰাবাহিকখন Smashing Animations আৰু “How Classic Cartoons Inspire Modern CSS” ৰ বিষয়ে লিখিবলৈ আৰম্ভ কৰিলোঁ। এই বছৰটো শেষ কৰিবলৈ, মই আপোনালোকক দেখুৱাব বিচাৰিছো যে কেনেকৈ আধুনিক CSS ব্যৱহাৰ কৰি সেই উপাদানটো সৃষ্টি কৰিব লাগে যিয়ে Toon Titles সমূহক ইমান প্ৰভাৱশালী কৰি তোলে: ইয়াৰ টাইপোগ্ৰাফী। শিৰোনাম আৰ্টৱৰ্ক ডিজাইন ১৯২০ আৰু ৩০ৰ দশকৰ আৰম্ভণিৰ নিৰৱ যুগত এখন ছবিৰ টাইটেল কাৰ্ডৰ টাইপ’গ্ৰাফীয়ে এক আমেজ সৃষ্টি কৰিছিল, দৃশ্যপট নিৰ্ধাৰণ কৰিছিল আৰু দৰ্শকক তেওঁলোকে চাবলৈ ধন দিয়া ছবিৰ ধৰণৰ কথা সোঁৱৰাই দিছিল।
কাৰ্টুনৰ টাইটেল কাৰ্ডবোৰো আছিল ব্ৰেণ্ডিং, মুড, আৰু দৃশ্য-সেটিং, সকলোবোৰ একেলগে গুটিয়াই লোৱা। প্ৰথম বছৰবোৰত যেতিয়া ডাঙৰ ডাঙৰ ষ্টুডিঅ’ৰ বাজেটবোৰ ডাঙৰ আছিল, তেতিয়া এই টাইটেল কাৰ্ডবোৰ প্ৰায়ে চিত্ৰকল্প আৰু চিত্ৰকল্পৰ দৰে আছিল।
কিন্তু যেতিয়া ১৯৫০ চনত টেলিভিছনৰ উত্থান ঘটিল, বাজেট কমি গ’ল আৰু লৰেন্স “আৰ্ট” গ’বলৰ দৰে শিল্পীয়ে ডিজাইন কৰা কাৰ্ডবোৰে নতুন দৃশ্য ভাষা গ্ৰহণ কৰিলে, অধিক গ্রাফিক, ষ্টাইলাইজড আৰু কম জটিল হৈ পৰিল। বি:দ্ৰ: লৰেন্স “আৰ্ট” গবল হৈছে শতিকাৰ মাজভাগৰ আমেৰিকান এনিমেচনৰ সততে অৱহেলিত নায়কসকলৰ ভিতৰত অন্যতম। তেওঁ মূলতঃ ১৯৫০ আৰু ১৯৬০ চনৰ আটাইতকৈ প্ৰভাৱশালী বছৰবোৰত হান্না-বাৰ্বেৰাৰ বাবে কাম কৰিছিল। গ’বল কোনো চৰিত্ৰ এনিমেটৰ নাছিল। তেওঁৰ ভূমিকা আছিল পৰিৱেশ সৃষ্টি কৰা, গতিকে তেওঁ দ্য ফ্লিণ্টষ্টোনছ, হাকলবেৰী হাউণ্ড, কুইক ড্ৰ' মেকগ্ৰা, আৰু যোগী বিয়াৰৰ বাবে পৰিৱেশ ডিজাইন কৰাৰ লগতে সুৰ নিৰ্ধাৰণ কৰা আৰম্ভণিৰ টাইটেল কাৰ্ডসমূহো ডিজাইন কৰিছিল। তেওঁৰ টাইটেল কাৰ্ডসমূহে, য’ত এটা ল’গ’ ওভাৰলেইড কৰা পেইন্টিং আছিল, হান্না-বাৰ্বেৰাৰ আইকনিক লুকটো সংজ্ঞায়িত কৰাত সহায় কৰিছিল। কুইক ড্ৰ’ মেকগ্ৰা আৰু যোগী বিয়াৰৰ দৰে চৰিত্ৰৰ বাবে গ’বলৰ শিল্পকৰ্ম সৰু টিভি পৰ্দাত ফলপ্ৰসূ আছিল। কাৰ্টুনটোৰ পৰা এটা ষ্টিল পুনৰুত্পাদন নকৰি তেওঁ এটা একক, শক্তিশালী ধাৰণা উপস্থাপন কৰাত মনোনিৱেশ কৰিছিল — প্ৰায়ে চিলোৱাটত — যিয়ে ইয়াৰ সাৰমৰ্মক ধৰি ৰাখিছিল। “দ্য বাজিন’ বিয়াৰ”ত যোগীয়ে হেলিকপ্টাৰত গুঞ্জন কৰি পাৰ হৈ যায়। হাতত পিক-এ-নিক বাস্কেট লৈ তেওঁ বাউন্স কৰি যায়, “বিয়াৰ অন এ পিকনিক”ত, আৰু তেওঁৰ “প্ৰাইজ ফাইট ফ্ৰাইট”ৰ বাবে যোগীয়ে শিৰোনামৰ লিখনীটো বক্সত ভৰাই দিয়ে।
নিৰ্ভৰ কৰিবলগীয়া গতি কম বা একেবাৰেই নোহোৱাকৈয়ে গ’বলৰ একক ফ্ৰেমবোৰে এটা আমেজ সৃষ্টি কৰিব লাগিছিল, দৃশ্যপট স্থাপন কৰিব লাগিছিল আৰু এটা কাহিনীৰ বৰ্ণনা কৰিব লাগিছিল। তেওঁলোকে এই কামটো কৰিছিল সমতল ৰং, গ্ৰাফিক আকৃতি আৰু টাইপোগ্ৰাফী ব্যৱহাৰ কৰি যিবোৰ সঘনাই শিল্পকৰ্মৰ সৈতে সংযুক্ত কৰা হৈছিল।
ৱেবত কাম কৰা ডিজাইনাৰ হিচাপে, টুন শিৰোনামে আমাক এটা ব্ৰেণ্ডৰ ব্যক্তিত্ব কেনেকৈ প্ৰকাশ কৰিব লাগে, প্ৰথম অনুভৱ কৰিব লাগে, আৰু কোনো প্ৰডাক্ট বা ৱেবছাইট ব্যৱহাৰ কৰি কাৰোবাৰ অভিজ্ঞতাৰ বাবে আশা নিৰ্ধাৰণ কৰিব লাগে সেই বিষয়ে বহু কথা শিকাব পাৰে। আমি শিল্পীসকলৰ কৌশলৰ পৰা শিকিব পাৰো ফলপ্ৰসূ বেনাৰ, লেণ্ডিং-পেজ হেডাৰ, আনকি ভাল পুৰণি স্প্লেছ স্ক্ৰীণ তৈয়াৰ কৰিবলৈ। টুন শিৰোনাম টাইপোগ্ৰাফী কাৰ্টুন শিৰোনাম কাৰ্ডসমূহে দেখুৱাই যে কেনেকৈ চিত্ৰকল্পৰ সৈতে টাইপ একত্ৰিত কৰিলে এজন হেডাৰ বা নায়কৰ প্ৰয়োজনীয় পাঞ্চটো প্ৰদান কৰে। মুষ্টিমেয় লিখনী-ছাঁ, লিখনী-ষ্ট্ৰ'ক, আৰু ৰূপান্তৰ কৌশলৰ সৈতে, আধুনিক CSS এ আপোনাক সেই একে শক্তিত টেপ কৰিবলৈ দিয়ে।
টুন টেক্সট টাইটেল জেনেৰেটৰ এই লেখাটো লিখাৰ আধাতে মই বুজিলোঁ যে মই ইমান ভালপোৱা কাৰ্টুন শিৰোনামবোৰৰ দৰে টেক্সট ষ্টাইলৰ টেক্সট সৃষ্টিৰ বাবে এটা সঁজুলি থাকিলে উপযোগী হ’ব। গতিকে এটা বনালোঁ। মোৰ টুন লিখনী শিৰোনাম উৎপাদকে আপোনাক ৰং, ষ্ট্ৰ'ক, আৰু একাধিক লিখনী ছাঁৰ সৈতে পৰীক্ষা-নিৰীক্ষা কৰিবলৈ দিয়ে। আপুনি ৰং ক্ৰম সামঞ্জস্য কৰিব পাৰে, আখৰৰ ব্যৱধান প্ৰয়োগ কৰিব পাৰে, আপোনাৰ লিখনী নমুনা আখৰৰ এটা নিৰ্ব্বাচনত পূৰ্বদৰ্শন কৰিব পাৰে, আৰু তাৰ পিছত সৃষ্টি কৰা CSS পোনপটীয়াকৈ আপোনাৰ ক্লিপবোৰ্ডলৈ কপি কৰিব পাৰে এটা প্ৰকল্পত ব্যৱহাৰ কৰিবলে। টুন শিৰোনাম CSS আপুনি কেৱল Toon লিখনী শিৰোনাম উৎপাদকে আপোনাক প্ৰদান কৰা CSS কপি-পেষ্ট কৰিব পাৰে। কিন্তু ই কি কৰে তাক ভালদৰে চাওঁ আহক। টেক্সট ছাঁ এই শিৰোনামটোৰ ধৰণটো চাওক অগী ডগীৰ খণ্ড “ইউক-ইউক ডাক”ৰ পৰা, ইয়াৰ শেঁতা হালধীয়া আখৰ আৰু গাঢ়, কঠিন, অফছেট ছাঁ যিয়ে ইয়াক পটভূমিৰ পৰা তুলি লৈ গভীৰতাৰ ভ্ৰমৰ সৃষ্টি কৰে।
আপুনি হয়তো ইতিমধ্যে জানে যে লিখনী-ছায়াই চাৰিটা মান গ্ৰহণ কৰে: (1) অনুভূমিক আৰু (2) উলম্ব অফছেট, (3) অস্পষ্ট, আৰু (4) এটা ৰং যি কঠিন বা অৰ্ধ-স্বচ্ছ হ'ব পাৰে। সেই অফছেট মানসমূহ ধনাত্মক বা ঋণাত্মক হ'ব পাৰে, গতিকে মই তললৈ আৰু সোঁফালে টানি লোৱা এটা কঠিন ছাঁ ব্যৱহাৰ কৰি “Yuk-Yuk Duck” প্ৰতিলিপি কৰিব পাৰো: ৰং: #f7f76d; টেক্সট-ছাঁ: ৫px ৫px ০ #১e১৯০৪;
আনহাতে, এই “পিণ্ট জায়েন্ট” শিৰোনামটোৰ নেতিবাচক অৰ্ধ-কোমল ছাঁৰ সৈতে এক বেলেগ অনুভৱ আছে: ৰং: #c2a872; text-shadow: -৭px ৫px ০ #b১০০e, ০ -৫px ১০px #৫৪৬c৬f;
অতিৰিক্ত গভীৰতা যোগ কৰিবলৈ আৰু অধিক আকৰ্ষণীয় প্ৰভাৱ সৃষ্টি কৰিবলৈ, মই একাধিক ছাঁ স্তৰ কৰিব পাৰো। “Let’s Duck Out” ৰ বাবে মই চাৰিটা ছাঁ একত্ৰিত কৰিছো: প্ৰথমটো এটা কঠিন ছাঁৰ সৈতে এটা ঋণাত্মক অনুভূমিক অফছেটৰ সৈতে লিখনীটো পটভূমিৰ পৰা তুলি ল’বলৈ, তাৰ পিছত ক্ৰমান্বয়ে কোমল ছাঁবোৰ ইয়াৰ চাৰিওফালে এটা অস্পষ্টতা সৃষ্টি কৰিবলৈ: ৰং: #6F4D80; text-shadow: -৫px5px 0 #260e1e, /* ছাঁ 1 */ 0 0 15px #e9ce96, /* ছাঁ 2 */ 0 0 30px #e9ce96, /* ছাঁ 3 */ 0 0 30px #e9ce96; /* ছাঁ ৪ */
এই ছাঁবোৰে দেখুৱাইছে যে টেক্সট-ছাঁ ব্যৱহাৰ কৰাটো কেৱল লাইটিং ইফেক্ট সৃষ্টি কৰা নহয়, কিয়নো ই সজ্জাগত হ’ব পাৰে আৰু ব্যক্তিত্ব যোগ কৰিব পাৰে। টেক্সট ষ্ট্ৰ'ক বহুতো কাৰ্টুন টাইটেল কাৰ্ডত বল্ড আউটলাইনৰ আখৰ থাকে যিয়ে পটভূমিৰ পৰা আঁতৰাই ৰাখে। মই টেক্সট-ষ্ট্ৰ'ক ব্যৱহাৰ কৰি এই প্ৰভাৱ পুনৰ সৃষ্টি কৰিব পাৰো। দীৰ্ঘ সময়ৰ বাবে, এই বৈশিষ্ট্য কেৱল এটা -webkit- উপসৰ্গৰ যোগেদি উপলব্ধ আছিল, কিন্তু ইয়াৰ অৰ্থ এইটোও যে ই এতিয়া আধুনিক ব্ৰাউজাৰসমূহত সমৰ্থিত।
text-stroke দুটা বৈশিষ্ট্যৰ চৰ্টহেণ্ড। প্ৰথমটোৱে, টেক্সট-ষ্ট্ৰ’ক-উইডথ, ব্যক্তিগত আখৰৰ চাৰিওফালে এটা কনট্যুৰ আঁকে, আনহাতে দ্বিতীয়, টেক্সট-ষ্ট্ৰ’ক-ৰঙে ইয়াৰ ৰং নিয়ন্ত্ৰণ কৰে। “Whatever Goes Pup” ৰ বাবে, মই হালধীয়া লিখনিত এটা 4px নীলা ষ্ট্ৰ’ক যোগ কৰিলোঁ: ৰং: #eff0cd; -ৱেবকিট-টেক্সট-ষ্ট্ৰ'ক: 4px #7890b5; টেক্সট-ষ্ট্ৰ'ক: 4px #7890b5;
ষ্ট্ৰ’কসমূহ বিশেষভাৱে উপযোগী হ’ব পাৰে যেতিয়া ইয়াক ছাঁৰ সৈতে সংযুক্ত কৰা হয়, গতিকে “বৃদ্ধি, বৃদ্ধি, গ’ল”ৰ বাবে, মই এই ত্ৰিমাত্ৰিক লিখনী প্ৰভাৱ সৃষ্টি কৰিবলৈ এটা কষ্টেৰে অস্পষ্ট 1px ছাঁত এটা পাতল 3px ষ্ট্ৰ’ক যোগ কৰিলোঁ: ৰং: #fbb999; টেক্সট-ছাঁ: ৩px ৫px ১px #৫১৬০b১; -ৱেবকিট-টেক্সট-ষ্ট্ৰ'ক: 3px #984336; টেক্সট-ষ্ট্ৰ'ক: 3px #984336;
পেইন্ট অৰ্ডাৰ টেক্সট-ষ্ট্ৰ’ক ব্যৱহাৰ কৰিলে সদায় প্ৰত্যাশিত ফলাফল পোৱা নাযায়, বিশেষকৈ পাতল আখৰ আৰু ডাঠ ষ্ট্ৰ’কৰ সৈতে, কাৰণ অবিকল্পিতভাৱে ব্ৰাউজাৰে ভৰোৱাৰ ওপৰত এটা ষ্ট্ৰ’ক আঁকে। দুখৰ বিষয় যে চি এছ এছে এতিয়াও মোক স্কেচত প্ৰায়ে কৰা ধৰণে ষ্ট্ৰ’ক প্লেচমেণ্ট এডজাষ্ট কৰিবলৈ অনুমতি নিদিয়ে। কিন্তু পেইণ্ট-অৰ্ডাৰ প্ৰপাৰ্টিটোৰ এনে মান আছে যিয়ে মোক ষ্ট্ৰ’কটো ফিলৰ সন্মুখত নহয়, পিছফালে ৰাখিবলৈ অনুমতি দিয়ে।
paint-order: stroke এ প্ৰথমে ষ্ট্ৰ'ক ৰং কৰে, তাৰ পিছত ভৰাই, আনহাতে paint-order: fill এ ইয়াৰ বিপৰীত কাম কৰে: ৰং: #fbb999; ৰং-অৰ্ডাৰ: ভৰাই; টেক্সট-ছাঁ: ৩px ৫px ১px #৫১৬০b১; টেক্সট-ষ্ট্ৰ'ক-ৰং:#984336; টেক্সট-ষ্ট্ৰ'ক-প্ৰস্থ: 3px;
এটা ফলপ্ৰসূ ষ্ট্ৰ'কে আখৰসমূহক পঢ়িব পৰা কৰি ৰাখে, ওজন যোগ কৰে, আৰু — যেতিয়া ছাঁ আৰু ৰঙৰ ক্ৰমৰ সৈতে সংযুক্ত হয় — সমতল লিখনীক প্ৰকৃত উপস্থিতি দিয়ে। লিখনীৰ ভিতৰৰ পটভূমি বহুতো কাৰ্টুন টাইটেল কাৰ্ডে আখৰত টেক্সচাৰ, গ্ৰেডিয়েণ্ট বা চিত্ৰিত বিৱৰণ যোগ কৰি সমতল ৰঙৰ বাহিৰলৈ যায়। কেতিয়াবা সেইটো টেক্সচাৰ, আন কেতিয়াবা সূক্ষ্ম টোনাল শ্বিফ্টৰ সৈতে গ্ৰেডিয়েণ্ট হ’ব পাৰে। ৱেবত, মই এই প্ৰভাৱ পুনৰ সৃষ্টি কৰিব পাৰো লিখনীৰ পিছফালে এটা পটভূমি ছবি বা গ্ৰেডিয়েণ্ট ব্যৱহাৰ কৰি, আৰু তাৰ পিছত ইয়াক আখৰৰ আকৃতিত ক্লিপ কৰি। ই দুটা বৈশিষ্ট্য একেলগে কাম কৰাৰ ওপৰত নিৰ্ভৰ কৰে: background-clip: text আৰু text-fill-color: স্বচ্ছ।
প্ৰথমে লিখনীৰ আঁৰত এটা পটভূমি প্ৰয়োগ কৰো। এইটো এটা বিটমেপ বা ভেক্টৰ ছবি বা এটা CSS গ্ৰেডিয়েণ্ট হ'ব পাৰে। কুইক ড্ৰ' মেকগ্ৰা খণ্ড “বাবা বেইট”ৰ এই উদাহৰণৰ বাবে, শিৰোনামৰ লিখনিত আন্ধাৰৰ পৰা পোহৰলৈ এটা সূক্ষ্ম ওপৰৰ–তলৰ গ্ৰেডিয়েণ্ট অন্তৰ্ভুক্ত কৰা হৈছে: পটভূমি: ৰৈখিক-গ্ৰেডিয়েন্ট(0deg, #667b6a, #1d271a);
ইয়াৰ পিছত, মই সেই পটভূমি গ্লিফসমূহত ক্লিপ কৰো আৰু লিখনী স্বচ্ছ কৰি তোলোঁ যাতে পটভূমিৰ দ্বাৰা দেখুৱা হয়: -ৱেবকিট-পটভূমি-ক্লিপ: লিখনী; -webkit-text-fill-color: স্বচ্ছ;
মাত্ৰ সেই দুটা শাৰীৰে পটভূমিটো আৰু লিখাৰ আঁৰত ৰং কৰা নহয়; বৰঞ্চ ইয়াৰ ভিতৰত ৰং কৰা হৈছে৷ এই কৌশলটোৱে বিশেষকৈ ষ্ট্ৰ’ক আৰু ছাঁৰ সৈতে সংযুক্ত কৰিলে ভাল কাম কৰে। এটা ক্লিপ কৰা গ্ৰেডিয়েণ্টে আখৰক ৰং আৰু টেক্সচাৰ প্ৰদান কৰে, এটা ষ্ট্ৰ'কে ইয়াৰ প্ৰান্তবোৰ চোকা কৰি ৰাখে, আৰু এটা ছায়াই ইয়াক পটভূমিৰ পৰা ওপৰলৈ তুলি দিয়ে। তেওঁলোকে একেলগে হাতেৰে ৰং কৰা টাইটেল কাৰ্ডৰ স্তৰযুক্ত ৰূপটো অলপ চি এছ এছৰ বাহিৰে আন একো ব্যৱহাৰ নকৰাকৈ পুনৰ সৃষ্টি কৰে। সদায়ৰ দৰে, ক্লিপ কৰা লিখনী সাৱধানে পৰীক্ষা কৰক, কাৰণ ব্ৰাউজাৰৰ কুইৰ্কসমূহে কেতিয়াবা ছাঁ আৰু ৰেণ্ডাৰত প্ৰভাৱ পেলাব পাৰে। লিখনীক ব্যক্তিগত আখৰত বিভক্ত কৰা কেতিয়াবা গোটেই শব্দ বা শিৰোনাম এটা ষ্টাইল কৰিব নিবিচাৰো৷ মই ব্যক্তিগত আখৰবোৰ ষ্টাইল কৰিব বিচাৰো — এটা চৰিত্ৰক ঠাইত ঠেলিবলৈ, এটা গ্লিফক অতিৰিক্ত ওজন দিবলৈ, বা কেইটামান আখৰ স্বতন্ত্ৰভাৱে এনিমেট কৰিবলৈ। সাধাৰণ HTML আৰু CSS ত, সেইটো কৰাৰ এটাই নিৰ্ভৰযোগ্য উপায় আছে: প্ৰতিটো আখৰ নিজৰ স্পেন উপাদানত ৰেপ কৰক। মই সেইটো হস্তচালিতভাৱে কৰিব পাৰিলোঁ, কিন্তু সেইটো ভংগুৰ হ'ব, ৰক্ষণাবেক্ষণ কৰাটো কঠিন হ'ব, আৰু কপি সলনি হ'লে দ্ৰুতভাৱে ছিন্নভিন্ন হ'ব। ইয়াৰ পৰিবৰ্তে, যেতিয়া মোক প্ৰতি-আখৰ নিয়ন্ত্ৰণৰ প্ৰয়োজন হয়, মই splt.js ৰ দৰে এটা লিখনী-বিভাজন লাইব্ৰেৰী ব্যৱহাৰ কৰো (যদিও অন্য সমাধান উপলব্ধ)। ই এটা টেক্সট ন'ড লয় আৰু স্বয়ংক্ৰিয়ভাৱে শব্দ বা আখৰসমূহ ৰেপ কৰে, মোক মোৰ মাৰ্কআপক গোলমাল নকৰাকৈ এনিমেট আৰু ষ্টাইল কৰিবলৈ অতিৰিক্ত হুক দিয়ে। ই এটা পদ্ধতি যিয়ে মোৰ HTML পঢ়িব পৰা আৰু অৰ্থবোধক কৰি ৰাখে, একে সময়তে মোক আপুনি ক্লাছিক কাৰ্টুন টাইটেল কাৰ্ডত দেখা অসমান, চৰিত্ৰপূৰ্ণ টাইপ’গ্ৰাফী পুনৰ সৃষ্টি কৰিবলৈ প্ৰয়োজনীয় মিহি নিয়ন্ত্ৰণ দিয়ে৷ অৱশ্যে এই পন্থাৰ লগত আহিছেঅভিগম্যতা সতৰ্কবাণীসমূহ, কাৰণ বেছিভাগ পৰ্দা পাঠকে লিখনী ন'ডসমূহ ক্ৰমত পঢ়ে। গতিকে এইটো:
হাম মিঠা হাম
...আপুনি আশা কৰা ধৰণে পঢ়ে: হাম মিঠা হাম
কিন্তু এইটো:
H u m
...ব্ৰাউজাৰ আৰু স্ক্ৰীণ ৰিডাৰৰ ওপৰত নিৰ্ভৰ কৰি বেলেগ ধৰণে ব্যাখ্যা কৰিব পাৰি। কিছুমানে আখৰবোৰ সংযুক্ত কৰি শব্দবোৰ শুদ্ধকৈ পঢ়িব। আন কিছুমানে আখৰৰ মাজত থমকি ৰ’ব পাৰে, যিটো আটাইতকৈ বেয়া পৰিস্থিতিত এনেকুৱা হ’ব পাৰে: “হ...” “উ...” “ম...”
দুখৰ বিষয় যে কিছুমান বিভাজন সমাধানে সদায় সুলভ ফলাফল নিদিয়ে, গতিকে মই মোৰ নিজৰ টেক্সট বিভাজক, splinter.js লিখিছো, যিটো বৰ্তমান বিটাত আছে। ব্যক্তিগত চিঠিৰ ৰূপান্তৰ মোৰ Toon টেক্সট স্প্লিটাৰ সক্ৰিয় কৰিবলৈ, মই বিভাজন কৰিব বিচৰা উপাদানটোত এটা ডাটা- বৈশিষ্ট্য যোগ কৰো:
হাম মিঠা হাম
প্ৰথমে, মোৰ লিপিয়ে প্ৰতিটো শব্দক ব্যক্তিগত আখৰত পৃথক কৰে আৰু ক্লাছ আৰু ARIA বৈশিষ্ট্য প্ৰয়োগ কৰি এটা স্পেন উপাদানত ৰেপ কৰে:
তাৰ পিছত লিপিয়ে বিভক্ত উপাদানৰ প্ৰাৰম্ভিক বিষয়বস্তু লয় আৰু ইয়াক এটা aria বৈশিষ্ট্য হিচাপে যোগ কৰে যাতে অভিগম্যতা বজাই ৰখাত সহায় কৰে:
সেই ক্লাছ এট্ৰিবিউটসমূহ প্ৰয়োগ কৰি, মই তাৰ পিছত মই পছন্দ অনুসৰি ব্যক্তিগত আখৰসমূহ ষ্টাইল কৰিব পাৰো।
উদাহৰণস্বৰূপে, “হাম ছুইট হাম”ৰ বাবে মই ইয়াৰ আখৰবোৰ ভিত্তিৰেখাৰ পৰা কেনেকৈ আঁতৰি যায় তাৰ প্ৰতিলিপি কৰিব বিচাৰো। মোৰ Toon Text Splitter ব্যৱহাৰ কৰাৰ পিছত, মই এটা অৰ্ধ-ৰেণ্ডম ৰূপ সৃষ্টি কৰিবলৈ কেইবাটাও :nth-child নিৰ্বাচক ব্যৱহাৰ কৰি চাৰিটা ভিন্ন অনুবাদ মান প্ৰয়োগ কৰিলোঁ: /* ৪ৰ্থ, ৮ম, ১২তম... */ .toon-char:nth-child(4n) { অনুবাদ কৰক: 0 -8px; } /* ১ম, ৫ম, ৯ম... */ .toon-char:nth-child(4n+1) { অনুবাদ কৰক: 0 -4px; } /* ২য়, ৬ষ্ঠ, দশম... */ .toon-char:nth-child(4n+2) { অনুবাদ কৰক: 0 4px; } /* ৩য়, ৭ম, একাদশ... */ .toon-char:nth-child(4n+3) { অনুবাদ কৰক: 0 8px; }
কিন্তু অনুবাদ কৰাটো মোৰ টুন টেক্সটটো ৰূপান্তৰিত কৰিবলৈ ব্যৱহাৰ কৰিব পৰা এটা বৈশিষ্ট্য মাত্ৰ।
মই সেই ব্যক্তিগত চৰিত্ৰবোৰকো আৰু অধিক বিশৃংখল ৰূপৰ বাবে ঘূৰাই দিব পাৰিলোঁ: /* ৪ৰ্থ, ৮ম, ১২তম... */ .toon-line .toon-char:nth-child(4n) { ঘূৰাওক: -4deg; } /* ১ম, ৫ম, ৯ম... */ .toon-char:nth-child(4n+1) { ঘূৰাওক: -8deg; } /* ২য়, ৬ষ্ঠ, দশম... */ .toon-char:nth-child(4n+2) { ঘূৰাওক: 4deg; } /* ৩য়, ৭ম, একাদশ... */ .toon-char:nth-child(4n+3) { ঘূৰাওক: 8deg; }
কিন্তু অনুবাদ কৰাটো মোৰ টুন টেক্সটটো ৰূপান্তৰিত কৰিবলৈ ব্যৱহাৰ কৰিব পৰা এটা বৈশিষ্ট্য মাত্ৰ। মই সেই ব্যক্তিগত চৰিত্ৰবোৰকো আৰু অধিক বিশৃংখল ৰূপৰ বাবে ঘূৰাই দিব পাৰিলোঁ: /* ৪ৰ্থ, ৮ম, ১২তম... */ .টুন-লাইন .টুন-চাৰ:nth-child(4n) { ঘূৰাওক: -4deg; }
/* ১ম, ৫ম, ৯ম... */ .টুন-চৰ:nth-শিশু(৪n+১) { ঘূৰাওক: -8deg; }
/* ২য়, ৬ষ্ঠ, দশম... */ .টুন-চৰ:nth-শিশু(৪n+2) { ঘূৰোৱা: ৪deg; }
/* ৩য়, ৭ম, একাদশ... */ .টুন-চৰ:nth-শিশু(৪n+৩) { ঘূৰোৱা: 8deg; }
আৰু, অৱশ্যেই, মই সেই চৰিত্ৰবোৰক জিগল কৰিবলৈ এনিমেচন যোগ কৰিব পাৰিলোঁহেঁতেন আৰু মোৰ টুন টেক্সট ষ্টাইলৰ শিৰোনামবোৰক জীৱন্ত কৰি তুলিব পাৰিলোঁহেঁতেন। প্ৰথমে মই এটা কীফ্ৰেম এনিমেচন তৈয়াৰ কৰিলোঁ যিয়ে চৰিত্ৰবোৰ ঘূৰাই দিয়ে:
@কীফ্ৰেম জিগল { 0%, 100% { ৰূপান্তৰ: ঘূৰোৱা (var(--বেছ-ঘূৰোৱা, 0deg)); } 25% { ৰূপান্তৰ: ঘূৰোৱা (calc(var(--বেছ-ঘূৰোৱা, 0deg) + 3deg)); } 50% { ৰূপান্তৰ: ঘূৰোৱা (calc(var(--বেছ-ঘূৰোৱা, 0deg) - 2deg)); } 75% { ৰূপান্তৰ: ঘূৰোৱা (calc(var(--বেছ-ঘূৰোৱা, 0deg) + 1deg)); } }
মোৰ Toon Text Splitter দ্বাৰা সৃষ্টি কৰা span উপাদানসমূহত ইয়াক প্ৰয়োগ কৰাৰ আগতে: .টুন-চৰ { এনিমেচন: jiggle 3s অসীম সহজ-ইন-আউট; ৰূপান্তৰ-উৎপত্তি: কেন্দ্ৰৰ তলত; }
আৰু শেষত, প্ৰতিটো আখৰে জিগল কৰিবলৈ আৰম্ভ কৰাৰ আগতে ঘূৰ্ণনৰ পৰিমাণ আৰু এটা বিলম্ব নিৰ্ধাৰণ কৰক: .toon-char:nth-child(4n) { --ভিত্তি-ঘূৰোৱা: -2deg; } .toon-char:nth-child(4n+1) { --ভিত্তি-ঘূৰোৱা: -4deg; } .toon-char:nth-child(4n+2) { --ভিত্তি-ঘূৰোৱা: 2deg; } .toon-char:nth-child(4n+3) { --ভিত্তি-ঘূৰোৱা: 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 বৈশিষ্ট্যৰ সৈতে — ছাঁ, ষ্ট্ৰ'ক, ক্লিপ কৰা পটভূমি, আৰু কিছুমান সংযত এনিমেচন — আমি সেই একে প্ৰভাৱ পুনৰ সৃষ্টি কৰিব পাৰো। মই টুন টেক্সট ভাল পাওঁ কাৰণ মই নষ্টালজিক নহয়, কিন্তু ইয়াৰ ডিজাইন ইচ্ছাকৃত হোৱাৰ বাবে। ইচ্ছাকৃতভাৱে বাছনি কৰক, আৰু অলপ টুন টেক্সট টাইপোগ্ৰাফীয়ে আপোনাৰ ডিজাইনসমূহত পাঞ্চ যোগ কৰিবলৈ দিয়ক।
