د یوې پروژې پای ته رسولو وروسته چې ما اړتیا درلوده چې د CSS او SVG متحرکاتو په اړه هرڅه زده کړم، ما دا لړۍ د Smashing Animations او "څنګه کلاسیک کارتونونه عصري CSS هڅوي" په اړه لیکل پیل کړل. د دې کال پای ته رسیدو لپاره، زه غواړم تاسو ته وښایه چې څنګه د عصري CSS کارولو لپاره دا عنصر رامینځته کړئ چې د Toon سرلیکونه خورا اغیزمن کوي: د دوی ټایپوګرافي. سرلیک د هنر کار ډیزاین د 1920 او د 30 لسیزې په پیل کې په خاموشه دوره کې، د فلم د سرلیک کارت ټایپوګرافي یو مزاج رامینځته کړی، صحنه یې ترتیب کړه، او لیدونکو ته یې د هغه فلم ډول یادونه وکړه چې دوی یې د لیدلو لپاره پیسې ورکړي.
د کارټون سرلیک کارتونه هم برانډینګ، مزاج، او د صحنې ترتیب وو، ټول په یوه کې راټیټ شوي. په لومړیو کلونو کې، کله چې د سټوډیو لوی بودیجه لویه وه، دا سرلیک کارتونه ډیری وختونه انځورګري او انځورګري وې.
مګر کله چې د 1950 لسیزې په اوږدو کې تلویزیون وده وکړه، بودیجه کمه شوه، او د لارنس "آرټ" ګوبل په څیر د هنرمندانو لخوا ډیزاین شوي کارتونه یوه نوې بصري ژبه غوره کړه، ډیر ګرافیک، سټایل شوی، او لږ پیچلي شو. یادونه: لارنس "آرټ" ګوبل د مینځنۍ پیړۍ امریکایی انیمیشن یو له پامه غورځول شوی اتلانو څخه دی. هغه په لومړني ډول د 1950 او 1960 مو کلونو کې د خورا اغیزمنو کلونو په جریان کې د هانا-باربیرا لپاره کار کاوه. ګوبل د کرکټر متحرک نه و. د هغه رول د فضا رامینځته کول و ، نو هغه د فلینسټونز ، هکلبیري هونډ ، Quick Draw McGraw او Yogi Bear لپاره چاپیریالونه ډیزاین کړل ، په بیله بیا د پرانیستې سرلیک کارتونه چې سر یې تنظیم کړ. د هغه سرلیک کارتونه چې د لوګو پوښل شوي نقاشي ښیې ، د هانا - باربیرا مشهور لید تعریف کولو کې مرسته وکړه. د کرکټرونو لپاره د ګوبل هنري کار لکه Quick Draw McGraw او Yogi Bear په کوچنیو تلویزیوني سکرینونو کې اغیزمن و. د دې پر ځای چې له کارتون څخه یو سټیل تولید کړي، هغه د یو واحد، قوي مفکورې وړاندې کولو تمرکز وکړ - ډیری وختونه په سیلویټ کې - چې د هغې جوهر یې نیولی. په "بوزین بیر" کې، یوګي په چورلکه کې غږ کوي. هغه په لاس کې د pic-a-nic ټوکرۍ په "Bear on a Picnic" کې، او د هغه د "جایزې جګړې ډار" لپاره، یوګي د سرلیک متن بکس کوي.
د تکیه کولو لپاره لږ یا هیڅ حرکت سره، د ګوبل واحد چوکاټونه باید یو مزاج رامینځته کړي، صحنه ترتیب کړي، او کیسه بیان کړي. دوی دا د فلیټ رنګونو، ګرافیک شکلونو، او ټایپوګرافۍ په کارولو سره ترسره کړل چې په مکرر ډول په هنري کار کې مدغم شوي.
د ډیزاینرانو په توګه چې په ویب کې کار کوي، د ټون سرلیکونه کولی شي موږ ته د برانډ شخصیت وړاندې کولو څرنګوالي په اړه ډیر څه زده کړي، لومړی تاثیر وکړي، او د محصول یا ویب پاڼې په کارولو سره د چا د تجربې لپاره توقعات وټاکي. موږ کولی شو د هنرمندانو تخنیکونو څخه زده کړو ترڅو اغیزمن بینرونه، د لینډینګ پاڼې سرلیکونه، او حتی د غوره فیشن سپلاش سکرینونه جوړ کړو. د ټون سرلیک ټایپوګرافي د کارټون سرلیک کارتونه ښیې چې څنګه د عکس سره یوځای کول د سر یا هیرو اړتیا ته د پنچ وړاندې کوي. د یو څو متن سیوري، متن سټروک، او د بدلون چلونو سره، عصري 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 */
دا سیوري ښیي چې د متن سیوري کارول یوازې د ر lightingا اغیزو رامینځته کولو په اړه ندي ، ځکه چې دوی کولی شي آرائشی هم وي او شخصیت اضافه کړي. د متن سټروک ډیری د کارټون سرلیک کارتونه لیکونه د یو زړور خاکه سره وړاندې کوي چې دوی د شالید څخه جلا کوي. زه کولی شم دا تاثیر د متن سټروک په کارولو سره بیا جوړ کړم. د اوږدې مودې لپاره، دا ملکیت یوازې د ویب کیټ مخفف له لارې شتون درلود، مګر دا پدې مانا ده چې دا اوس په عصري براوزرونو کې ملاتړ کیږي.
د متن سټروک د دوه ملکیتونو لپاره لنډیز دی. لومړی، د متن سټروک-چړوالی، د انفرادي لیکونو شاوخوا یو شکل رسموي، پداسې حال کې چې دویم، د متن سټروک رنګ، خپل رنګ کنټرولوي. د "هغه څه چې پوپ ته ځي" لپاره ما په ژیړ متن کې د 4px نیلي سټروک اضافه کړ: رنګ: #eff0cd؛ -webkit-text-stroke: 4px #7890b5; متن سټروک: 4px #7890b5;
سټروکونه په ځانګړې توګه ګټور کیدی شي کله چې دوی د سیوري سره یوځای شي، نو د "ودیدو، وده، ورک شوي" لپاره ما د دې درې اړخیز متن اغیزې رامینځته کولو لپاره په سخته تیاره 1px سیوري کې یو پتلی 3px سټروک اضافه کړ: رنګ: #fbb999; د متن سیوري: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; متن سټروک: 3px #984336;
د رنګ ترتیب د متن سټروک کارول تل تمه شوې پایله نه رامینځته کوي ، په ځانګړي توګه د پتلو لیکونو او ژورو سټروکونو سره ، ځکه چې په ډیفالټ ډول براوزر د ډکولو لپاره سټروک راوباسي. په خواشینۍ سره، CSS لاهم ما ته اجازه نه راکوي چې د سټروک ځای پرځای کولو تنظیم کړم لکه څنګه چې زه ډیری وختونه په سکیچ کې کوم. په هرصورت، د پینټ آرډر ملکیت ارزښتونه لري چې ما ته اجازه راکوي چې د ډکولو پرځای، شاته سټروک ځای په ځای کړم.
د رنګ ترتیب: سټروک لومړی سټروک رنګوي، بیا ډک، پداسې حال کې چې د رنګ ترتیب: ډک برعکس کوي: رنګ: #fbb999; د رنګ ترتیب: ډکول د متن سیوري: 3px 5px 1px #5160b1; متن-سټروک-رنګ:#984336; د متن-سټروک-چړوالی: 3px؛
یو اغیزمن سټروک لیکونه د لوستلو وړ ساتي، وزن زیاتوي، او - کله چې د سیوري او رنګ ترتیب سره یوځای شي - فلیټ متن ریښتینی شتون ورکوي. د متن دننه پس منظر د کارټون ډیری سرلیک کارتونه په لیک کې د جوړښت ، تدریجي یا توضیحي توضیحاتو اضافه کولو سره د فلیټ رنګ څخه بهر ځي. ځینې وختونه دا جوړښت دی، نور وختونه ممکن د فرعي ټونل بدلون سره تدریجي وي. په ویب کې، زه کولی شم دا اغیز د متن شاته د شالید عکس یا تدریجي په کارولو سره بیا جوړ کړم، او بیا یې د لیکونو شکل ته کلیک کړم. دا په دوه ملکیتونو تکیه کوي چې یوځای کار کوي: شالید-کلیپ: متن او د متن ډک رنګ: شفاف.
لومړی، زه د متن تر شا پس منظر پلي کوم. دا د بټ میپ یا ویکتور عکس یا د CSS تدریجي کیدی شي. د دې مثال لپاره د Quick Draw McGraw Episode "بابا بیت" څخه، د سرلیک متن کې له تیاره څخه تر رڼا پورې یو فرعي پورتنۍ پوړ شامل دی: پس منظر: خطي-ګراډینټ(0deg, #667b6a, #1d271a);
بیا، زه دا شالید ګلیفونو ته کټوم او متن شفاف کړم ترڅو پس منظر له لارې ښکاره شي: -webkit-background-clip: text; -webkit-text-fill-color: شفاف؛
یوازې د دغو دوو کرښو سره، پس منظر نور د متن شاته رنګ نه دی؛ پرځای یې، دا دننه رنګ شوی. دا تخنیک په ځانګړې توګه ښه کار کوي کله چې د سټروک او سیوري سره یوځای شي. یو ټوټه شوی تدریجي لیک د رنګ او جوړښت سره چمتو کوي، یو سټروک خپل څنډې تیز ساتي، او سیوري یې له شالید څخه پورته کوي. په ګډه ، دوی د لاسي رنګ شوي سرلیک کارتونو پرت شوي لید له یو کوچني CSS پرته نور هیڅ نه کاروي. د تل په څیر، کلیک شوی متن په دقت سره ازموئ، ځکه چې د براوزر نرخونه ځینې وختونه په سیوري او رینډینګ اغیزه کولی شي. د متن په انفرادي کرکټرونو ویشل ځینې وختونه زه نه غواړم ټوله کلمه یا سرلیک سټایل کړم. زه غواړم انفرادي لیکونه سټایل کړم - د یو کرکټر ځای پرځای کولو لپاره ، یو ګلیف اضافي وزن ورکړئ ، یا یو څو لیکونه په خپلواک ډول متحرک کړئ. په ساده HTML او CSS کې، د دې کولو لپاره یوازې یو باوري لاره شتون لري: هر کرکټر په خپل وخت عنصر کې وتړئ. زه دا په لاسي ډول کولی شم، مګر دا به نازک وي، ساتل به سخت وي، او د کاپي بدلون په وخت کې به ژر تر ژره جلا شي. پرځای یې، کله چې زه د هر لیک کنټرول ته اړتیا لرم، زه د متن ویشلو کتابتون کاروم لکه splt.js (که څه هم نور حلونه شتون لري). دا د متن نوډ اخلي او په اوتومات ډول ټکي یا حروف پوښي ، ما ته زما د مارک اپ ګډوډولو پرته د متحرک او سټایل لپاره اضافي هکونه راکوي. دا یوه داسې طریقه ده چې زما HTML د لوستلو وړ او سیمانټیک ساتي، پداسې حال کې چې ما ته ښه دانه کنټرول راکړئ زه اړتیا لرم چې غیر مساوي، کرکټر ټایپوګرافي بیا جوړ کړم چې تاسو د کلاسیک کارټون سرلیک کارتونو کې ګورئ. په هرصورت، دا طریقه راځيد لاسرسي خبرداری، لکه څنګه چې ډیری سکرین لوستونکي په ترتیب سره متن نوډونه لوستل. نو دا:
Hum Sweet Hum
... لکه څنګه چې تاسو تمه لرئ ولولئ: خواږه همېشه
مګر دا:
H u m
... د براوزر او سکرین ریډر پورې اړه لري په مختلف ډول تشریح کیدی شي. ځینې به حروف سره یوځای کړي او کلمې به په سمه توګه ولولي. نور ممکن د لیکونو تر مینځ وقفه وکړي، کوم چې په بدترین حالت کې کیدای شي داسې ښکاري: “H…” “U…” “M…”
په خواشینۍ سره، ځینې ویشونکي حلونه تل د لاسرسي وړ پایلې نه وړاندې کوي، نو ما خپل خپل متن سپلیټر، splinter.js لیکلی، کوم چې دا مهال په بیټا کې دی. د انفرادي لیکونو بدلول زما د Toon Text Splitter د فعالولو لپاره، زه هغه عنصر ته د ډیټا خاصیت اضافه کوم چې زه یې ویشم:
هم خوږه هم
لومړی، زما سکریپټ هره کلمه په انفرادي حروفونو کې جلا کوي او د ټولګي او ARIA ځانګړتیاو سره په یو وخت عنصر کې پوښي:
سکریپټ بیا د سپیټ عنصر لومړني مینځپانګه اخلي او د لاسرسي ساتلو کې د مرستې لپاره د آریا خاصیت په توګه اضافه کوي:
د دې ټولګي صفاتو پلي کولو سره ، زه بیا کولی شم انفرادي کرکټرونه سټایل کړم لکه څنګه چې زه غوره کوم.
د مثال په توګه، د "هم خواږه هم" لپاره، زه غواړم نقل کړم چې څنګه یې لیکونه د بیس لاین څخه لیږدول کیږي. زما د ټون متن سپلیټر کارولو وروسته، ما د نیم تصادفي لید جوړولو لپاره د څو :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; } /* دریمه، اووم، 11 مه... */ .toon-char:nth-child(4n+3) { ژباړه: 0 8px; }
مګر ژباړه یوازې یو ملکیت دی چې زه یې د خپل ټون متن بدلولو لپاره کارولی شم.
زه کولی شم دا انفرادي کرکټرونه د حتی ډیر ګډوډ لید لپاره هم وګرځوم: /* څلورمه، اتمه، ۱۲مه...*/ .ټون-کرښه .ټون-چار:نیم-ماشوم } /* لومړۍ، پنځمه، نهمه...*/ toon-char:nth-child(4n+1) { ګرځول: -8deg; } /* دوهمه، شپږمه، لسمه... */ toon-char:nth-child(4n+2) { څرخول: 4deg; } /* دریمه، اووم، 11 مه... */ toon-char:nth-child(4n+3) { ګرځول: 8deg; }
مګر ژباړه یوازې یو ملکیت دی چې زه یې د خپل ټون متن بدلولو لپاره کارولی شم. زه کولی شم دا انفرادي کرکټرونه د حتی ډیر ګډوډ لید لپاره هم وګرځوم: /* څلورمه، اتمه، ۱۲مه...*/ .toon-line .toon-char:nth-child(4n) { ګرځول: -4 درجې؛ }
/* لومړۍ، پنځمه، نهمه...*/ .ټون-چار: نهم-ماشوم(4n+1) { ګرځول: -8 درجې؛ }
/* دوهمه، شپږمه، لسمه... */ .ټون-چار: نهم-ماشوم(4n+2) { ګرځول: 4 درجې؛ }
/* دریمه، اووم، 11 مه... */ .ټون-چار: نهم-ماشوم(4n+3) { ګرځول: 8 درجې؛ }
او البته، زه کولی شم د دې کرکټرونو د ځړولو لپاره متحرکات اضافه کړم او زما د ټون متن سټایل سرلیکونه ژوند ته راوړم. لومړی، ما یو کلی فریم حرکت جوړ کړ چې کرکټرونه څرخوي:
@keyframes جګګل { 0%, 100% { بدلون: rotate(var(-base-rotate, 0deg)); } 25٪ { بدلون: rotate(calc(var(-base-rotate, 0deg) + 3deg)); } 50٪ { بدلون: rotate(calc(var(-base-rotate, 0deg) - 2deg)); } 75٪ { بدلون: rotate(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) { حرکت-ځنډ: 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 ملکیتونو سره - سیوري، سټروکونه، کلپ شوي شالیدونه، او ځینې منع شوي حرکتونه - موږ کولی شو ورته اغیز بیا جوړ کړو. زه د ټوون متن سره مینه لرم ځکه چې زه ناڅاپه یم، مګر ځکه چې ډیزاین یې قصدي دی. عمدي انتخابونه وکړئ، او اجازه راکړئ چې یو څه د متن ټایپوګرافي ستاسو ډیزاینونو کې پنچ اضافه کړي.
