Po ukończeniu projektu, który wymagał ode mnie poznania wszystkiego, co mogłem o animacjach CSS i SVG, zacząłem pisać serię o Smashing Animations i „Jak klasyczne kreskówki inspirują nowoczesny CSS”. Na zakończenie tego roku chcę pokazać, jak używać nowoczesnego CSS, aby stworzyć element, który sprawia, że Toon Titles ma tak duży wpływ: ich typografię. Tytułowy projekt graficzny W niemej epoce lat dwudziestych i wczesnych trzydziestych typografia karty tytułowej filmu tworzyła nastrój, ustawiała scenę i przypominała widzom, za jaki rodzaj filmu zapłacili.
Karty tytułowe kreskówek obejmowały także branding, nastrój i scenerię, a wszystko to w jednym. We wczesnych latach, kiedy budżety głównych studiów były większe, te karty tytułowe często miały charakter ilustracyjny i malarski.
Kiedy jednak w latach pięćdziesiątych nastąpił rozkwit telewizji, budżety spadły, a karty zaprojektowane przez artystów takich jak Lawrence „Art” Goble przyjęły nowy język wizualny, stając się bardziej graficzny, stylizowany i mniej skomplikowany. Uwaga: Lawrence „Art” Goble to jeden z często pomijanych bohaterów amerykańskiej animacji z połowy stulecia. Pracował głównie dla Hanna-Barbera w jej najbardziej wpływowych latach, czyli w latach pięćdziesiątych i sześćdziesiątych. Goble nie był animatorem postaci. Jego rolą było tworzenie atmosfery, więc zaprojektował otoczenie dla The Flintstones, Huckleberry Hound, Quick Draw McGraw i Yogi Bear, a także początkowe karty tytułowe, które nadały ton. Jego karty tytułowe, na których znajdują się obrazy z nałożonym logo, pomogły zdefiniować kultowy wygląd Hanny-Barbera. Grafika Goble'a przedstawiająca postacie takie jak Quick Draw McGraw i Miś Yogi dobrze sprawdzała się na mniejszych ekranach telewizorów. Zamiast odtwarzać kadr z kreskówki, skupił się na przedstawieniu jednego, mocnego pomysłu – często w zarysie – który uchwycił jego istotę. W „The Buzzin’ Bear” Yogi przelatuje helikopterem. Odbija się z koszykiem piknikowym w dłoni w „Niedźwiedziu na pikniku”, a w „Strachu przed walką o nagrody” Yogi zapisuje tytułowy tekst.
Przy niewielkiej liczbie ruchu lub jego braku, pojedyncze klatki Goble'a musiały stworzyć nastrój, ustawić scenę i opisać historię. Zrobili to, używając płaskich kolorów, kształtów graficznych i typografii, które często były zintegrowane z grafiką.
Jako projektanci pracujący w Internecie, tytuły kreskówek mogą nas wiele nauczyć o tym, jak przekazać osobowość marki, zrobić pierwsze wrażenie i określić oczekiwania dotyczące czyjegoś doświadczenia z produktem lub stroną internetową. Możemy uczyć się od technik artystów tworzenia skutecznych banerów, nagłówków stron docelowych, a nawet starych, dobrych ekranów powitalnych. Typografia tytułu Toon Karty tytułowe kreskówek pokazują, jak połączenie tekstu z obrazami zapewnia siłę potrzebną nagłówkowi lub bohaterowi. Dzięki kilku sztuczkom z cieniowaniem tekstu, obrysem tekstu i przekształcaniem nowoczesny CSS pozwala wykorzystać tę samą energię.
Generator tytułów tekstowych Toon W połowie pisania tego artykułu zdałem sobie sprawę, że przydatne byłoby posiadanie narzędzia do generowania tekstu stylizowanego na tytuły kreskówek, które tak bardzo kocham. Więc zrobiłem jeden. Generator tytułów tekstu My Toon umożliwia eksperymentowanie z kolorami, obrysami i wieloma cieniami tekstu. Możesz dostosować kolejność malowania, zastosować odstępy między literami, wyświetlić podgląd tekstu w wybranych przykładowych czcionkach, a następnie skopiować wygenerowany CSS bezpośrednio do schowka, aby wykorzystać go w projekcie. Toon Tytuł CSS Możesz po prostu skopiować i wkleić kod CSS dostarczony przez generator tytułów tekstu Toon. Przyjrzyjmy się jednak bliżej temu, co robi. Cień tekstu Spójrz na czcionkę w tytule z odcinka Augie Doggie „Kaczka Yuk-Yuk” z jej bladożółtymi literami i ciemnym, twardym, przesuniętym cieniem, który unosi go z tła i tworzy iluzję głębi.
Prawdopodobnie już wiesz, że cień tekstowy przyjmuje cztery wartości: (1) przesunięcie w poziomie i (2) przesunięcie w pionie, (3) rozmycie i (4) kolor, który może być jednolity lub półprzezroczysty. Te wartości przesunięcia mogą być dodatnie lub ujemne, więc mogę odtworzyć „Kaczkę Yuk-Yuk”, używając twardego cienia przeciągniętego w dół i w prawo: kolor: #f7f76d; cień tekstowy: 5px 5px 0 #1e1904;
Z drugiej strony tytuł „Pint Giant” ma inny charakter dzięki swojemu negatywnemu, półmiękkiemu cieniowi: kolor: #c2a872; cień tekstowy: -7px 5px 0 #b100e, 0–5 pikseli 10 pikseli #546c6f;
Aby dodać dodatkowej głębi i uzyskać ciekawsze efekty, mogę nałożyć wiele cieni. W przypadku „Let’s Duck Out” łączę cztery cienie: pierwszy jednolity cień z ujemnym przesunięciem w poziomie, aby podnieść tekst z tła, a następnie stopniowo delikatniejsze cienie, aby utworzyć wokół niego rozmycie: kolor: #6F4D80; cień tekstowy: -5px5px 0 #260e1e, /* Cień 1 */ 0 0 15px #e9ce96, /* Cień 2 */ 0 0 30px #e9ce96, /* Cień 3 */ 0 0 30 pikseli #e9ce96; /* Cień 4 */
Te cienie pokazują, że użycie cienia tekstowego nie polega tylko na tworzeniu efektów świetlnych, ponieważ mogą one również pełnić funkcję dekoracyjną i dodawać osobowości. Obrys tekstu Wiele kart tytułowych kreskówek zawiera litery z odważnym konturem, który wyróżnia je z tła. Mogę odtworzyć ten efekt za pomocą obrysu tekstu. Przez długi czas ta właściwość była dostępna wyłącznie za pośrednictwem przedrostka -webkit-, ale oznacza to również, że jest teraz obsługiwana we wszystkich nowoczesnych przeglądarkach.
tekst-obrys jest skrótem dla dwóch właściwości. Pierwsza, szerokość obrysu tekstu, rysuje kontur wokół poszczególnych liter, natomiast druga, kolor obrysu tekstu, kontroluje jego kolor. W przypadku „Whatever Goes Pup” do żółtego tekstu dodałem niebieską obrys o wielkości 4 pikseli: kolor: #eff0cd; -obrys tekstu-webkit: 4px #7890b5; obrys tekstu: 4px #7890b5;
Obrysy mogą być szczególnie przydatne, gdy są połączone z cieniami, dlatego w przypadku „Rośnie, rośnie, znika” dodałem cienką kreskę o wielkości 3 pikseli do ledwo rozmytego cienia o wielkości 1 piksela, aby stworzyć ten trójwymiarowy efekt tekstowy: kolor: #fbb999; cień tekstowy: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; obrys tekstu: 3px #984336;
Zamówienie farby Użycie obrysu tekstu nie zawsze daje oczekiwany rezultat, szczególnie w przypadku cieńszych liter i grubszych pociągnięć, ponieważ domyślnie przeglądarka rysuje obrys nad wypełnieniem. Niestety CSS nadal nie pozwala mi dostosować położenia obrysu, jak to często robię w Sketch. Jednakże właściwość kolejności malowania ma wartości, które pozwalają mi umieścić obrys za wypełnieniem, a nie przed nim.
kolejność malowania: obrys maluje najpierw obrys, potem wypełnienie, natomiast kolejność malowania: wypełnienie działa odwrotnie: kolor: #fbb999; kolejność malowania: wypełnienie; cień tekstowy: 3px 5px 1px #5160b1; kolor obrysu tekstu: #984336; szerokość obrysu tekstu: 3px;
Efektywne pociągnięcie zapewnia czytelność liter, zwiększa ich wagę, a w połączeniu z cieniami i kolejnością malowania zapewnia prawdziwą obecność płaskiego tekstu. Tła Wewnątrz Tekstu Wiele kart tytułowych kreskówek wykracza poza jednolity kolor, dodając do napisów teksturę, gradienty lub ilustrowane szczegóły. Czasami jest to tekstura, innym razem może to być gradient z subtelnym przesunięciem tonalnym. W Internecie mogę odtworzyć ten efekt, używając obrazu tła lub gradientu za tekstem, a następnie przycinając go do kształtu liter. Opiera się to na dwóch współdziałających właściwościach: klip w tle: tekst i kolor wypełnienia tekstu: przezroczysty.
Najpierw nakładam tło za tekstem. Może to być bitmapa, obraz wektorowy lub gradient CSS. W tym przykładzie z odcinka Quick Draw McGraw „Baba Bait” tekst tytułowy zawiera subtelny gradient od góry do dołu od ciemnego do jasnego: tło: gradient liniowy (0 stopni, #667b6a, #1d271a);
Następnie przypinam to tło do glifów i ustawiam tekst jako przezroczysty, tak aby tło było prześwitujące: -klip-w tle-webkit: tekst; -webkit-kolor wypełnienia tekstu: przezroczysty;
Dzięki tym dwóm liniom tło nie jest już zamalowane za tekstem; zamiast tego jest w nim namalowany. Technika ta sprawdza się szczególnie dobrze w połączeniu z pociągnięciami i cieniami. Przycięty gradient nadaje literom kolor i fakturę, obrys utrzymuje ostre krawędzie, a cień unosi je nad tło. Razem odtwarzają warstwowy wygląd ręcznie malowanych kart tytułowych, używając jedynie odrobiny CSS. Jak zawsze, dokładnie przetestuj przycięty tekst, ponieważ dziwactwa przeglądarki mogą czasami wpływać na cienie i renderowanie. Dzielenie tekstu na pojedyncze znaki Czasami nie chcę stylizować całego słowa lub nagłówka. Chcę nadać styl poszczególnym literom — aby przesunąć postać w odpowiednie miejsce, nadać jednemu glifowi dodatkową wagę lub niezależnie animować kilka liter. W zwykłym HTML i CSS jest na to tylko jeden niezawodny sposób: zawiń każdy znak w jego własny element span. Mógłbym to zrobić ręcznie, ale byłoby to delikatne, trudne w utrzymaniu i szybko by się rozpadło w przypadku zmiany kopii. Zamiast tego, gdy potrzebuję kontroli poszczególnych liter, używam biblioteki do dzielenia tekstu, takiej jak splt.js (chociaż dostępne są inne rozwiązania). Zajmuje to węzeł tekstowy i automatycznie zawija słowa lub znaki, co daje mi dodatkowe możliwości animacji i stylizacji bez psucia moich znaczników. Dzięki takiemu podejściu mój kod HTML jest czytelny i semantyczny, a jednocześnie zapewnia mi precyzyjną kontrolę, której potrzebuję, aby odtworzyć nierówną, charakterystyczną typografię, którą można zobaczyć na klasycznych kartach tytułowych kreskówek. Jednak takie podejście wiąże się zzastrzeżenia dotyczące dostępności, ponieważ większość czytników ekranu czyta węzły tekstowe w kolejności. Więc to:
Buczenie, słodkie buczenie
… czyta się tak, jak można się spodziewać: Bum Słodki bum
Ale to:
H u m
…można różnie interpretować w zależności od przeglądarki i czytnika ekranu. Niektórzy połączą litery i poprawnie przeczytają słowa. Inni mogą robić przerwy między literami, co w najgorszym przypadku może brzmieć następująco: „H…” „Ty…” „M…”
Niestety, niektóre rozwiązania do dzielenia tekstu nie zapewniają zawsze dostępnego wyniku, dlatego napisałem własny narzędzie do rozdzielania tekstu, splinter.js, który jest obecnie w wersji beta. Przekształcanie poszczególnych liter Aby aktywować mój rozdzielacz tekstu Toon, dodaję atrybut danych do elementu, który chcę podzielić:
Buczenie Słodki szum
Po pierwsze, mój skrypt dzieli każde słowo na pojedyncze litery i otacza je elementem span z zastosowanymi atrybutami class i ARIA:
Następnie skrypt pobiera początkową treść podzielonego elementu i dodaje ją jako atrybut arii, aby pomóc zachować dostępność:
Po zastosowaniu tych atrybutów klas mogę dowolnie stylizować poszczególne postacie.
Na przykład w przypadku „Hum Sweet Hum” chcę odtworzyć sposób, w jaki litery oddalają się od linii bazowej. Po użyciu narzędzia Toon Text Splitter zastosowałem cztery różne wartości tłumaczenia, używając kilku selektorów :nth-child, aby uzyskać półlosowy wygląd: /* 4., 8., 12.... */ .toon-char:nth-child(4n) {tłumacz: 0 -8px; } /* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { przetłumacz: 0 -4px; } /* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { przetłumacz: 0 4px; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { przetłumacz: 0 8px; }
Ale tłumaczenie to tylko jedna właściwość, której mogę użyć do przekształcenia tekstu tonowego.
Mógłbym także obrócić poszczególne postacie, aby uzyskać jeszcze bardziej chaotyczny wygląd: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { obrót: -4deg; } /* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { obrót: -8 stopni; } /* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { obrót: 4 stopnie; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { obrót: 8 stopni; }
Ale tłumaczenie to tylko jedna właściwość, której mogę użyć do przekształcenia tekstu tonowego. Mógłbym także obrócić poszczególne postacie, aby uzyskać jeszcze bardziej chaotyczny wygląd: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { obrót: -4 stopnie; }
/* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { obrót: -8 stopni; }
/* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { obrót: 4 stopnie; }
/* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { obrót: 8 stopni; }
I oczywiście mógłbym dodać animacje, aby poruszać tymi postaciami i ożywić moje tytuły w stylu tekstu tonowego. Najpierw stworzyłem animację klatek kluczowych, która obraca postacie:
@klatki kluczowe poruszają się { 0%, 100% { transformacja: obrót(var(--obrót podstawy, 0 stopni)); } 25% { transformacja: obrót(oblicz(var(--obrót podstawy, 0 stopni) + 3 stopnie)); } 50% { transformacja: obrót(oblicz(var(--obrót podstawy, 0 stopni) - 2 stopnie)); } 75% { transformacja: obrót(oblicz(var(--obrót podstawy, 0 stopni) + 1 stopień)); } }
Przed zastosowaniem go do elementów rozpiętości utworzonych przez mój rozdzielacz tekstu Toon: .toon-char { animacja: nieskończone wysuwanie przez 3 sekundy; transform-Origin: środkowy dół; }
I na koniec ustawienie wielkości rotacji i opóźnienia, zanim każda postać zacznie się trząść: .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) { opóźnienie-animacji: 0,1 s; } .toon-char:nth-child(4n+1) { opóźnienie-animacji: 0,3 s; } .toon-char:nth-child(4n+2) { opóźnienie-animacji: 0,5 s; } .toon-char:nth-child(4n+3) { opóźnienie-animacji: 0,7 s; }
Jedna klatka, aby zrobić wrażenie Twórcy tytułów kreskówek mieli jedną klatkę, na której mogli zrobić wrażenie, a ich typografia była równie ważna jak namalowana grafika. To samo dotyczy sieci. Dobrze zaprojektowany nagłówek lub bohaterobszar wymaga przejrzystości, charakteru i pewności — a nie tylko wyblakłego obrazu tła o pełnej szerokości. Dzięki kilku starannie dobranym właściwościom CSS — cieniom, obrysom, przyciętym tłu i powściągliwej animacji — możemy odtworzyć ten sam efekt. Uwielbiam tekst Toon nie dlatego, że jestem nostalgiczny, ale dlatego, że jego projekt jest zamierzony. Dokonuj przemyślanych wyborów i pozwól, aby odrobina typografii tekstowej dodała wyrazu Twoim projektom.
