პროექტის დასრულების შემდეგ, რომელიც მოითხოვდა, მესწავლა ყველაფერი, რაც შემეძლო CSS და SVG ანიმაციების შესახებ, დავიწყე ამ სერიის წერა Smashing Animations-ზე და „როგორ კლასიკური მულტფილმები შთააგონებენ თანამედროვე CSS-ს“. ამ წლის დასასრულებლად, მსურს გაჩვენოთ, თუ როგორ გამოიყენოთ თანამედროვე CSS იმ ელემენტის შესაქმნელად, რაც Toon Titles-ს ასე ეფექტურს ხდის: მათი ტიპოგრაფია. სათაური ნამუშევრების დიზაინი 1920-იანი წლების მუნჯი ეპოქაში და 30-იანი წლების დასაწყისში, ფილმის სათაური ბარათის ტიპოგრაფია ქმნიდა განწყობას, ქმნიდა სცენას და ახსენებდა მაყურებელს ფილმის ტიპს, რომლის სანახავადაც ფულს იხდიდნენ.
მულტფილმის სათაურის ბარათები ასევე იყო ბრენდინგის, განწყობისა და სცენის მოწყობა, ყველა ერთში. ადრეულ წლებში, როდესაც სტუდიის ძირითადი ბიუჯეტი უფრო დიდი იყო, ეს სათაურის ბარათები ხშირად საილუსტრაციო და მხატვრული იყო.
მაგრამ როცა 1950-იან წლებში ტელევიზია აყვავდა, ბიუჯეტები შემცირდა და მხატვრების მიერ შექმნილმა ბარათებმა, როგორიცაა ლოურენს „ხელოვნება“ გობლი, მიიღო ახალი ვიზუალური ენა, გახდა უფრო გრაფიკული, სტილიზებული და ნაკლებად რთული. შენიშვნა: ლოურენს „არტ“ გობლი შუა საუკუნის ამერიკული ანიმაციის ერთ-ერთი ხშირად შეუმჩნეველი გმირია. ის ძირითადად მუშაობდა ჰანა-ბარბერაში მისი ყველაზე გავლენიანი წლების განმავლობაში 1950-იან და 1960-იან წლებში. გობლი არ იყო პერსონაჟების ანიმატორი. მისი როლი იყო ატმოსფეროს შექმნა, ამიტომ მან შექმნა გარემო The Flintstones, Huckleberry Hound, Quick Draw McGraw და Yogi Bear-ისთვის, ისევე როგორც გახსნის სათაურის ბარათები, რომლებიც ქმნიან ტონს. მისი სათაურის ბარათები, რომელშიც გამოსახულია ნახატები ლოგოთი გადაფარებული, დაეხმარა ჰანა-ბარბერას საკულტო იერსახის განსაზღვრას. გობლის ნამუშევრები ისეთი პერსონაჟებისთვის, როგორებიცაა Quick Draw McGraw და Yogi Bear, ეფექტური იყო პატარა ტელევიზორის ეკრანებზე. მულტფილმიდან კადრის რეპროდუცირების ნაცვლად, მან ყურადღება გაამახვილა ერთი, ძლიერი იდეის წარმოდგენაზე - ხშირად სილუეტში - რომელიც ასახავდა მის არსს. "Buzzin' Bear"-ში იოგი ზუზუნებს ვერტმფრენით. ის ბრუნდება, პიკ-ა-ნიკის კალათით ხელში, "დათვი პიკნიკზე" და მისი "საპრიზო ბრძოლის შიშისთვის", იოგი აკრიფებს სათაურის ტექსტს.
გობლის ცალკეულ კადრებს მცირე მოძრაობით ან საერთოდ არ უნდა დაეყრდნოთ, უნდა შეექმნათ განწყობა, მოეწყოთ სცენა და აღეწერათ ამბავი. მათ ეს გააკეთეს ბრტყელი ფერების, გრაფიკული ფორმებისა და ტიპოგრაფიის გამოყენებით, რომელიც ხშირად იყო ინტეგრირებული ნამუშევრებში.
როგორც დიზაინერებს, რომლებიც მუშაობენ ვებზე, სათაურებმა შეიძლება ბევრი რამ გვასწავლონ, როგორ გადმოვცეთ ბრენდის პიროვნება, მოვახერხოთ პირველი შთაბეჭდილება და დავადგინოთ მოლოდინი პროდუქტის ან ვებსაიტის გამოყენებით ვინმეს გამოცდილებისთვის. ჩვენ შეგვიძლია ვისწავლოთ არტისტების ტექნიკიდან, რომ შევქმნათ ეფექტური ბანერები, სადესანტო გვერდის სათაურები და თუნდაც კარგი მოდური სპლეშ ეკრანები. Toon Title Typography მულტფილმის სათაურის ბარათები გვიჩვენებს, თუ როგორ არის შერწყმა ტიპის გამოსახულებასთან ერთად, რაც საჭიროებს სათაურს ან გმირს. რამდენიმე ტექსტური ჩრდილის, ტექსტის დარტყმისა და ტრანსფორმაციის ხრიკებით, თანამედროვე CSS საშუალებას გაძლევთ გამოიყენოთ იგივე ენერგია.
Toon ტექსტის სათაურის გენერატორი ამ სტატიის დაწერის შემდეგ მივხვდი, რომ სასარგებლო იქნებოდა ისეთი ხელსაწყოს არსებობა, რომელიც შექმნილია მულტფილმების სათაურების მსგავსად, რომლებიც ძალიან მიყვარს. ამიტომ გავაკეთე ერთი. My Toon Text Title Generator საშუალებას გაძლევთ ექსპერიმენტი გააკეთოთ ფერებით, შტრიხებით და ტექსტის მრავალი ჩრდილით. თქვენ შეგიძლიათ დაარეგულიროთ საღებავის თანმიმდევრობა, გამოიყენოთ ასოების ინტერვალი, გადახედოთ თქვენს ტექსტს ნიმუშების შრიფტებში და შემდეგ დააკოპიროთ გენერირებული CSS პირდაპირ თქვენს ბუფერში, რათა გამოიყენოთ პროექტში. Toon სათაური CSS თქვენ შეგიძლიათ უბრალოდ დააკოპიროთ-ჩასვით CSS, რომელსაც გაწვდით Toon Text Title Generator. მაგრამ მოდით უფრო ახლოს მივხედოთ რას აკეთებს. ტექსტის ჩრდილი შეხედეთ ამ სათაურის ტიპს 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; ტექსტი-ჩრდილი: -5 პიქსელი5px 0 #260e1e, /* ჩრდილი 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* ჩრდილი 3 */ 0 0 30px #e9ce96; /* ჩრდილი 4 */
ეს ჩრდილები გვიჩვენებს, რომ ტექსტის ჩრდილის გამოყენება არ არის მხოლოდ განათების ეფექტების შექმნა, რადგან ისინი ასევე შეიძლება იყოს დეკორატიული და პიროვნების დამატება. ტექსტის დარტყმა მულტფილმის სათაურის ბევრ ბარათს აქვს ასოები თამამი მონახაზით, რაც მათ ფონიდან გამოარჩევს. მე შემიძლია ხელახლა შევქმნა ეს ეფექტი ტექსტის დარტყმის გამოყენებით. დიდი ხნის განმავლობაში, ეს თვისება ხელმისაწვდომი იყო მხოლოდ -webkit- პრეფიქსის საშუალებით, მაგრამ ეს ასევე ნიშნავს, რომ ის ახლა მხარდაჭერილია თანამედროვე ბრაუზერებში.
text-stroke არის სტენოგრამა ორი თვისებისთვის. პირველი, ტექსტის შტრიხ-სიგანე, ხაზავს კონტურს ცალკეული ასოების გარშემო, ხოლო მეორე, ტექსტის შტრიხ-ფერი, აკონტროლებს მის ფერს. „Whatever Goes Pup“-სთვის მე დავამატე 4 პიქსელი ლურჯი შტრიხი ყვითელ ტექსტს: ფერი: #eff0cd; -webkit-text-stroke: 4px #7890b5; text-stroke: 4px #7890b5;
შტრიხები შეიძლება იყოს განსაკუთრებით სასარგებლო, როდესაც ისინი შერწყმულია ჩრდილებთან, ასე რომ, „იზრდება, იზრდება, წავიდა“, მე დავამატე თხელი 3 პიქსელი შტრიხი ძლივს ბუნდოვან 1 პიქსელ ჩრდილში, რათა შევქმნა ეს სამგანზომილებიანი ტექსტის ეფექტი: ფერი: #fbb999; ტექსტი-ჩრდილი: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; text-stroke: 3px #984336;
საღებავის შეკვეთა ტექსტური შტრიხის გამოყენება ყოველთვის არ იძლევა მოსალოდნელ შედეგს, განსაკუთრებით უფრო თხელი ასოებით და სქელი შტრიხებით, რადგან ნაგულისხმევად ბრაუზერი ხაზავს შტრიხს შევსებაზე. სამწუხაროდ, CSS ჯერ კიდევ არ მაძლევს საშუალებას შევცვალო დარტყმის განლაგება, როგორც ამას ხშირად ვაკეთებ Sketch-ში. თუმცა, paint-order თვისებას აქვს მნიშვნელობები, რომლებიც მაძლევს საშუალებას მოვათავსო შტრიხი შევსების უკან და არა წინ.
paint-order: stroke ჯერ ხატავს შტრიხს, შემდეგ შევსებას, ხოლო paint-order: fill აკეთებს საპირისპიროს: ფერი: #fbb999; საღებავი-შეკვეთა: შევსება; ტექსტი-ჩრდილი: 3px 5px 1px #5160b1; text-stroke-color:#984336; text-stroke-width: 3px;
ეფექტური შტრიხი ინარჩუნებს ასოებს წაკითხვას, მატებს წონას და - ჩრდილებთან და საღებავებთან შერწყმისას - იძლევა ბრტყელ ტექსტს რეალურ არსებობას. ფონი ტექსტის შიგნით ბევრი მულტფილმის სათაურის ბარათი სცილდება ბრტყელ ფერს, ასოების ტექსტურის, გრადიენტების ან ილუსტრირებული დეტალების დამატებით. ზოგჯერ ეს არის ტექსტურა, ზოგჯერ ეს შეიძლება იყოს გრადიენტი დახვეწილი ტონალური ცვლილებით. ინტერნეტში შემიძლია ამ ეფექტის ხელახლა შექმნა ტექსტის უკან ფონის სურათის ან გრადიენტის გამოყენებით და შემდეგ მისი ასოების ფორმაზე ამოკვეთით. ეს ეყრდნობა ორ თვისებას, რომლებიც მუშაობენ ერთად: ფონის კლიპი: ტექსტი და ტექსტის შევსება-ფერი: გამჭვირვალე.
პირველ რიგში, მე ვაყენებ ფონს ტექსტის უკან. ეს შეიძლება იყოს bitmap ან ვექტორული სურათი ან CSS გრადიენტი. ამ მაგალითისთვის Quick Draw McGraw-ის ეპიზოდიდან "Baba Bait", სათაურის ტექსტი მოიცავს ზედა-ქვედა დახვეწილ გრადიენტს მუქიდან სინათლისკენ: ფონი: ხაზოვანი-გრადიენტი(0deg, #667b6a, #1d271a);
შემდეგ ამ ფონს ვამაგრებ გლიფებზე და ტექსტს ვხდი გამჭვირვალე ისე, რომ ფონი გამოჩნდეს შემდეგნაირად: -webkit-background-clip: ტექსტი; -webkit-text-fill-color: გამჭვირვალე;
მხოლოდ ამ ორი ხაზით, ფონი აღარ არის დახატული ტექსტის უკან; სამაგიეროდ, მასშია დახატული. ეს ტექნიკა განსაკუთრებით კარგად მუშაობს, როდესაც შერწყმულია შტრიხებთან და ჩრდილებთან. ამოჭრილი გრადიენტი აძლევს ასოებს ფერს და ტექსტურას, შტრიხი ინარჩუნებს მის კიდეებს მკვეთრს, ხოლო ჩრდილი ამაღლებს მას ფონიდან. ისინი ერთად ხელახლა ქმნიან ხელით დახატული სათაურის ბარათების ფენოვან იერს მცირე CSS-ის გამოყენებით. როგორც ყოველთვის, ყურადღებით შეამოწმეთ ამოჭრილი ტექსტი, რადგან ბრაუზერის უხერხულობამ ზოგჯერ შეიძლება გავლენა მოახდინოს ჩრდილებზე და რენდერირებაზე. ტექსტის ცალკეულ პერსონაჟებად დაყოფა ხანდახან არ მინდა მთელი სიტყვის ან სათაურის სტილისტიკა. მსურს ცალკეული ასოების სტილი - შევიტანო პერსონაჟი თავის ადგილზე, ერთ გლიფს მივცე დამატებითი წონა, ან რამდენიმე ასო დამოუკიდებლად გავაცოცხლო. უბრალო HTML-სა და CSS-ში, ამის გაკეთების მხოლოდ ერთი საიმედო გზა არსებობს: თითოეული სიმბოლოს საკუთარ span ელემენტში გადატანა. მე შემეძლო ამის გაკეთება ხელით, მაგრამ ეს იქნებოდა მყიფე, ძნელი შესანარჩუნებელი და სწრაფად იშლება, როდესაც ასლი შეიცვლება. ამის ნაცვლად, როდესაც მჭირდება თითო ასოზე კონტროლი, ვიყენებ ტექსტის გაყოფის ბიბლიოთეკას, როგორიცაა splt.js (თუმცა სხვა გადაწყვეტილებებიც არის ხელმისაწვდომი). ეს იღებს ტექსტურ კვანძს და ავტომატურად ახვევს სიტყვებს ან სიმბოლოებს, მაძლევს დამატებით კაუჭებს ანიმაციისთვის და სტილისთვის, ჩემი მარკირების არეულობის გარეშე. ეს არის მიდგომა, რომელიც ინარჩუნებს ჩემს HTML წაკითხვას და სემანტიკას, ამავდროულად მაძლევს წვრილმარცვლიან კონტროლს, რომელიც მჭირდება ხელახლა შექმნა არათანაბარი, დამახასიათებელი ტიპოგრაფია, რომელსაც ხედავთ კლასიკური მულტფილმის სათაურის ბარათებში. თუმცა, ეს მიდგომა თან ახლავსხელმისაწვდომობის სიფრთხილეა, რადგან ეკრანის მკითხველთა უმეტესობა ტექსტის კვანძებს თანმიმდევრობით კითხულობს. ასე რომ, ეს:
Hum Sweet Hum
…იკითხება როგორც თქვენ მოელით: Hum Sweet Hum
მაგრამ ეს:
H u მ
…შეიძლება განსხვავებულად იქნას განმარტებული ბრაუზერისა და ეკრანის წამკითხველის მიხედვით. ზოგი ასოებს აერთიანებს და სიტყვებს სწორად წაიკითხავს. სხვები შეიძლება შეჩერდნენ ასოებს შორის, რაც უარეს შემთხვევაში შეიძლება ასე ჟღერდეს: "ჰ..." "უ..." "მ..."
სამწუხაროდ, ზოგიერთი გაყოფის გადაწყვეტილება არ იძლევა ყოველთვის ხელმისაწვდომ შედეგს, ამიტომ მე დავწერე ჩემი საკუთარი ტექსტის გამყოფი, splinter.js, რომელიც ამჟამად ბეტა რეჟიმშია. ინდივიდუალური ასოების ტრანსფორმირება Toon Text Splitter-ის გასააქტიურებლად, მე ვამატებ მონაცემთა ატრიბუტს ელემენტს, რომლის გაყოფაც მინდა:
Hum Sweet Hum
პირველი, ჩემი სკრიპტი გამოყოფს თითოეულ სიტყვას ცალკეულ ასოებად და ახვევს მათ span ელემენტში კლასის და ARIA ატრიბუტების გამოყენებით:
შემდეგ სკრიპტი იღებს გაყოფილი ელემენტის საწყის შინაარსს და ამატებს მას არიას ატრიბუტად, რათა დაეხმაროს ხელმისაწვდომობის შენარჩუნებას:
ამ კლასის ატრიბუტების გამოყენებით, მე შემიძლია ინდივიდუალური სიმბოლოების სტილი, როგორც მე ვირჩევ.
მაგალითად, „Hum Sweet Hum“-ისთვის, მინდა გავიმეორო, თუ როგორ შორდება მისი ასოები საბაზისო ხაზს. ჩემი 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; }
მაგრამ translate არის მხოლოდ ერთი თვისება, რომელიც შემიძლია გამოვიყენო ჩემი ტონი ტექსტის გარდაქმნისთვის.
მე ასევე შემეძლო ამ ცალკეული პერსონაჟების როტაცია კიდევ უფრო ქაოტური შესახედაობისთვის: /* მე-4, მე-8, მე-12... */ .toon-line .toon-char:nth-child(4n) { rotate: -4deg; } /* 1-ლი, მე-5, მე-9... */ .toon-char:nth-child(4n+1) { rotate: -8deg; } /* მე-2, მე-6, მე-10... */ .toon-char:nth-child(4n+2) { rotate: 4deg; } /* მე-3, მე-7, მე-11... */ .toon-char:nth-child(4n+3) { rotate: 8deg; }
მაგრამ translate არის მხოლოდ ერთი თვისება, რომელიც შემიძლია გამოვიყენო ჩემი ტონი ტექსტის გარდაქმნისთვის. მე ასევე შემეძლო ამ ცალკეული პერსონაჟების როტაცია კიდევ უფრო ქაოტური შესახედაობისთვის: /* მე-4, მე-8, მე-12... */ .toon-line .toon-char:nth-child(4n) { როტაცია: -4 გრადუსი; }
/* 1-ლი, მე-5, მე-9... */ .toon-char:nth-child(4n+1) { როტაცია: -8 გრადუსი; }
/* მე-2, მე-6, მე-10... */ .toon-char:nth-child(4n+2) { როტაცია: 4 გრადუსი; }
/* მე-3, მე-7, მე-11... */ .toon-char:nth-child(4n+3) { როტაცია: 8 გრადუსი; }
და, რა თქმა უნდა, მე შემიძლია დავამატო ანიმაციები ამ პერსონაჟების დასამახსოვრებლად და ჩემი ტონალური ტექსტის სტილის სათაურების გასაცოცხლებლად. პირველ რიგში, მე შევქმენი საკვანძო კადრის ანიმაცია, რომელიც აბრუნებს პერსონაჟებს:
@keyframes jiggle { 0%, 100% {transform: rotate(var(--base-rotate, 0deg)); } 25% {transform: rotate(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { transform: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75% {transform: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
სანამ მას გამოიყენებდი ჩემი Toon Text Splitter-ის მიერ შექმნილ span ელემენტებზე: .toon-char { ანიმაცია: 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 თვისებით - ჩრდილები, შტრიხები, ამოჭრილი ფონი და გარკვეული თავშეკავებული ანიმაცია - ჩვენ შეგვიძლია ხელახლა შევქმნათ იგივე გავლენა. მე მიყვარს ტონის ტექსტი არა იმიტომ, რომ ნოსტალგიური ვარ, არამედ იმიტომ, რომ მისი დიზაინი მიზანმიმართულია. გააკეთეთ მიზანმიმართული არჩევანი და ნება მიეცით მცირე ტექსტურ ტიპოგრაფიას თქვენს დიზაინს წვდომა შემატოს.
