CSS এবং SVG অ্যানিমেশন সম্বন্ধে আমার যা কিছু শিখতে হবে এমন একটি প্রজেক্ট শেষ করার পর, আমি স্ম্যাশিং অ্যানিমেশন এবং "হাউ ক্লাসিক কার্টুন আধুনিক সিএসএসকে অনুপ্রাণিত করে।" এই বছরটি শেষ করার জন্য, আমি আপনাকে দেখাতে চাই কিভাবে আধুনিক CSS ব্যবহার করে সেই উপাদানটি তৈরি করতে যা Toon টাইটেলগুলিকে এতটা প্রভাবশালী করে তোলে: তাদের টাইপোগ্রাফি। শিরোনাম আর্টওয়ার্ক ডিজাইন 1920-এর দশকের নীরব যুগে এবং 30-এর দশকের শুরুর দিকে, একটি চলচ্চিত্রের শিরোনাম কার্ডের টাইপোগ্রাফি একটি মেজাজ তৈরি করে, দৃশ্যটি সেট করে এবং দর্শকদের মনে করিয়ে দেয় যে তারা কোন ধরনের চলচ্চিত্র দেখতে পেত।
কার্টুন শিরোনাম কার্ডগুলিও ব্র্যান্ডিং, মেজাজ এবং দৃশ্য-সেটিং ছিল, সবগুলিকে একটিতে পরিণত করা হয়েছিল৷ প্রারম্ভিক বছরগুলিতে, যখন প্রধান স্টুডিও বাজেট বড় ছিল, এই শিরোনাম কার্ডগুলি প্রায়ই চিত্রিত এবং চিত্রকর ছিল।
কিন্তু 1950-এর দশকে যখন টেলিভিশনের প্রসার ঘটে, বাজেট কমে যায় এবং লরেন্স "আর্ট" গোবলের মতো শিল্পীদের দ্বারা ডিজাইন করা কার্ডগুলি একটি নতুন ভিজ্যুয়াল ভাষা গ্রহণ করে, আরও গ্রাফিক, স্টাইলাইজড এবং কম জটিল হয়ে ওঠে। দ্রষ্টব্য: লরেন্স "আর্ট" গোবল মধ্য শতাব্দীর আমেরিকান অ্যানিমেশনের প্রায়ই উপেক্ষিত নায়কদের একজন। 1950 এবং 1960 এর দশকের সবচেয়ে প্রভাবশালী বছরগুলিতে তিনি প্রাথমিকভাবে হানা-বারবেরার জন্য কাজ করেছিলেন। গোবল চরিত্রের অ্যানিমেটর ছিলেন না। তার ভূমিকা ছিল পরিবেশ তৈরি করা, তাই তিনি ফ্লিনস্টোনস, হাকলবেরি হাউন্ড, কুইক ড্র ম্যাকগ্রা এবং যোগী বিয়ারের জন্য পরিবেশ তৈরি করেছিলেন, সেইসাথে টোন সেট করে এমন উদ্বোধনী শিরোনাম কার্ডগুলি। তার শিরোনাম কার্ড, একটি লোগো ওভারলেড সহ পেইন্টিং সমন্বিত, হানা-বারবেরার আইকনিক চেহারা সংজ্ঞায়িত করতে সাহায্য করেছিল। Quick Draw McGraw এবং Yogi Bear-এর মতো চরিত্রগুলির জন্য Goble-এর শিল্পকর্ম ছোট টিভি পর্দায় কার্যকর ছিল। কার্টুন থেকে একটি স্টিল পুনরুত্পাদন করার পরিবর্তে, তিনি একটি একক, দৃঢ় ধারণা উপস্থাপনের দিকে মনোনিবেশ করেছিলেন - প্রায়শই সিলুয়েটে - যা এর সারমর্মকে ধারণ করে। "The Buzzin' Bear"-এ যোগী হেলিকপ্টারে গুঞ্জন করছেন। তিনি "বিয়ার অন পিকনিক"-এ পিক-অ্যা-নিক ঝুড়ি হাতে নিয়ে বাউন্স করেন এবং তাঁর "পুরস্কার লড়াইয়ের ভয়"-এর জন্য যোগী শিরোনাম পাঠ্যটি বক্স করেন৷
নির্ভর করার জন্য সামান্য বা কোন গতির সাথে, গোবলের একক ফ্রেমে একটি মেজাজ তৈরি করতে হয়েছিল, দৃশ্য সেট করতে হয়েছিল এবং একটি গল্প বর্ণনা করতে হয়েছিল। তারা ফ্ল্যাট রঙ, গ্রাফিক আকার এবং টাইপোগ্রাফি ব্যবহার করে এটি করেছিল যা প্রায়শই শিল্পকর্মে একত্রিত হয়েছিল।
ওয়েবে কাজ করা ডিজাইনার হিসাবে, টুন শিরোনামগুলি আমাদেরকে কীভাবে একটি ব্র্যান্ডের ব্যক্তিত্ব প্রকাশ করতে হয়, একটি প্রথম ছাপ তৈরি করতে হয় এবং একটি পণ্য বা ওয়েবসাইট ব্যবহার করে কারো অভিজ্ঞতার জন্য প্রত্যাশা সেট করতে পারে সে সম্পর্কে প্রচুর শিক্ষা দিতে পারে। কার্যকর ব্যানার, ল্যান্ডিং-পৃষ্ঠার শিরোনাম এবং এমনকি ভাল ফ্যাশনের স্প্ল্যাশ স্ক্রিন তৈরি করার জন্য শিল্পীদের কৌশল থেকে আমরা শিখতে পারি। টুন শিরোনাম টাইপোগ্রাফি কার্টুন শিরোনাম কার্ডগুলি দেখায় কিভাবে চিত্রের সাথে একত্রিত করা একটি শিরোনাম বা নায়কের প্রয়োজনীয় পাঞ্চ সরবরাহ করে৷ মুষ্টিমেয় টেক্সট-শ্যাডো, টেক্সট-স্ট্রোক এবং ট্রান্সফর্ম ট্রিকস সহ, আধুনিক CSS আপনাকে সেই একই শক্তিতে ট্যাপ করতে দেয়।
টুন টেক্সট শিরোনাম জেনারেটর এই নিবন্ধটি লেখার মধ্য দিয়ে, আমি বুঝতে পেরেছি যে কার্টুন শিরোনামের মতো টেক্সট তৈরি করার জন্য একটি সরঞ্জাম থাকা দরকারী হবে যা আমি খুব পছন্দ করি। তাই আমি একটি তৈরি. মাই টুন টেক্সট টাইটেল জেনারেটর আপনাকে রং, স্ট্রোক এবং একাধিক টেক্সট শ্যাডো নিয়ে পরীক্ষা করতে দেয়। আপনি পেইন্ট অর্ডার সামঞ্জস্য করতে পারেন, অক্ষর ব্যবধান প্রয়োগ করতে পারেন, নমুনা ফন্টের একটি নির্বাচনে আপনার পাঠ্যের পূর্বরূপ দেখতে পারেন এবং তারপরে একটি প্রকল্পে ব্যবহার করার জন্য তৈরি করা CSS সরাসরি আপনার ক্লিপবোর্ডে অনুলিপি করতে পারেন। Toon শিরোনাম CSS টুন টেক্সট টাইটেল জেনারেটর আপনাকে যে CSS প্রদান করে তা আপনি সহজভাবে কপি-পেস্ট করতে পারেন। তবে আসুন এটি কী করে তা আরও ঘনিষ্ঠভাবে দেখুন। পাঠ্য ছায়া Augie Doggie-এর পর্ব "Yuk-Yuk Duck" থেকে এই শিরোনামের ধরণটি দেখুন, এর ফ্যাকাশে হলুদ অক্ষর এবং গাঢ়, শক্ত, অফসেট ছায়া যা এটিকে পটভূমি থেকে সরিয়ে দেয় এবং গভীরতার বিভ্রম তৈরি করে।
আপনি সম্ভবত ইতিমধ্যেই জানেন যে পাঠ্য-ছায়া চারটি মান গ্রহণ করে: (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; paint-order: পূরণ; পাঠ্য-ছায়া: 3px 5px 1px #5160b1; টেক্সট-স্ট্রোক-রঙ:#984336; পাঠ্য-স্ট্রোক-প্রস্থ: 3px;
একটি কার্যকর স্ট্রোক অক্ষর পাঠযোগ্য রাখে, ওজন যোগ করে এবং — যখন ছায়া এবং পেইন্ট অর্ডারের সাথে মিলিত হয় — ফ্ল্যাট টেক্সটকে বাস্তব উপস্থিতি দেয়। টেক্সটের ভিতরে পটভূমি অনেক কার্টুন শিরোনাম কার্ড অক্ষরে টেক্সচার, গ্রেডিয়েন্ট বা চিত্রিত বিশদ যোগ করে সমতল রঙের বাইরে চলে যায়। কখনও কখনও এটি একটি টেক্সচার, অন্য সময় এটি একটি সূক্ষ্ম টোনাল শিফট সহ একটি গ্রেডিয়েন্ট হতে পারে। ওয়েবে, আমি পাঠ্যের পিছনে একটি ব্যাকগ্রাউন্ড ইমেজ বা গ্রেডিয়েন্ট ব্যবহার করে এবং তারপর এটিকে অক্ষরের আকারে ক্লিপ করে এই প্রভাবটি পুনরায় তৈরি করতে পারি। এটি একসাথে কাজ করা দুটি বৈশিষ্ট্যের উপর নির্ভর করে: ব্যাকগ্রাউন্ড-ক্লিপ: টেক্সট এবং টেক্সট-ফিল-রং: স্বচ্ছ।
প্রথমত, আমি পাঠ্যের পিছনে একটি পটভূমি প্রয়োগ করি। এটি একটি বিটম্যাপ বা ভেক্টর ইমেজ বা একটি CSS গ্রেডিয়েন্ট হতে পারে। কুইক ড্র ম্যাকগ্রা এপিসোড "বাবা বাইট" থেকে এই উদাহরণের জন্য, শিরোনাম পাঠ্যে অন্ধকার থেকে আলোতে একটি সূক্ষ্ম শীর্ষ-নিচের গ্রেডিয়েন্ট অন্তর্ভুক্ত রয়েছে: পটভূমি: লিনিয়ার-গ্রেডিয়েন্ট(0deg, #667b6a, #1d271a);
এর পরে, আমি সেই পটভূমিটিকে গ্লিফগুলিতে ক্লিপ করি এবং পাঠ্যটিকে স্বচ্ছ করে তুলি যাতে পটভূমিটি দেখায়: -ওয়েবকিট-ব্যাকগ্রাউন্ড-ক্লিপ: পাঠ্য; -ওয়েবকিট-টেক্সট-ফিল-রং: স্বচ্ছ;
শুধু এই দুটি লাইন দিয়ে, পটভূমি আর পাঠ্যের পিছনে আঁকা হয় না; পরিবর্তে, এটি এর মধ্যে আঁকা হয়েছে। স্ট্রোক এবং ছায়ার সাথে মিলিত হলে এই কৌশলটি বিশেষভাবে ভাল কাজ করে। একটি ক্লিপ করা গ্রেডিয়েন্ট রঙ এবং টেক্সচার সহ অক্ষর প্রদান করে, একটি স্ট্রোক এর প্রান্তগুলি তীক্ষ্ণ রাখে এবং একটি ছায়া এটিকে পটভূমি থেকে উঁচু করে। একসাথে, তারা সামান্য CSS ছাড়া আর কিছুই ব্যবহার করে হাতে আঁকা শিরোনাম কার্ডের স্তরযুক্ত চেহারা পুনরায় তৈরি করে। বরাবরের মতো, ক্লিপ করা পাঠ্যকে সাবধানে পরীক্ষা করুন, কারণ ব্রাউজার কুইর্ক কখনও কখনও ছায়া এবং রেন্ডারিংকে প্রভাবিত করতে পারে। স্বতন্ত্র অক্ষরে পাঠ্য বিভক্ত করা কখনও কখনও আমি একটি সম্পূর্ণ শব্দ বা শিরোনাম স্টাইল করতে চাই না। আমি স্বতন্ত্র অক্ষর স্টাইল করতে চাই — একটি অক্ষরকে জায়গায় নাজ করতে, একটি গ্লিফকে অতিরিক্ত ওজন দিতে, বা কয়েকটি অক্ষর স্বাধীনভাবে অ্যানিমেট করতে চাই। প্লেইন এইচটিএমএল এবং সিএসএসে, এটি করার একমাত্র নির্ভরযোগ্য উপায় রয়েছে: প্রতিটি অক্ষরকে তার নিজস্ব স্প্যান উপাদানে মোড়ানো। আমি এটি ম্যানুয়ালি করতে পারতাম, কিন্তু এটি ভঙ্গুর হবে, বজায় রাখা কঠিন হবে এবং কপি পরিবর্তন হলে দ্রুত ভেঙে পড়বে। পরিবর্তে, যখন আমার প্রতি-অক্ষর নিয়ন্ত্রণের প্রয়োজন হয়, আমি splt.js-এর মতো একটি পাঠ্য-বিভক্ত লাইব্রেরি ব্যবহার করি (যদিও অন্যান্য সমাধান উপলব্ধ)। এটি একটি টেক্সট নোড নেয় এবং স্বয়ংক্রিয়ভাবে শব্দ বা অক্ষরগুলিকে মোড়ানো হয়, আমার মার্কআপকে এলোমেলো না করে আমাকে অ্যানিমেট এবং স্টাইল করার জন্য অতিরিক্ত হুক দেয়। এটি এমন একটি পদ্ধতি যা আমার এইচটিএমএলকে পঠনযোগ্য এবং শব্দার্থিক রাখে, যখন আমাকে সূক্ষ্ম-দানাযুক্ত নিয়ন্ত্রণ দেওয়ার সময় আমি ক্লাসিক কার্টুন শিরোনাম কার্ডগুলিতে আপনি যে অসম, চরিত্রপূর্ণ টাইপোগ্রাফি দেখতে পান তা পুনরায় তৈরি করতে হবে৷ যাইহোক, এই পদ্ধতির সঙ্গে আসেঅ্যাক্সেসিবিলিটি সতর্কতা, যেহেতু বেশিরভাগ স্ক্রিন রিডার ক্রমানুসারে পাঠ্য নোডগুলি পড়ে। তাই এই:
হাম সুইট হাম
…আপনি যেমন আশা করেন তেমনটি পড়ে: হাম সুইট হাম
কিন্তু এই:
H u মি
… ব্রাউজার এবং স্ক্রিন রিডারের উপর নির্ভর করে ভিন্নভাবে ব্যাখ্যা করা যেতে পারে। কেউ কেউ অক্ষর সংযুক্ত করবে এবং সঠিকভাবে শব্দ পড়বে। অন্যরা অক্ষরগুলির মধ্যে বিরতি দিতে পারে, যা সবচেয়ে খারাপ পরিস্থিতিতে এরকম শোনাতে পারে: "এইচ..." "ইউ..." "এম..."
দুঃখজনকভাবে, কিছু বিভাজন সমাধান সর্বদা অ্যাক্সেসযোগ্য ফলাফল প্রদান করে না, তাই আমি আমার নিজের টেক্সট স্প্লিটার, splinter.js লিখেছি, যা বর্তমানে বিটাতে রয়েছে। স্বতন্ত্র অক্ষর রূপান্তর আমার টুন টেক্সট স্প্লিটার সক্রিয় করতে, আমি যে উপাদানটিকে বিভক্ত করতে চাই তাতে একটি ডেটা- বৈশিষ্ট্য যোগ করি:
হাম সুইট হাম
প্রথমত, আমার স্ক্রিপ্ট প্রতিটি শব্দকে পৃথক অক্ষরে আলাদা করে এবং ক্লাস এবং ARIA গুণাবলী প্রয়োগ করে একটি স্প্যান উপাদানে মোড়ানো:
তারপর স্ক্রিপ্টটি বিভক্ত উপাদানের প্রাথমিক বিষয়বস্তু নেয় এবং অ্যাক্সেসযোগ্যতা বজায় রাখতে সহায়তা করার জন্য এটি একটি aria বৈশিষ্ট্য হিসাবে যোগ করে:
সেই শ্রেণীর গুণাবলী প্রয়োগ করে, আমি আমার পছন্দ অনুযায়ী স্বতন্ত্র অক্ষর স্টাইল করতে পারি।
উদাহরণস্বরূপ, "হাম সুইট হাম" এর জন্য আমি প্রতিলিপি করতে চাই কিভাবে এর অক্ষরগুলি বেসলাইন থেকে দূরে সরে যায়। আমার টুন টেক্সট স্প্লিটার ব্যবহার করার পরে, আমি একটি আধা-এলোমেলো চেহারা তৈরি করতে বেশ কয়েকটি :nth-শিশু নির্বাচক ব্যবহার করে চারটি ভিন্ন অনুবাদ মান প্রয়োগ করেছি: /* ৪র্থ, ৮ম, দ্বাদশ... */ .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; }
কিন্তু অনুবাদ শুধুমাত্র একটি সম্পত্তি যা আমি আমার টুন টেক্সট রূপান্তর করতে ব্যবহার করতে পারি। আমি আরও বিশৃঙ্খল চেহারার জন্য সেই স্বতন্ত্র অক্ষরগুলিকেও ঘোরাতে পারি: /* ৪র্থ, ৮ম, দ্বাদশ... */ .toon-line .toon-char:nth-child(4n) { ঘোরান: -4 ডিগ্রী; }
/* ১ম, ৫ম, নবম... */ .toon-char:nth-child(4n+1) { ঘোরান: -8 ডিগ্রী; }
/* ২য়, ৬ষ্ঠ, ১০ম... */ .toon-char:nth-child(4n+2) { ঘোরান: 4 ডিগ্রী; }
/* ৩য়, ৭ম, ১১ম... */ .toon-char:nth-child(4n+3) { ঘোরান: 8 ডিগ্রী; }
এবং, অবশ্যই, আমি সেই অক্ষরগুলিকে জিগ্ল করার জন্য অ্যানিমেশন যোগ করতে পারি এবং আমার টুন টেক্সট স্টাইলের শিরোনামগুলিকে প্রাণবন্ত করতে পারি। প্রথমে, আমি একটি কীফ্রেম অ্যানিমেশন তৈরি করেছি যা অক্ষরগুলিকে ঘোরায়:
@কীফ্রেমগুলি জিগলে { 0%, 100% { রূপান্তর: rotate(var(--base-rotate, 0deg)); } 25% { রূপান্তর: ঘোরান(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { রূপান্তর: ঘোরান(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { রূপান্তর: ঘোরান(calc(var(--base-rotate, 0deg) + 1deg)); } }
আমার টুন টেক্সট স্প্লিটার দ্বারা তৈরি স্প্যান উপাদানগুলিতে এটি প্রয়োগ করার আগে: .toon-char { অ্যানিমেশন: জিগল 3s অসীম সহজ-ইন-আউট; transform-origin: কেন্দ্রের নীচে; }
এবং পরিশেষে, প্রতিটি অক্ষর ঝিঁঝিঁ পোকা শুরু করার আগে ঘূর্ণন পরিমাণ এবং বিলম্ব সেট করুন: .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 বৈশিষ্ট্যের সাহায্যে — ছায়া, স্ট্রোক, ক্লিপ করা ব্যাকগ্রাউন্ড এবং কিছু সংযত অ্যানিমেশন — আমরা সেই একই প্রভাব আবার তৈরি করতে পারি। আমি টুন টেক্সট পছন্দ করি কারণ আমি নস্টালজিক, কিন্তু কারণ এর ডিজাইন ইচ্ছাকৃত। ইচ্ছাকৃত পছন্দ করুন, এবং একটু টেক্সট টাইপোগ্রাফি আপনার ডিজাইনে পাঞ্চ যোগ করতে দিন।
