Αφού τελείωσα ένα έργο που με απαιτούσε να μάθω ό,τι μπορούσα για τα κινούμενα σχέδια CSS και SVG, άρχισα να γράφω αυτή τη σειρά για τα Smashing Animations και το "How Classic Cartoons Inspire Modern CSS". Για να ολοκληρώσω φέτος, θέλω να σας δείξω πώς να χρησιμοποιείτε το σύγχρονο CSS για να δημιουργήσετε αυτό το στοιχείο που κάνει τους Τίτλους Toon τόσο εντυπωσιακούς: την τυπογραφία τους. Τίτλος Σχεδιασμός Έργων Τέχνης Στη βωβή εποχή της δεκαετίας του 1920 και στις αρχές του 1930, η τυπογραφία της κάρτας τίτλου μιας ταινίας δημιουργούσε μια διάθεση, έθεσε το σκηνικό και υπενθύμισε στο κοινό το είδος της ταινίας που είχε πληρώσει για να δει.
Οι κάρτες τίτλου κινουμένων σχεδίων ήταν επίσης επώνυμα, διάθεση και σκηνικό, όλα σε ένα. Τα πρώτα χρόνια, όταν οι προϋπολογισμοί των μεγάλων στούντιο ήταν μεγαλύτεροι, αυτές οι κάρτες τίτλου ήταν συχνά ενδεικτικές και ζωγραφικές.
Αλλά όταν η τηλεόραση άνθισε τη δεκαετία του 1950, οι προϋπολογισμοί μειώθηκαν και οι κάρτες που σχεδιάστηκαν από καλλιτέχνες όπως ο Lawrence "Art" Goble υιοθέτησαν μια νέα οπτική γλώσσα, που έγινε πιο γραφική, στυλιζαρισμένη και λιγότερο περίπλοκη. Σημείωση: Ο Lawrence "Art" Goble είναι ένας από τους συχνά παραγνωρισμένους ήρωες του αμερικανικού animation των μέσων του αιώνα. Εργάστηκε κυρίως για τη Hanna-Barbera κατά τη διάρκεια των ετών με τη μεγαλύτερη επιρροή της, τις δεκαετίες του 1950 και του 1960. Ο Γκόμπλ δεν ήταν εμψυχωτής χαρακτήρων. Ο ρόλος του ήταν να δημιουργήσει ατμόσφαιρα, έτσι σχεδίασε περιβάλλοντα για τους The Flintstones, Huckleberry Hound, Quick Draw McGraw και Yogi Bear, καθώς και τις εναρκτήριες κάρτες τίτλου που δίνουν τον τόνο. Οι κάρτες του τίτλου του, με πίνακες ζωγραφικής με επικάλυψη λογότυπου, βοήθησαν να καθοριστεί η εμβληματική εμφάνιση της Hanna-Barbera. Το έργο τέχνης του Goble για χαρακτήρες όπως το Quick Draw McGraw και το Yogi Bear ήταν αποτελεσματικό σε μικρότερες οθόνες τηλεόρασης. Αντί να αναπαράγει ένα στιγμιότυπο από το καρτούν, επικεντρώθηκε στην παρουσίαση μιας μοναδικής, δυνατής ιδέας —συχνά σε σιλουέτα— που αιχμαλώτιζε την ουσία της. Στο "The Buzzin' Bear", ο Γιόγκι βουίζει με ένα ελικόπτερο. Αναπηδά, με το καλάθι για pic-a-nic στο χέρι, στο "Bear on a Picnic" και για το "Prize Fight Fright", ο Yogi τοποθετεί σε πλαίσιο το κείμενο του τίτλου.
Με ελάχιστη ή καθόλου κίνηση για να βασιστείτε, τα μεμονωμένα καρέ του Goble έπρεπε να δημιουργήσουν μια διάθεση, να στήσουν το σκηνικό και να περιγράψουν μια ιστορία. Το έκαναν χρησιμοποιώντας επίπεδα χρώματα, γραφικά σχήματα και τυπογραφία που συχνά ενσωματώνονταν στο έργο τέχνης.
Ως σχεδιαστές που εργάζονται στον ιστό, οι τίτλοι των toon μπορούν να μας διδάξουν πολλά για το πώς να μεταφέρουμε την προσωπικότητα μιας επωνυμίας, να κάνουμε μια πρώτη εντύπωση και να θέτουμε προσδοκίες για την εμπειρία κάποιου χρησιμοποιώντας ένα προϊόν ή έναν ιστότοπο. Μπορούμε να μάθουμε από τις τεχνικές των καλλιτεχνών για τη δημιουργία αποτελεσματικών banner, κεφαλίδων σελίδας προορισμού, ακόμη και καλών οθονών εκκίνησης. Τυπογραφία Τίτλου Toon Οι κάρτες τίτλου κινουμένων σχεδίων δείχνουν πώς η συγχώνευση τύπου με εικόνες προσφέρει τη γροθιά που χρειάζεται μια κεφαλίδα ή ένας ήρωας. Με μια χούφτα κόλπα με σκιά κειμένου, περιγράμματα κειμένου και μετασχηματισμούς, το σύγχρονο CSS σάς επιτρέπει να αξιοποιήσετε την ίδια ενέργεια.
Η Γεννήτρια Τίτλων Κειμένου Toon Κατά τη διάρκεια της συγγραφής αυτού του άρθρου, συνειδητοποίησα ότι θα ήταν χρήσιμο να έχω ένα εργαλείο για τη δημιουργία κειμένου με στυλ όπως οι τίτλοι κινουμένων σχεδίων που αγαπώ τόσο πολύ. Οπότε έφτιαξα ένα. Το My Toon Text Title Generator σάς επιτρέπει να πειραματιστείτε με χρώματα, πινελιές και πολλαπλές σκιές κειμένου. Μπορείτε να προσαρμόσετε τη σειρά ζωγραφικής, να εφαρμόσετε διάστιχο γραμμάτων, να κάνετε προεπισκόπηση του κειμένου σας σε μια επιλογή δειγμάτων γραμματοσειρών και, στη συνέχεια, να αντιγράψετε το CSS που δημιουργήθηκε κατευθείαν στο πρόχειρό σας για να το χρησιμοποιήσετε σε ένα έργο. Toon Τίτλος CSS Μπορείτε απλώς να κάνετε αντιγραφή-επικόλληση του CSS που σας παρέχει το Toon Text Title Generator. Ας δούμε όμως πιο προσεκτικά τι κάνει. Σκιά κειμένου Κοιτάξτε τον τύπο αυτού του τίτλου από το επεισόδιο «Yuk-Yuk Duck» της Augie Doggie, με τα ανοιχτά κίτρινα γράμματα και τη σκοτεινή, σκληρή, μετατοπισμένη σκιά που τον σηκώνει από το φόντο και δημιουργεί την ψευδαίσθηση του βάθους.
Πιθανότατα γνωρίζετε ήδη ότι η σκιά κειμένου δέχεται τέσσερις τιμές: (1) οριζόντιες και (2) κάθετες μετατοπίσεις, (3) θαμπάδα και (4) ένα χρώμα που μπορεί να είναι συμπαγές ή ημιδιαφανές. Αυτές οι τιμές μετατόπισης μπορεί να είναι θετικές ή αρνητικές, επομένως μπορώ να επαναλάβω το "Yuk-Yuk Duck" χρησιμοποιώντας μια σκληρή σκιά που τραβιέται προς τα κάτω και προς τα δεξιά: χρώμα: #f7f76d; text-shadow: 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 15 px #e9ce96, /* Σκιά 2 */ 0 0 30 px #e9ce96, /* Σκιά 3 */ 0 0 30px #e9ce96; /* Σκιά 4 */
Αυτές οι σκιές δείχνουν ότι η χρήση σκιάς κειμένου δεν αφορά μόνο τη δημιουργία εφέ φωτισμού, καθώς μπορούν επίσης να είναι διακοσμητικές και να προσθέσουν προσωπικότητα. Εγκεφαλικό επεισόδιο κειμένου Πολλές κάρτες τίτλων κινουμένων σχεδίων διαθέτουν γράμματα με τολμηρό περίγραμμα που τις κάνει να ξεχωρίζουν από το φόντο. Μπορώ να αναδημιουργήσω αυτό το εφέ χρησιμοποιώντας το κείμενο-stroke. Για μεγάλο χρονικό διάστημα, αυτή η ιδιότητα ήταν διαθέσιμη μόνο μέσω ενός προθέματος -webkit, αλλά αυτό σημαίνει επίσης ότι υποστηρίζεται πλέον σε σύγχρονα προγράμματα περιήγησης.
Το text-stroke είναι μια συντομογραφία για δύο ιδιότητες. Το πρώτο, text-stroke-width, σχεδιάζει ένα περίγραμμα γύρω από μεμονωμένα γράμματα, ενώ το δεύτερο, text-stroke-color, ελέγχει το χρώμα του. Για το "Whatever Goes Pup", πρόσθεσα μια μπλε πινελιά 4 εικονοστοιχείων στο κίτρινο κείμενο: χρώμα: #eff0cd; -webkit-text-stroke: 4px #7890b5; text-stroke: 4px #7890b5;
Οι πινελιές μπορούν να είναι ιδιαίτερα χρήσιμες όταν συνδυάζονται με σκιές, επομένως για το "Growing, Growing, Gone", πρόσθεσα μια λεπτή διαδρομή 3 εικονοστοιχείων σε μια μόλις θολή σκιά 1 px για να δημιουργήσω αυτό το τρισδιάστατο εφέ κειμένου: χρώμα: #fbb999; text-shadow: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; text-stroke: 3px #984336;
Παραγγελία ζωγραφικής Η χρήση της διαδρομής κειμένου δεν παράγει πάντα το αναμενόμενο αποτέλεσμα, ειδικά με πιο λεπτά γράμματα και πιο χοντρές πινελιές, επειδή από προεπιλογή το πρόγραμμα περιήγησης σχεδιάζει μια διαδρομή πάνω από το γέμισμα. Δυστυχώς, το CSS εξακολουθεί να μην μου επιτρέπει να προσαρμόσω την τοποθέτηση της διαδρομής, όπως κάνω συχνά στο Sketch. Ωστόσο, η ιδιότητα paint-order έχει τιμές που μου επιτρέπουν να τοποθετήσω το stroke πίσω και όχι μπροστά από το γέμισμα.
paint-order: το stroke ζωγραφίζει πρώτα το stroke, μετά το fill, ενώ το paint-order: fill κάνει το αντίθετο: χρώμα: #fbb999; βαφή-παραγγελία: γέμισμα; text-shadow: 3px 5px 1px #5160b1; text-stroke-color:#984336; text-stroke-width: 3px;
Ένα αποτελεσματικό χτύπημα διατηρεί τα γράμματα ευανάγνωστα, προσθέτει βάρος και — όταν συνδυάζεται με σκιές και σειρά βαφής — δίνει πραγματική παρουσία σε επίπεδο κείμενο. Φόντο μέσα στο κείμενο Πολλές κάρτες τίτλου κινουμένων σχεδίων υπερβαίνουν το επίπεδο χρώμα προσθέτοντας υφή, διαβαθμίσεις ή εικονογραφημένες λεπτομέρειες στα γράμματα. Μερικές φορές αυτό είναι μια υφή, άλλες φορές μπορεί να είναι μια κλίση με μια λεπτή τονική μετατόπιση. Στον Ιστό, μπορώ να αναδημιουργήσω αυτό το εφέ χρησιμοποιώντας μια εικόνα φόντου ή μια διαβάθμιση πίσω από το κείμενο και, στη συνέχεια, ψαλιδίζοντας το στο σχήμα των γραμμάτων. Αυτό βασίζεται σε δύο ιδιότητες που συνεργάζονται: background-clip: text και text-fill-color: transparent.
Αρχικά, εφαρμόζω ένα φόντο πίσω από το κείμενο. Αυτό μπορεί να είναι ένα bitmap ή διανυσματική εικόνα ή μια διαβάθμιση CSS. Για αυτό το παράδειγμα από το επεισόδιο Quick Draw McGraw "Baba Bait", το κείμενο του τίτλου περιλαμβάνει μια λεπτή κλίση από πάνω προς τα κάτω από το σκοτάδι στο ανοιχτό: φόντο: linear-gradient(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, το οποίο είναι επί του παρόντος σε έκδοση beta. Μεταμόρφωση μεμονωμένων γραμμάτων Για να ενεργοποιήσω το Toon Text Splitter, προσθέτω ένα χαρακτηριστικό δεδομένων στο στοιχείο που θέλω να χωρίσω:
Hum Sweet Hum
Αρχικά, το σενάριό μου διαχωρίζει κάθε λέξη σε μεμονωμένα γράμματα και τα τυλίγει σε ένα στοιχείο span με εφαρμοσμένα χαρακτηριστικά class και 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; }
Αλλά η μετάφραση είναι μόνο μια ιδιότητα που μπορώ να χρησιμοποιήσω για να μεταμορφώσω το κείμενο μου.
Θα μπορούσα επίσης να περιστρέψω αυτούς τους μεμονωμένους χαρακτήρες για μια ακόμη πιο χαοτική εμφάνιση: /* 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; }
Αλλά η μετάφραση είναι μόνο μια ιδιότητα που μπορώ να χρησιμοποιήσω για να μεταμορφώσω το κείμενο μου. Θα μπορούσα επίσης να περιστρέψω αυτούς τους μεμονωμένους χαρακτήρες για μια ακόμη πιο χαοτική εμφάνιση: /* 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)); } }
Πριν την εφαρμόσετε στα στοιχεία span που δημιουργήθηκαν από το Toon Text Splitter μου: .toon-char { animation: 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 - σκιές, πινελιές, αποκομμένα φόντα και μερικά περιορισμένα κινούμενα σχέδια - μπορούμε να αναδημιουργήσουμε το ίδιο αντίκτυπο. Λατρεύω το toon text όχι επειδή είμαι νοσταλγός, αλλά επειδή ο σχεδιασμός του είναι σκόπιμος. Κάντε συνειδητές επιλογές και αφήστε μια μικρή τυπογραφία κειμένου να προσθέσει γροθιά στα σχέδιά σας.
