Məndən CSS və SVG animasiyaları haqqında bacardığım hər şeyi öyrənməyi tələb edən layihəni bitirdikdən sonra Smashing Animasiyalar və “Klassik Cizgi Filmləri Müasir CSS-ni necə ruhlandırır” haqqında bu seriyanı yazmağa başladım. Bu ili yekunlaşdırmaq üçün mən sizə Toon Titles-ı çox təsirli edən elementi yaratmaq üçün müasir CSS-dən necə istifadə edəcəyinizi göstərmək istəyirəm: onların tipoqrafiyası. Başlıq İncəsənət Əsərinin Dizaynı 1920-ci illərin və 30-cu illərin əvvəllərinin səssiz dövründə filmin başlıq kartının tipoqrafiyası əhval-ruhiyyə yaratdı, səhnə qurdu və tamaşaçılara baxmaq üçün pul ödədikləri film növünü xatırlatdı.
Cizgi filminin başlıq kartları da marka, əhval-ruhiyyə və səhnə quruluşu idi, hamısı bir yerə yığılmışdı. İlk illərdə, əsas studiya büdcələri daha böyük olanda, bu başlıq kartları çox vaxt illüstrativ və rəssamlıq xarakteri daşıyırdı.
Lakin 1950-ci illərdə televiziya yüksələndə büdcələr azaldı və Lawrence “Art” Goble kimi rəssamlar tərəfindən hazırlanmış kartlar daha qrafika, stilizə edilmiş və daha az mürəkkəb olan yeni vizual dil qəbul etdi. Qeyd: Lawrence "Art" Goble əsrin ortalarında Amerika animasiyasının tez-tez gözdən qaçan qəhrəmanlarından biridir. O, ilk növbədə Hanna-Barbera üçün 1950-ci və 1960-cı illərin ən təsirli illərində çalışmışdır. Goble personaj animatoru deyildi. Onun rolu atmosfer yaratmaq idi, buna görə də o, The Flintstones, Huckleberry Hound, Quick Draw McGraw və Yogi Bear üçün mühitlər, həmçinin tonu təyin edən açılış başlıq kartları hazırladı. Onun loqosu olan rəsmləri əks etdirən başlıq kartları Hanna-Barberanın simvolik görünüşünü müəyyənləşdirməyə kömək etdi. Goble'nin Quick Draw McGraw və Yogi Bear kimi personajlar üçün çəkdiyi rəsmlər kiçik televiziya ekranlarında təsirli idi. O, cizgi filmindən bir kadrı təkrarlamaq əvəzinə, onun mahiyyətini əks etdirən tək, güclü ideyanı - çox vaxt siluetdə - təqdim etməyə diqqət yetirdi. "Buzzin' Bear" filmində Yogi helikopterdə vızıldayır. O, əlində piknik səbəti ilə "Piknikdə ayı" filmində sıçrayır və "Mükafat Döyüşü Qorxusuna" görə Yogi başlıq mətnini qutulara çəkir.
Güvənmək üçün az və ya heç bir hərəkət olmadan, Goble'nin tək kadrları əhval-ruhiyyə yaratmalı, səhnə qurmalı və hekayəni təsvir etməli idi. Onlar bunu düz rənglər, qrafik formalar və tez-tez sənət əsərinə birləşdirilən tipoqrafiyadan istifadə edərək etdilər.
İnternetdə işləyən dizaynerlər olaraq, toon başlıqları bizə brendin şəxsiyyətini necə çatdırmaq, ilk təəssürat yaratmaq və məhsul və ya vebsaytdan istifadə edərək kiminsə təcrübəsi üçün gözləntilər təyin etmək barədə çox şey öyrədə bilər. Effektiv bannerlər, açılış səhifəsinin başlıqları və hətta yaxşı hazırlanmış ekranlar yaratmaq üçün rəssamların texnikalarından öyrənə bilərik. Toon Başlıq Tipoqrafiyası Cizgi filminin başlıq kartları təsvir növü ilə birləşmənin başlığa və ya qəhrəmana lazım olan zərbəni necə çatdırdığını göstərir. Bir ovuc mətn kölgəsi, mətn vuruşu və çevirmə fəndləri ilə müasir CSS eyni enerjidən istifadə etməyə imkan verir.
Toon Mətn Başlıq Generatoru Bu məqaləni yazarkən başa düşdüm ki, çox sevdiyim cizgi filmlərinin başlıqlarına bənzər üslubda mətn yaratmaq üçün bir vasitəyə sahib olmaq faydalı olacaq. Beləliklə, birini düzəltdim. My Toon Text Title Generator sizə rənglər, ştrixlər və çoxsaylı mətn kölgələri ilə sınaq keçirməyə imkan verir. Siz boya sırasını tənzimləyə, hərflər arası məsafəni tətbiq edə, mətninizi nümunə şriftlər seçimində nəzərdən keçirə və sonra layihədə istifadə etmək üçün yaradılan CSS-ni birbaşa panona köçürə bilərsiniz. Toon Başlığı CSS Siz sadəcə olaraq Toon Text Title Generator-un sizə təqdim etdiyi CSS-ni kopyalayıb yapışdıra bilərsiniz. Ancaq bunun nə etdiyini daha yaxından nəzərdən keçirək. Mətn kölgəsi Augie Doggie-nin "Yuk-Yuk Duck" epizodunun solğun sarı hərfləri və onu fondan çıxaran və dərinlik illüziyası yaradan tünd, sərt, ofset kölgəsi ilə bu başlıqdakı tipə baxın.
Yəqin ki, mətn kölgəsinin dörd dəyəri qəbul etdiyini bilirsiniz: (1) üfüqi və (2) şaquli ofsetlər, (3) bulanıqlıq və (4) bərk və ya yarı şəffaf ola bilən rəng. Bu ofset dəyərləri müsbət və ya mənfi ola bilər, ona görə də aşağı və sağa çəkilmiş sərt kölgədən istifadə edərək “Yuk-Yuk Ördəyi”ni təkrarlaya bilərəm: rəng: #f7f76d; mətn kölgəsi: 5px 5px 0 #1e1904;
Digər tərəfdən, bu "Pint Giant" başlığı mənfi yarı yumşaq kölgəsi ilə fərqli hisslərə malikdir: rəng: #c2a872; mətn kölgəsi: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Əlavə dərinlik əlavə etmək və daha maraqlı effektlər yaratmaq üçün çoxlu kölgələri qatlaya bilərəm. “Let’s Duck Out” üçün mən dörd kölgəni birləşdirirəm: birincisi, mətni fondan çıxarmaq üçün mənfi üfüqi ofsetli möhkəm kölgə, sonra isə ətrafında bulanıqlıq yaratmaq üçün tədricən daha yumşaq kölgələr: rəng: #6F4D80; mətn kölgəsi: -5px5px 0 #260e1e, /* Kölgə 1 */ 0 0 15px #e9ce96, /* Kölgə 2 */ 0 0 30px #e9ce96, /* Kölgə 3 */ 0 0 30px #e9ce96; /* Kölgə 4 */
Bu kölgələr göstərir ki, mətn kölgəsindən istifadə təkcə işıqlandırma effektləri yaratmaq deyil, çünki onlar həm də dekorativ ola bilər və şəxsiyyət əlavə edə bilər. Mətn vuruşu Bir çox cizgi filminin başlıq kartlarında qalın konturlu hərflər var ki, bu da onları fondan fərqləndirir. Mən mətn vuruşundan istifadə edərək bu effekti yenidən yarada bilərəm. Uzun müddətdir ki, bu əmlak yalnız -webkit- prefiksi ilə mövcud idi, lakin bu, həm də onun indi müasir brauzerlərdə dəstəklənməsi deməkdir.
mətn vuruşu iki xüsusiyyət üçün stenoqramdır. Birinci, mətn ştrixinin eni fərdi hərflərin ətrafında kontur çəkir, ikincisi, mətn ştrixinin rəngi isə onun rənginə nəzarət edir. “Whatever Goes Pup” üçün sarı mətnə 4px mavi xətt əlavə etdim: rəng: #eff0cd; -webkit-text-stroke: 4px #7890b5; mətn vuruşu: 4px #7890b5;
Vuruşlar kölgələrlə birləşdirildikdə xüsusilə faydalı ola bilər, ona görə də “Böyümək, Böyümək, Getmək” üçün bu üçölçülü mətn effektini yaratmaq üçün çətin ki, bulanıq 1px kölgəyə nazik 3px ştrix əlavə etdim: rəng: #fbb999; mətn kölgəsi: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; mətn vuruşu: 3px #984336;
Boya Sifarişi Mətn vuruşundan istifadə həmişə gözlənilən nəticəni vermir, xüsusən daha incə hərflər və daha qalın vuruşlarla, çünki standart olaraq brauzer doldurma üzərində vuruş çəkir. Təəssüf ki, CSS hələ də Sketch-də tez-tez etdiyim kimi vuruşun yerini tənzimləməyə icazə vermir. Bununla belə, boya-sifariş xassəsinin dəyərləri var ki, mənə ştrixi doldurmanın qarşısında deyil, arxada yerləşdirməyə imkan verir.
boya sırası: ştrix əvvəlcə konturu, sonra doldurmağı rəngləyir, boya sırası: doldurma isə bunun əksini edir: rəng: #fbb999; boya sırası: doldurmaq; mətn kölgəsi: 3px 5px 1px #5160b1; text-stroke-color:#984336; mətn vuruşunun eni: 3px;
Effektiv vuruş hərfləri oxunaqlı saxlayır, çəki əlavə edir və kölgələr və boya sırası ilə birləşdirildikdə düz mətnin real mövcudluğunu təmin edir. Mətn daxilində fonlar Bir çox cizgi filminin başlıq kartları yazıya tekstura, gradientlər və ya təsvir edilmiş detallar əlavə etməklə düz rəngdən kənara çıxır. Bəzən bu bir faktura, digər vaxtlarda incə ton dəyişikliyi olan gradient ola bilər. İnternetdə mətnin arxasındakı fon şəkli və ya gradientdən istifadə edərək, sonra onu hərflərin formasına kəsməklə bu effekti yenidən yarada bilərəm. Bu, birlikdə işləyən iki xüsusiyyətə əsaslanır: background-clip: text və text-fill-color: transparent.
Əvvəlcə mətnin arxasında fon tətbiq edirəm. Bu, bitmap və ya vektor şəkli və ya CSS gradienti ola bilər. Quick Draw McGraw epizodunun "Baba Bait" adlı bu nümunəsi üçün başlıq mətni qaranlıqdan işığa doğru incə yuxarıdan aşağı gradienti ehtiva edir: fon: xətti-gradient(0deg, #667b6a, #1d271a);
Sonra mən həmin fonu qliflərə kəsirəm və mətni şəffaf edirəm ki, fon aşağıdakıları göstərsin: -webkit-background-clip: mətn; -webkit-text-fill-color: şəffaf;
Yalnız bu iki sətirlə fon artıq mətnin arxasına çəkilmir; əvəzinə, onun içərisində rənglənir. Bu texnika vuruşlar və kölgələrlə birləşdirildikdə xüsusilə yaxşı işləyir. Kəsilmiş gradient hərfi rəng və tekstura ilə təmin edir, vuruş onun kənarlarını kəskin saxlayır və kölgə onu fondan qaldırır. Birlikdə, kiçik bir CSS-dən başqa bir şey istifadə etmədən əl ilə boyanmış başlıq kartlarının laylı görünüşünü yenidən yaradırlar. Həmişə olduğu kimi, kəsilmiş mətni diqqətlə yoxlayın, çünki brauzerin qəribəlikləri bəzən kölgələrə və göstərməyə təsir edə bilər. Mətnin Fərdi Simvollara Parçalanması Bəzən bütün bir sözü və ya başlığı tərtib etmək istəmirəm. Mən fərdi hərflərə stil vermək istəyirəm — simvolu yerinə dürtmək, bir qlifə əlavə çəki vermək və ya bir neçə hərfi müstəqil şəkildə canlandırmaq. Düz HTML və CSS-də bunun yalnız bir etibarlı yolu var: hər simvolu öz span elementinə sarın. Mən bunu əl ilə edə bilərdim, lakin bu, kövrək, saxlanması çətin olacaq və nüsxə dəyişdikdə tez dağılacaq. Əvəzində hər hərf nəzarətinə ehtiyacım olanda splt.js kimi mətni bölən kitabxanadan istifadə edirəm (baxmayaraq ki, başqa həllər mövcuddur). Bu, mətn qovşağını götürür və avtomatik olaraq sözləri və ya simvolları bükərək mənə işarələməmi pozmadan canlandırmaq və üslub etmək üçün əlavə qarmaqlar verir. Klassik cizgi filminin başlıq kartlarında gördüyünüz qeyri-bərabər, xarakterik tipoqrafiyanı yenidən yaratmaq üçün mənə lazım olan incə nəzarəti verməklə yanaşı, mənim HTML-i oxunaqlı və semantik saxlayan bir yanaşmadır. Ancaq bu yanaşma ilə gəlirəlçatanlıq xəbərdarlıqları, çünki əksər ekran oxuyucuları mətn qovşaqlarını ardıcıllıqla oxuyur. Beləliklə, bu:
Hum Şirin zümzümə
… gözlədiyiniz kimi oxuyur: Hum Şirin Hum
Amma bu:
H u m
…brauzerdən və ekran oxuyucudan asılı olaraq fərqli şərh edilə bilər. Bəziləri hərfləri birləşdirəcək və sözləri düzgün oxuyacaq. Digərləri hərflər arasında fasilə verə bilər ki, bu da ən pis ssenaridə belə səslənə bilər: “H…” “U…” “M…”
Təəssüf ki, bəzi bölmə həlləri həmişə əlçatan nəticə vermir, ona görə də mən öz mətn splitterimi, hazırda beta mərhələsində olan splinter.js yazdım. Fərdi hərflərin çevrilməsi Toon Text Splitter-i aktivləşdirmək üçün bölmək istədiyim elementə data atributunu əlavə edirəm:
Hum Sweet Hum
Birincisi, mənim skriptim hər sözü fərdi hərflərə ayırır və onları sinif və ARIA atributları tətbiq edilməklə span elementinə bükür:
Sonra skript bölünmüş elementin ilkin məzmununu götürür və əlçatanlığı qorumaq üçün onu ariya atributu kimi əlavə edir:
Tətbiq olunan bu sinif atributları ilə mən fərdi simvolları seçdiyim kimi tərtib edə bilərəm.
Məsələn, "Hum Sweet Hum" üçün onun hərflərinin əsas xəttdən necə uzaqlaşdığını təkrarlamaq istəyirəm. Toon Text Splitter-dən istifadə etdikdən sonra yarı təsadüfi görünüş yaratmaq üçün bir neçə :nth-child seçicisindən istifadə edərək dörd fərqli tərcümə dəyəri tətbiq etdim: /* 4, 8, 12... */ .toon-char:nth-child(4n) { tərcümə: 0 -8px; } /* 1-ci, 5-ci, 9-cu... */ .toon-char:nth-child(4n+1) { tərcümə: 0 -4px; } /* 2-ci, 6-cı, 10-cu... */ .toon-char:nth-child(4n+2) { tərcümə: 0 4px; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { tərcümə: 0 8px; }
Lakin translate toon mətnimi çevirmək üçün istifadə edə biləcəyim yalnız bir xüsusiyyətdir.
Mən də daha xaotik görünüş üçün həmin fərdi simvolları döndərə bilərdim: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { döndərmək: -4deg; } /* 1-ci, 5-ci, 9-cu... */ .toon-char:nth-child(4n+1) { döndərmək: -8deg; } /* 2-ci, 6-cı, 10-cu... */ .toon-char:nth-child(4n+2) { döndərmək: 4deg; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { döndərmək: 8deg; }
Lakin translate toon mətnimi çevirmək üçün istifadə edə biləcəyim yalnız bir xüsusiyyətdir. Mən də daha xaotik görünüş üçün həmin fərdi simvolları döndərə bilərdim: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { fırlanma: -4deg; }
/* 1-ci, 5-ci, 9-cu... */ .toon-char:nth-child(4n+1) { fırlanma: -8deg; }
/* 2-ci, 6-cı, 10-cu... */ .toon-char:nth-child(4n+2) { fırlanma: 4 dərəcə; }
/* 3, 7, 11... */ .toon-char:nth-child(4n+3) { fırlanma: 8 dərəcə; }
Və təbii ki, mən bu personajları çaşdırmaq üçün animasiyalar əlavə edə və öz mətn üslubumun başlıqlarını canlandıra bilərdim. Əvvəlcə simvolları döndərən əsas kadr animasiyasını yaratdım:
@keyframes jiggle { 0%, 100% { çevirmək: döndərmək(var(--base-rotate, 0deg)); } 25% { çevirmək: döndərmək(hesabla(var(--baza-döndürmə, 0deg) + 3deg)); } 50% { çevirmək: döndərmək(hesabla(var(--baza-döndürmə, 0deg) - 2deq)); } 75% { çevirmək: döndərmək(hesabla(var(--base-döndürmə, 0deg) + 1deg)); } }
Toon Text Splitter tərəfindən yaradılmış aralıq elementlərinə tətbiq etməzdən əvvəl: .toon-char { animasiya: titrəmə 3s sonsuz rahatlıq; transform-mənşə: mərkəzi alt; }
Və nəhayət, hər bir simvol titrəməyə başlamazdan əvvəl fırlanma miqdarını və gecikməni təyin edin: .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) { animasiya gecikməsi: 0.1s; } .toon-char:nth-child(4n+1) { animasiya gecikməsi: 0.3s; } .toon-char:nth-child(4n+2) { animasiya gecikməsi: 0,5s; } .toon-char:nth-child(4n+3) { animasiya gecikməsi: 0,7s; }
Təəssürat yaratmaq üçün bir çərçivə Karikatura başlığı olan rəssamların təəssürat yaratmaq üçün bir çərçivəsi var idi və onların tipoqrafiyası çəkdikləri sənət əsəri qədər vacib idi. Eyni şey internetdə də belədir. Yaxşı işlənmiş başlıq və ya qəhrəmansahə aydınlığa, xarakterə və özünə inam tələb edir - sadəcə solğun tam enli fon şəkli deyil. Bir neçə diqqətlə seçilmiş CSS xassələri ilə - kölgələr, vuruşlar, kəsilmiş fonlar və bəzi məhdud animasiya - biz eyni təsiri yenidən yarada bilərik. Toon mətnini nostalji olduğum üçün deyil, dizaynı məqsədyönlü olduğu üçün sevirəm. Qəsdən seçimlər edin və dizaynlarınıza kiçik bir mətn tipoqrafiyası əlavə edin.
