ایک پروجیکٹ کو مکمل کرنے کے بعد جس میں مجھے CSS اور SVG اینیمیشنز کے بارے میں ہر ممکن سیکھنے کی ضرورت تھی، میں نے یہ سیریز Smashing Animations اور "How Classic Cartoons Inspire Modern CSS" کے بارے میں لکھنا شروع کی۔ اس سال کو ختم کرنے کے لیے، میں آپ کو یہ بتانا چاہتا ہوں کہ جدید سی ایس ایس کو کس طرح استعمال کرتے ہوئے اس عنصر کو تخلیق کیا جائے جو ٹون ٹائٹلز کو اتنا مؤثر بناتا ہے: ان کی نوع ٹائپ۔ آرٹ ورک ڈیزائن کا عنوان 1920 کی دہائی کے خاموش دور اور 30 کی دہائی کے اوائل میں، فلم کے ٹائٹل کارڈ کی ٹائپوگرافی نے ایک موڈ بنایا، منظر ترتیب دیا، اور سامعین کو اس قسم کی فلم کی یاد دلائی جسے وہ دیکھنے کے لیے ادا کرتے تھے۔
کارٹون ٹائٹل کارڈز بھی برانڈنگ، موڈ، اور سین سیٹنگ تھے، سبھی ایک میں لپٹے ہوئے تھے۔ ابتدائی سالوں میں، جب اسٹوڈیو کے بڑے بجٹ بڑے ہوتے تھے، یہ ٹائٹل کارڈ اکثر مثالی اور مصوری کے ہوتے تھے۔
لیکن جب 1950 کی دہائی کے دوران ٹیلی ویژن کا عروج ہوا، بجٹ میں کمی آئی، اور لارنس "آرٹ" گوبل جیسے فنکاروں کے ڈیزائن کردہ کارڈز نے ایک نئی بصری زبان کو اپنایا، جو زیادہ گرافک، اسٹائلائزڈ اور کم پیچیدہ بن گیا۔ نوٹ: لارنس "آرٹ" گوبل وسط صدی کے امریکی اینیمیشن کے اکثر نظر انداز کیے جانے والے ہیروز میں سے ایک ہے۔ اس نے بنیادی طور پر 1950 اور 1960 کی دہائی کے سب سے زیادہ بااثر سالوں کے دوران Hanna-Barbera کے لیے کام کیا۔ گوبل ایک کریکٹر اینیمیٹر نہیں تھا۔ اس کا کردار ماحول پیدا کرنا تھا، اس لیے اس نے The Flintstones، Huckleberry Hound، Quick Draw McGraw، اور Yogi Bear کے ساتھ ساتھ افتتاحی ٹائٹل کارڈز کے لیے ماحول تیار کیا جو ٹون سیٹ کرتے تھے۔ اس کے ٹائٹل کارڈز، جس میں پینٹنگز کو لوگو پر چڑھایا گیا ہے، نے حنا-باربیرا کی شاندار شکل کی وضاحت میں مدد کی۔ Quick Draw McGraw اور Yogi Bear جیسے کرداروں کے لیے Goble کا آرٹ ورک چھوٹی ٹی وی اسکرینوں پر موثر تھا۔ کارٹون سے اسٹیل کو دوبارہ پیش کرنے کے بجائے، اس نے ایک واحد، مضبوط خیال پیش کرنے پر توجہ مرکوز کی — اکثر سلہیٹ میں — جس نے اس کے جوہر کو اپنی گرفت میں لے لیا۔ "دی بزن بیئر" میں، یوگی ایک ہیلی کاپٹر میں گونج رہا ہے۔ وہ اچھالتا ہے، ہاتھ میں pic-a-nic کی ٹوکری، "Bear on a Picnic" میں، اور اپنی "پرائز فائٹ فرائٹ" کے لیے، یوگی نے ٹائٹل ٹیکسٹ باکس کیا۔
بھروسہ کرنے کے لیے بہت کم یا کوئی حرکت نہ ہونے کے ساتھ، گوبل کے سنگل فریموں کو ایک موڈ بنانا، منظر ترتیب دینا اور کہانی بیان کرنا پڑی۔ انہوں نے فلیٹ رنگوں، گرافک شکلوں، اور نوع ٹائپ کا استعمال کرتے ہوئے ایسا کیا جو اکثر آرٹ ورک میں ضم کیا جاتا تھا۔
ویب پر کام کرنے والے ڈیزائنرز کے طور پر، ٹون ٹائٹلز ہمیں اس بارے میں بہت کچھ سکھا سکتے ہیں کہ کس طرح کسی برانڈ کی شخصیت کو بیان کیا جائے، پہلا تاثر کیسے بنایا جائے، اور کسی پروڈکٹ یا ویب سائٹ کا استعمال کرتے ہوئے کسی کے تجربے کے لیے توقعات قائم کی جائیں۔ ہم فنکاروں کی تکنیکوں سے سیکھ سکتے ہیں تاکہ موثر بینرز، لینڈنگ پیج ہیڈرز، اور یہاں تک کہ عمدہ طرز کی سپلیش اسکرینیں بنائیں۔ ٹون ٹائٹل ٹائپوگرافی۔ کارٹون ٹائٹل کارڈ دکھاتے ہیں کہ کس طرح امیجری کے ساتھ ضم ہونے والی قسم ہیڈر یا ہیرو کی ضرورت کو پنچ فراہم کرتی ہے۔ مٹھی بھر ٹیکسٹ شیڈو، ٹیکسٹ اسٹروک، اور ٹرانسفارم ٹرکس کے ساتھ، جدید CSS آپ کو اسی توانائی کو استعمال کرنے دیتا ہے۔
ٹون ٹیکسٹ ٹائٹل جنریٹر اس مضمون کو لکھنے کے ساتھ ساتھ، میں نے محسوس کیا کہ کارٹون کے عنوانات کی طرح متن تیار کرنے کے لیے ایک ٹول کا ہونا مفید ہو گا جو مجھے بہت پسند ہے۔ تو میں نے ایک بنایا۔ میرا ٹون ٹیکسٹ ٹائٹل جنریٹر آپ کو رنگوں، اسٹروک اور متعدد ٹیکسٹ شیڈو کے ساتھ تجربہ کرنے دیتا ہے۔ آپ پینٹ آرڈر کو ایڈجسٹ کر سکتے ہیں، لیٹر سپیسنگ لگا سکتے ہیں، نمونے کے فونٹس کے انتخاب میں اپنے متن کا پیش نظارہ کر سکتے ہیں، اور پھر کسی پروجیکٹ میں استعمال کرنے کے لیے تیار کردہ CSS کو سیدھے اپنے کلپ بورڈ پر کاپی کر سکتے ہیں۔ ٹون ٹائٹل سی ایس ایس آپ آسانی سے سی ایس ایس کو کاپی پیسٹ کرسکتے ہیں جو ٹون ٹیکسٹ ٹائٹل جنریٹر آپ کو فراہم کرتا ہے۔ لیکن آئیے قریب سے دیکھیں کہ یہ کیا کرتا ہے۔ ٹیکسٹ شیڈو Augie Doggie کے ایپی سوڈ "Yuk-Yuk Duck" کے اس عنوان کی قسم کو دیکھیں، اس کے ہلکے پیلے حروف اور گہرے، سخت، آفسیٹ سائے کے ساتھ جو اسے پس منظر سے ہٹاتا ہے اور گہرائی کا بھرم پیدا کرتا ہے۔
آپ شاید پہلے ہی جان چکے ہوں گے کہ ٹیکسٹ شیڈو چار اقدار کو قبول کرتا ہے: (1) افقی اور (2) عمودی آفسیٹس، (3) بلر، اور (4) ایک ایسا رنگ جو ٹھوس یا نیم شفاف ہو سکتا ہے۔ وہ آفسیٹ قدریں مثبت یا منفی ہو سکتی ہیں، اس لیے میں نیچے اور دائیں طرف کھینچے گئے سخت سائے کا استعمال کرتے ہوئے "Yuk-Yuk Duck" کو نقل کر سکتا ہوں: رنگ: #f7f76d؛ ٹیکسٹ شیڈو: 5px 5px 0 #1e1904؛
دوسری طرف، یہ "Pint Giant" ٹائٹل اپنے منفی نیم نرم سائے کے ساتھ ایک مختلف احساس رکھتا ہے: رنگ: #c2a872؛ ٹیکسٹ شیڈو: -7px 5px 0 #b100e، 0 -5px 10px #546c6f;
اضافی گہرائی شامل کرنے اور مزید دلچسپ اثرات پیدا کرنے کے لیے، میں ایک سے زیادہ سائے لگا سکتا ہوں۔ "Let's Duck Out" کے لیے، میں چار شیڈو کو جوڑتا ہوں: پہلا ایک ٹھوس شیڈو جس میں ایک منفی افقی آفسیٹ ہے تاکہ متن کو پس منظر سے ہٹایا جا سکے، اس کے بعد اس کے ارد گرد ایک دھندلا پن پیدا کرنے کے لیے آہستہ آہستہ نرم سائے: رنگ: #6F4D80؛ ٹیکسٹ شیڈو: -5px5px 0 #260e1e, /* Shadow 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* شیڈو 4 */
یہ سائے ظاہر کرتے ہیں کہ ٹیکسٹ شیڈو کا استعمال صرف روشنی کے اثرات پیدا کرنے کے بارے میں نہیں ہے، کیونکہ یہ آرائشی بھی ہو سکتے ہیں اور شخصیت میں اضافہ کر سکتے ہیں۔ ٹیکسٹ اسٹروک بہت سے کارٹون ٹائٹل کارڈز میں بولڈ خاکہ والے حروف نمایاں ہوتے ہیں جو انہیں پس منظر سے الگ کرتے ہیں۔ میں ٹیکسٹ اسٹروک کا استعمال کرکے اس اثر کو دوبارہ بنا سکتا ہوں۔ ایک طویل عرصے سے، یہ پراپرٹی صرف ویب کٹ کے سابقہ کے ذریعے دستیاب تھی، لیکن اس کا مطلب یہ بھی ہے کہ اب یہ جدید براؤزرز میں تعاون یافتہ ہے۔
ٹیکسٹ اسٹروک دو خصوصیات کے لیے شارٹ ہینڈ ہے۔ پہلا، ٹیکسٹ اسٹروک-چوڑائی، انفرادی حروف کے گرد ایک سموچ کھینچتا ہے، جبکہ دوسرا، ٹیکسٹ اسٹروک-رنگ، اس کے رنگ کو کنٹرول کرتا ہے۔ "Whatever Goes Pup" کے لیے، میں نے پیلے رنگ کے متن میں 4px نیلے اسٹروک کا اضافہ کیا: رنگ: #eff0cd؛ -webkit-text-stroke: 4px #7890b5؛ ٹیکسٹ اسٹروک: 4px #7890b5;
اسٹروک خاص طور پر مفید ہو سکتے ہیں جب انہیں سائے کے ساتھ جوڑ دیا جائے، اس لیے "بڑھتے ہوئے، بڑھتے ہوئے، چلے گئے" کے لیے، میں نے یہ سہ جہتی ٹیکسٹ اثر بنانے کے لیے بمشکل دھندلے 1px شیڈو میں ایک پتلا 3px اسٹروک شامل کیا: رنگ: #fbb999؛ ٹیکسٹ شیڈو: 3px 5px 1px #5160b1؛ -webkit-text-stroke: 3px #984336؛ ٹیکسٹ اسٹروک: 3px #984336؛
پینٹ آرڈر ٹیکسٹ اسٹروک کا استعمال ہمیشہ متوقع نتیجہ نہیں دیتا، خاص طور پر پتلے حروف اور موٹے اسٹروک کے ساتھ، کیونکہ پہلے سے طے شدہ طور پر براؤزر فل پر ایک اسٹروک کھینچتا ہے۔ افسوس کی بات ہے کہ سی ایس ایس اب بھی مجھے اسٹروک پلیسمنٹ کو ایڈجسٹ کرنے کی اجازت نہیں دیتا جیسا کہ میں اکثر اسکیچ میں کرتا ہوں۔ تاہم، پینٹ آرڈر کی خاصیت میں ایسی قدریں ہیں جو مجھے اسٹروک کو فل کے سامنے رکھنے کی بجائے پیچھے رکھنے کی اجازت دیتی ہیں۔
پینٹ آرڈر: اسٹروک پہلے اسٹروک کو پینٹ کرتا ہے، پھر فل، جبکہ پینٹ آرڈر: فل اس کے برعکس کرتا ہے: رنگ: #fbb999؛ پینٹ آرڈر: بھرنا؛ ٹیکسٹ شیڈو: 3px 5px 1px #5160b1؛ ٹیکسٹ اسٹروک رنگ:#984336؛ ٹیکسٹ اسٹروک چوڑائی: 3px؛
ایک مؤثر اسٹروک حروف کو پڑھنے کے قابل رکھتا ہے، وزن بڑھاتا ہے، اور - جب سائے اور پینٹ آرڈر کے ساتھ مل جاتا ہے - فلیٹ متن کو حقیقی موجودگی فراہم کرتا ہے۔ متن کے اندر پس منظر بہت سے کارٹون ٹائٹل کارڈ خطوط میں ساخت، میلان، یا تصویری تفصیل شامل کرکے فلیٹ رنگ سے آگے نکل جاتے ہیں۔ کبھی کبھی یہ ایک ساخت ہے، دوسری بار یہ ٹھیک ٹھیک ٹونل شفٹ کے ساتھ ایک میلان ہو سکتا ہے. ویب پر، میں متن کے پیچھے پس منظر کی تصویر یا گریڈینٹ کا استعمال کرکے، اور پھر اسے حروف کی شکل میں تراش کر اس اثر کو دوبارہ بنا سکتا ہوں۔ یہ ایک ساتھ کام کرنے والی دو خصوصیات پر انحصار کرتا ہے: بیک گراؤنڈ کلپ: ٹیکسٹ اور ٹیکسٹ فل کلر: شفاف۔
سب سے پہلے، میں متن کے پیچھے ایک پس منظر لگاتا ہوں۔ یہ بٹ میپ یا ویکٹر امیج یا CSS گریڈینٹ ہو سکتا ہے۔ Quick Draw McGraw ایپیسوڈ "بابا بیت" سے اس مثال کے لیے، ٹائٹل ٹیکسٹ میں اندھیرے سے روشنی تک ایک باریک ٹاپ-باٹم گریڈینٹ شامل ہے: پس منظر: لکیری-گریڈینٹ(0deg, #667b6a, #1d271a)؛
اگلا، میں اس پس منظر کو گلیفس پر کلپ کرتا ہوں اور متن کو شفاف بناتا ہوں تاکہ پس منظر اس کے ذریعے ظاہر ہو: -webkit-background-clip: text؛ -webkit-text-fill-color: شفاف؛
صرف ان دو لائنوں کے ساتھ، پس منظر کو متن کے پیچھے پینٹ نہیں کیا جاتا ہے۔ اس کے بجائے، یہ اس کے اندر پینٹ ہے. یہ تکنیک خاص طور پر اس وقت اچھی طرح کام کرتی ہے جب اسٹروک اور شیڈو کے ساتھ ملایا جائے۔ ایک تراشا ہوا میلان حروف کو رنگ اور ساخت فراہم کرتا ہے، ایک اسٹروک اس کے کناروں کو تیز رکھتا ہے، اور ایک سایہ اسے پس منظر سے بلند کرتا ہے۔ ایک ساتھ مل کر، وہ ہاتھ سے پینٹ ٹائٹل کارڈز کی تہہ دار شکل کو دوبارہ تخلیق کرتے ہیں، جس میں تھوڑی سی سی ایس ایس کے علاوہ کچھ نہیں ہے۔ ہمیشہ کی طرح، تراشے ہوئے متن کو احتیاط سے جانچیں، کیونکہ براؤزر کے نرالا بعض اوقات سائے اور رینڈرنگ کو متاثر کر سکتے ہیں۔ متن کو انفرادی حروف میں تقسیم کرنا کبھی کبھی میں پورے لفظ یا سرخی کو سٹائل نہیں کرنا چاہتا۔ میں انفرادی حروف کو سٹائل کرنا چاہتا ہوں — کسی کردار کو جگہ پر دھکیلنے کے لیے، ایک گلیف کو اضافی وزن دینا، یا چند حروف کو آزادانہ طور پر متحرک کرنا چاہتا ہوں۔ سادہ ایچ ٹی ایم ایل اور سی ایس ایس میں، ایسا کرنے کا صرف ایک ہی قابل اعتماد طریقہ ہے: ہر کردار کو اس کے اپنے اسپین عنصر میں لپیٹیں۔ میں یہ دستی طور پر کر سکتا ہوں، لیکن یہ نازک، برقرار رکھنا مشکل ہو گا، اور جب کاپی تبدیل ہو جائے گا تو جلدی سے الگ ہو جائے گا۔ اس کے بجائے، جب مجھے فی لیٹر کنٹرول کی ضرورت ہوتی ہے، میں splt.js جیسی ٹیکسٹ اسپلٹنگ لائبریری استعمال کرتا ہوں (حالانکہ دیگر حل دستیاب ہیں)۔ یہ ایک ٹیکسٹ نوڈ لیتا ہے اور خود بخود الفاظ یا حروف کو لپیٹ دیتا ہے، جس سے مجھے میرے مارک اپ میں گڑبڑ کیے بغیر اینیمیٹ اور اسٹائل کے لیے اضافی ہکس مل جاتے ہیں۔ یہ ایک ایسا نقطہ نظر ہے جو میرے HTML کو پڑھنے کے قابل اور معنوی رکھتا ہے، جبکہ مجھے عمدہ کنٹرول دیتے ہوئے مجھے ناہموار، خصوصیت والی نوع ٹائپ کو دوبارہ بنانے کی ضرورت ہے جو آپ کلاسک کارٹون ٹائٹل کارڈز میں دیکھتے ہیں۔ تاہم، اس نقطہ نظر کے ساتھ آتا ہےقابل رسائی انتباہات، جیسا کہ زیادہ تر اسکرین ریڈرز ٹیکسٹ نوڈس کو ترتیب سے پڑھتے ہیں۔ تو یہ:
ہم پیارے ہم
…پڑھتا ہے جیسا کہ آپ کی توقع ہے: ہم میٹھے ہم
لیکن یہ:
H u m
…براؤزر اور اسکرین ریڈر کے لحاظ سے مختلف طریقے سے تشریح کی جا سکتی ہے۔ کچھ حروف کو جوڑیں گے اور الفاظ کو صحیح طریقے سے پڑھیں گے۔ دوسرے حروف کے درمیان توقف کر سکتے ہیں، جو کہ بدترین صورت حال میں ایسا لگ سکتا ہے: "H…" "U…" "M…"
افسوس کی بات ہے، کچھ تقسیم کرنے والے حل ہمیشہ قابل رسائی نتیجہ فراہم نہیں کرتے ہیں، اس لیے میں نے اپنا ٹیکسٹ اسپلٹر، splinter.js لکھا ہے، جو فی الحال بیٹا میں ہے۔ انفرادی خطوط کو تبدیل کرنا اپنے ٹون ٹیکسٹ اسپلٹر کو چالو کرنے کے لیے، میں اس عنصر میں ایک ڈیٹا- وصف شامل کرتا ہوں جسے میں تقسیم کرنا چاہتا ہوں:
ہم پیارے ہم
سب سے پہلے، میرا اسکرپٹ ہر لفظ کو انفرادی حروف میں الگ کرتا ہے اور کلاس اور ARIA کے اوصاف کے ساتھ اسپین عنصر میں لپیٹ دیتا ہے:
اس کے بعد اسکرپٹ اسپلٹ عنصر کا ابتدائی مواد لیتا ہے اور اسے ایک aria وصف کے طور پر شامل کرتا ہے تاکہ رسائی کو برقرار رکھنے میں مدد ملے:
ان طبقاتی صفات کو لاگو کرنے کے ساتھ، میں پھر انفرادی حروف کو اپنی پسند کے مطابق اسٹائل کر سکتا ہوں۔
مثال کے طور پر، "ہم پیارے ہم" کے لیے، میں نقل کرنا چاہتا ہوں کہ اس کے حروف کس طرح بیس لائن سے ہٹتے ہیں۔ اپنا Toon Text Splitter استعمال کرنے کے بعد، میں نے نیم بے ترتیب شکل بنانے کے لیے متعدد :nth-child سلیکٹرز کا استعمال کرتے ہوئے ترجمہ کی چار مختلف اقدار کا اطلاق کیا: /* 4th, 8th, 12th... */ .toon-char:nth-child(4n) { ترجمہ: 0 -8px; } /* 1st, 5th, 9th... */ .toon-char:nth-child(4n+1) { ترجمہ: 0 -4px; } /* 2nd, 6th, 10th... */ .toon-char:nth-child(4n+2) { ترجمہ: 0 4px; } /* 3rd, 7th, 11th... */ .toon-char:nth-child(4n+3) { ترجمہ: 0 8px; }
لیکن ترجمہ صرف ایک خاصیت ہے جسے میں اپنے ٹون ٹیکسٹ کو تبدیل کرنے کے لیے استعمال کر سکتا ہوں۔
میں ان انفرادی حروف کو اور بھی زیادہ افراتفری کے لیے گھما سکتا ہوں: /* 4th, 8th, 12th... */ .toon-line .toon-char:nth-child(4n) { گھمائیں: -4deg; } /* 1st, 5th, 9th... */ .toon-char:nth-child(4n+1) { گھمائیں: -8deg; } /* 2nd, 6th, 10th... */ .toon-char:nth-child(4n+2) { گھمائیں: 4deg; } /* 3rd, 7th, 11th... */ .toon-char:nth-child(4n+3) { گھمائیں: 8deg; }
لیکن ترجمہ صرف ایک خاصیت ہے جسے میں اپنے ٹون ٹیکسٹ کو تبدیل کرنے کے لیے استعمال کر سکتا ہوں۔ میں ان انفرادی حروف کو اور بھی زیادہ افراتفری کے لیے گھما سکتا ہوں: /* 4th, 8th, 12th... */ .toon-line .toon-char:nth-child(4n) { گھمائیں: -4 ڈگری؛ }
/* 1st, 5th, 9th... */ .toon-char:nth-child(4n+1) { گھمائیں: -8 ڈگری؛ }
/* 2nd, 6th, 10th... */ .toon-char:nth-child(4n+2) { گھمائیں: 4 ڈگری؛ }
/* 3rd, 7th, 11th... */ .toon-char:nth-child(4n+3) { گھمائیں: 8 ڈگری؛ }
اور، یقینا، میں ان کرداروں کو جگمگانے کے لیے متحرک تصاویر شامل کر سکتا ہوں اور اپنے ٹون ٹیکسٹ اسٹائل کے عنوانات کو زندہ کر سکتا ہوں۔ سب سے پہلے، میں نے ایک کلیدی فریم اینیمیشن بنایا جو حروف کو گھماتا ہے:
@keyframes جگل { 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 { حرکت پذیری: jiggle 3s infinite ease-in-out; 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) { 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 خصوصیات کے ساتھ — سائے، اسٹروک، کلپ شدہ پس منظر، اور کچھ روکے ہوئے اینیمیشن — ہم وہی اثر دوبارہ بنا سکتے ہیں۔ مجھے ٹون ٹیکسٹ اس لیے پسند نہیں کہ میں پرانی یادوں میں ہوں، بلکہ اس لیے کہ اس کا ڈیزائن جان بوجھ کر بنایا گیا ہے۔ جان بوجھ کر انتخاب کریں، اور تھوڑی سی ٹون ٹیکسٹ ٹائپوگرافی کو اپنے ڈیزائن میں پنچ ڈالنے دیں۔
