CSS ve SVG animasyonları hakkında öğrenebileceğim her şeyi öğrenmemi gerektiren bir projeyi bitirdikten sonra, Çarpıcı Animasyonlar ve "Klasik Çizgi Filmler Modern CSS'ye Nasıl İlham Veriyor?" konulu bu seriyi yazmaya başladım. Bu yılı bitirirken, Toon Başlıklarını bu kadar etkili kılan öğeyi, yani tipografiyi oluşturmak için modern CSS'yi nasıl kullanacağınızı göstermek istiyorum. Başlık Yapıt Tasarımı 1920'lerin sessiz döneminde ve 30'ların başında, bir filmin başlık kartının tipografisi bir ruh hali yarattı, sahneyi hazırladı ve izleyiciye görmek için para ödediği film türünü hatırlattı.
Çizgi film başlık kartları aynı zamanda markalama, ruh hali ve sahne düzenlemesiydi; hepsi bir aradaydı. Büyük stüdyo bütçelerinin daha büyük olduğu ilk yıllarda, bu başlık kartları genellikle açıklayıcı ve resimseldi.
Ancak 1950'lerde televizyonun patlamasıyla bütçeler düştü ve Lawrence "Art" Goble gibi sanatçıların tasarladığı kartlar yeni bir görsel dil benimseyerek daha grafik, stilize ve daha az karmaşık hale geldi. Not: Lawrence "Art" Goble, yüzyıl ortası Amerikan animasyonunun sıklıkla gözden kaçırılan kahramanlarından biridir. Öncelikle 1950'ler ve 1960'lar gibi en etkili yıllarında Hanna-Barbera için çalıştı. Goble bir karakter animatörü değildi. Rolü atmosfer yaratmaktı, bu nedenle The Flintstones, Huckleberry Hound, Quick Draw McGraw ve Yogi Bear için ortamların yanı sıra atmosferi belirleyen açılış başlık kartlarını da tasarladı. Üzerinde logo bulunan tabloların yer aldığı başlık kartları, Hanna-Barbera'nın ikonik görünümünü tanımlamaya yardımcı oldu. Goble'ın Quick Draw McGraw ve Yogi Bear gibi karakterler için hazırladığı çizimler, daha küçük TV ekranlarında etkili oldu. Karikatürden bir kareyi yeniden üretmek yerine, onun özünü yakalayan tek ve güçlü bir fikri (çoğunlukla silüet halinde) sunmaya odaklandı. "The Vızıldayan Ayı"da Yogi helikopterle vızıldayarak geçiyor. Elinde piknik sepetiyle "Piknikte Ayı"da sıçrıyor ve "Ödüllü Dövüş Korkusu" için Yogi başlık metnini kutuya koyuyor.
Hareketin çok az olduğu veya hiç hareket etmediği Goble'ın tek karelerinin bir ruh hali yaratması, sahneyi hazırlaması ve bir hikaye anlatması gerekiyordu. Bunu, sıklıkla sanat eserine entegre edilen düz renkler, grafik şekiller ve tipografi kullanarak yaptılar.
İnternette çalışan tasarımcılar olarak çizgi film başlıkları bize bir markanın kişiliğini nasıl aktaracağımız, ilk izlenimi nasıl yaratacağımız ve birinin bir ürünü veya web sitesini kullanma deneyimine ilişkin beklentileri nasıl oluşturacağımız konusunda çok şey öğretebilir. Etkili banner'lar, açılış sayfası başlıkları ve hatta eski moda açılış ekranları oluşturmak için sanatçıların tekniklerinden öğrenebiliriz. Çizgi Film Başlığı Tipografisi Karikatür başlık kartları, yazıyı görüntülerle birleştirmenin bir başlığın veya kahramanın ihtiyaç duyduğu etkiyi nasıl sağladığını gösteriyor. Bir avuç metin gölgesi, metin vuruşu ve dönüştürme hilesi ile modern CSS, aynı enerjiden yararlanmanıza olanak tanır.
Toon Metin Başlığı Oluşturucu Bu makaleyi yazarken, çok sevdiğim çizgi film başlıklarına benzer tarzda metinler oluşturmaya yönelik bir araca sahip olmanın faydalı olacağını fark ettim. Ben de bir tane yaptım. My Toon Metin Başlığı Oluşturucum renkler, konturlar ve birden fazla metin gölgesi ile denemeler yapmanızı sağlar. Boya sırasını ayarlayabilir, harf aralığı uygulayabilir, metninizi çeşitli örnek yazı tiplerinde önizleyebilir ve ardından oluşturulan CSS'yi bir projede kullanmak üzere doğrudan panonuza kopyalayabilirsiniz. Çizgi Film Başlığı CSS Toon Metin Başlığı Oluşturucunun size sağladığı CSS'yi kopyalayıp yapıştırabilirsiniz. Ama ne yaptığına daha yakından bakalım. Metin gölgesi Augie Doggie'nin "Yuk-Yuk Duck" bölümündeki bu başlıktaki, soluk sarı harfleri ve onu arka plandan kaldıran ve derinlik yanılsaması yaratan koyu, sert, dengeli gölgesi olan türe bakın.
Muhtemelen text-shadow'un dört değeri kabul ettiğini zaten biliyorsunuzdur: (1) yatay ve (2) dikey uzaklıklar, (3) bulanıklık ve (4) düz veya yarı saydam olabilen bir renk. Bu uzaklık değerleri pozitif veya negatif olabilir, dolayısıyla aşağı ve sağa çekilmiş sert bir gölge kullanarak "Yuk-Yuk Duck"ı kopyalayabilirim: renk: #f7f76d; metin gölgesi: 5px 5px 0 #1e1904;
Öte yandan bu “Pint Giant” başlığı, negatif yarı yumuşak gölgesiyle farklı bir his uyandırıyor: renk: #c2a872; metin gölgesi: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Ekstra derinlik eklemek ve daha ilginç efektler yaratmak için birden fazla gölgeyi katmanlayabilirim. "Let's Duck Out" için dört gölgeyi birleştiriyorum: İlki, metni arka plandan kaldırmak için negatif yatay kaymaya sahip düz bir gölge, ardından çevresinde bulanıklık yaratmak için giderek daha yumuşak gölgeler: renk: #6F4D80; metin gölgesi: -5px5px 0 #260e1e, /* Gölge 1 */ 0 0 15px #e9ce96, /* Gölge 2 */ 0 0 30px #e9ce96, /* Gölge 3 */ 0 0 30px #e9ce96; /* Gölge 4 */
Bu gölgeler, metin gölgesi kullanmanın sadece ışık efektleri yaratmakla ilgili olmadığını, aynı zamanda dekoratif olabileceğini ve kişilik ekleyebileceğini gösteriyor. Metin Konturu Çoğu çizgi film başlık kartında, arka planda öne çıkmalarını sağlayan kalın hatlı harfler bulunur. Bu efekti text-stroke kullanarak yeniden oluşturabilirim. Uzun bir süre boyunca bu özellik yalnızca -webkit- önekiyle kullanılabiliyordu ancak bu aynı zamanda artık modern tarayıcılarda da desteklendiği anlamına geliyor.
text-stroke iki özelliğin kısaltmasıdır. Birincisi, metin kontur genişliği, tek tek harflerin etrafına bir kontur çizerken, ikincisi, metin kontur rengi, rengini kontrol eder. "Ne Olursa Olsun Yavru" için sarı metne 4 piksellik mavi bir vuruş ekledim: renk: #eff0cd; -webkit-metin-stroku: 4px #7890b5; metin vuruşu: 4px #7890b5;
Konturlar, gölgelerle birleştirildiğinde özellikle yararlı olabilir; bu nedenle, "Büyüüyor, Büyüyor, Geçti" için, bu üç boyutlu metin efektini oluşturmak için zar zor bulanıklaştırılmış 1 piksellik bir gölgeye 3 piksellik ince bir kontur ekledim: renk: #fbb999; metin gölgesi: 3px 5px 1px #5160b1; -webkit-metin-stroku: 3px #984336; metin vuruşu: 3px #984336;
Boya Siparişi Metin konturunu kullanmak, özellikle daha ince harfler ve daha kalın konturlarla her zaman beklenen sonucu vermez, çünkü tarayıcı varsayılan olarak dolgunun üzerine bir kontur çizer. Ne yazık ki CSS, Sketch'te sıklıkla yaptığım gibi kontur yerleşimini ayarlamama hâlâ izin vermiyor. Ancak boya sırası özelliği, konturu dolgunun önüne değil arkasına yerleştirmeme olanak tanıyan değerlere sahiptir.
paint-order: kontur önce konturu, ardından dolguyu boyar, oysa paint-order: fill bunun tersini yapar: renk: #fbb999; boya siparişi: dolgu; metin gölgesi: 3px 5px 1px #5160b1; metin-kontur-rengi:#984336; metin vuruş genişliği: 3px;
Etkili bir vuruş, harflerin okunabilir olmasını sağlar, ağırlığı artırır ve gölgeler ve boya düzeniyle birleştirildiğinde düz metne gerçek bir varlık kazandırır. Metin İçi Arka Planlar Birçok karikatür başlık kartı, harflere doku, degradeler veya resimli ayrıntılar ekleyerek düz rengin ötesine geçer. Bazen bu bir dokudur, bazen de hafif bir ton değişimine sahip bir degrade olabilir. Web'de, metnin arkasında bir arka plan resmi veya degrade kullanarak ve ardından bunu harflerin şekline göre kırparak bu efekti yeniden oluşturabilirim. Bu, birlikte çalışan iki özelliğe dayanır: arka plan klipsi: metin ve metin doldurma rengi: şeffaf.
İlk önce metnin arkasına bir arka plan uyguluyorum. Bu bir bitmap veya vektör görüntüsü veya bir CSS degradesi olabilir. Quick Draw McGraw'ın "Baba Bait" bölümündeki bu örnek için başlık metni, karanlıktan aydınlığa doğru ince bir üst-alt geçiş içerir: arka plan: doğrusal gradyan(0 derece, #667b6a, #1d271a);
Daha sonra, bu arka planı gliflere kırpıyorum ve arka planın görünmesi için metni şeffaf hale getiriyorum: -webkit-arka plan-klibi: metin; -webkit-metin-dolgu-rengi: şeffaf;
Sadece bu iki satırla artık metnin arkasında arka plan boyanmıyor; bunun yerine onun içinde boyanmıştır. Bu teknik özellikle konturlar ve gölgelerle birleştirildiğinde iyi çalışır. Kırpılmış degrade harflere renk ve doku kazandırır, kontur kenarları keskin tutar ve gölge onu arka plandan yükseltir. Birlikte, küçük bir CSS'den başka bir şey kullanmadan elle boyanmış başlık kartlarının katmanlı görünümünü yeniden yaratıyorlar. Her zaman olduğu gibi, tarayıcı tuhaflıkları bazen gölgeleri ve görüntülemeyi etkileyebileceğinden, kırpılan metni dikkatli bir şekilde test edin. Metni Bireysel Karakterlere Bölme Bazen bir kelimenin veya başlığın tamamını şekillendirmek istemiyorum. Bir karakteri yerine oturtmak, bir glifa ekstra ağırlık vermek veya birkaç harfe bağımsız olarak animasyon uygulamak için tek tek harflere stil vermek istiyorum. Düz HTML ve CSS'de bunu yapmanın tek güvenilir yolu vardır: her karakteri kendi span öğesine sarmak. Bunu manuel olarak yapabilirdim, ancak bu kırılgan olurdu, bakımı zor olurdu ve kopya değiştiğinde hızla parçalanırdı. Bunun yerine, harf bazında kontrole ihtiyaç duyduğumda splt.js gibi bir metin bölme kütüphanesi kullanıyorum (ancak başka çözümler de mevcut). Bu, bir metin düğümü alır ve sözcükleri veya karakterleri otomatik olarak kaydırarak bana işaretlememi bozmadan animasyon ve stil vermem için ekstra kancalar sağlar. Bu, HTML'mi okunabilir ve anlamsal tutan, aynı zamanda bana klasik çizgi film başlık kartlarında gördüğünüz düzensiz, karakterli tipografiyi yeniden yaratmak için ihtiyacım olan ayrıntılı kontrolü veren bir yaklaşım. Ancak bu yaklaşım beraberindeÇoğu ekran okuyucu metin düğümlerini sırayla okuduğundan erişilebilirlik uyarıları verir. Yani bu:
Hım tatlı uğultu
…beklediğiniz gibi okuyor: Hım tatlı uğultu
Ama bu:
H siz m
…tarayıcıya ve ekran okuyucuya bağlı olarak farklı şekilde yorumlanabilir. Bazıları harfleri birleştirecek ve kelimeleri doğru okuyacaktır. Diğerleri harfler arasında duraklayabilir ve en kötü senaryoda bu şuna benzeyebilir: “H…” “Sen…” “E…”
Ne yazık ki, bazı bölme çözümleri her zaman erişilebilir bir sonuç sunmuyor, bu yüzden şu anda beta sürümünde olan kendi metin ayırıcım splinter.js'yi yazdım. Bireysel Harfleri Dönüştürme Toon Metin Ayırıcımı etkinleştirmek için bölmek istediğim öğeye bir veri niteliği ekliyorum:
Hım tatlı uğultu
İlk olarak, betiğim her kelimeyi ayrı harflere ayırıyor ve bunları class ve ARIA niteliklerinin uygulandığı bir span öğesine sarıyor:
Komut dosyası daha sonra split öğesinin başlangıç içeriğini alır ve erişilebilirliğin korunmasına yardımcı olmak için onu bir aria niteliği olarak ekler:
Bu sınıf nitelikleri uygulandığında, bireysel karakterlere istediğim gibi stil verebilirim.
Örneğin, "Hım Sweet Hım" için harflerin taban çizgisinden nasıl uzaklaştığını kopyalamak istiyorum. Toon Metin Ayırıcımı kullandıktan sonra, yarı rastgele bir görünüm oluşturmak için birkaç :nth-child seçiciyi kullanarak dört farklı çeviri değeri uyguladım: /* 4., 8., 12.... */ .toon-char:nth-child(4n) { çeviri: 0 -8px; } /* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { çeviri: 0 -4px; } /* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { çeviri: 0 4px; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { çeviri: 0 8px; }
Ancak çeviri, çizgi metnimi dönüştürmek için kullanabileceğim özelliklerden yalnızca biridir.
Daha da kaotik bir görünüm için bu karakterleri de döndürebilirim: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { döndürme: -4deg; } /* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { döndürme: -8deg; } /* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { döndürme: 4deg; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { döndürme: 8deg; }
Ancak çeviri, çizgi metnimi dönüştürmek için kullanabileceğim özelliklerden yalnızca biridir. Daha da kaotik bir görünüm için bu karakterleri de döndürebilirim: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { döndürme: -4 derece; }
/* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { döndürme: -8 derece; }
/* 2., 6., 10.... */ .toon-char:n'inci-çocuk(4n+2) { döndürme: 4 derece; }
/* 3., 7., 11.... */ .toon-char:n'inci-çocuk(4n+3) { döndürme: 8 derece; }
Ve elbette, bu karakterleri hareket ettirmek ve çizgi metin tarzındaki başlıklarıma hayat vermek için animasyonlar ekleyebilirim. İlk olarak karakterleri döndüren bir ana kare animasyonu oluşturdum:
@keyframes titriyor { %0, %100 { transform: döndürme(var(--base-rotate, 0deg)); } %25 { dönüşüm: döndür(hesapla(var(--base-rotate, 0deg) + 3deg)); } %50 { dönüşüm: döndür(hesapla(var(--base-rotate, 0deg) - 2deg)); } %75 { dönüşüm: döndür(hesapla(var(--base-rotate, 0deg) + 1deg)); } }
Bunu Toon Text Splitter'ım tarafından oluşturulan yayılma öğelerine uygulamadan önce: .toon-char { animasyon: 3 saniyelik sonsuz giriş kolaylığı sallayın; dönüşüm-kökeni: orta alt; }
Ve son olarak, dönüş miktarını ve her karakterin sallanmaya başlamasından önceki gecikmeyi ayarlamak: .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) { animasyon gecikmesi: 0,1s; } .toon-char:nth-child(4n+1) { animasyon gecikmesi: 0,3s; } .toon-char:nth-child(4n+2) { animasyon gecikmesi: 0,5s; } .toon-char:nth-child(4n+3) { animasyon gecikmesi: 0,7s; }
Etki Yaratacak Tek Çerçeve Karikatür sanatçılarının etki yaratacak tek bir çerçevesi vardı ve tipografileri, çizdikleri sanat eseri kadar önemliydi. Aynı şey web'de de geçerli. İyi tasarlanmış bir başlık veya kahramanalanın yalnızca soluk, tam genişlikte bir arka plan görüntüsüne değil, netliğe, karaktere ve güvene ihtiyacı vardır. Dikkatlice seçilmiş birkaç CSS özelliğiyle (gölgeler, konturlar, kırpılmış arka planlar ve ölçülü animasyon) aynı etkiyi yeniden yaratabiliriz. Çizgi metinleri nostaljik olduğum için değil, tasarımı kasıtlı olduğu için seviyorum. Kasıtlı seçimler yapın ve küçük bir çizgi metin tipografisinin tasarımlarınıza etki katmasına izin verin.
