Sau khi hoàn thành một dự án yêu cầu tôi phải tìm hiểu mọi thứ có thể về hoạt hình CSS và SVG, tôi bắt đầu viết loạt bài này về Hoạt hình đập vỡ và “Phim hoạt hình cổ điển truyền cảm hứng cho CSS hiện đại như thế nào”. Để kết thúc năm nay, tôi muốn chỉ cho bạn cách sử dụng CSS hiện đại để tạo thành phần khiến Tiêu đề hoạt hình trở nên có sức ảnh hưởng lớn: kiểu chữ của chúng. Thiết kế tác phẩm nghệ thuật Trong kỷ nguyên phim câm những năm 1920 và đầu những năm 30, kiểu chữ trên thẻ tiêu đề của một bộ phim đã tạo ra tâm trạng, bối cảnh và nhắc nhở khán giả về thể loại phim mà họ đã trả tiền để xem.
Thẻ tiêu đề phim hoạt hình cũng bao gồm thương hiệu, tâm trạng và bối cảnh, tất cả hòa làm một. Trong những năm đầu, khi ngân sách của các hãng phim lớn lớn hơn, những thẻ tiêu đề này thường mang tính minh họa và mang tính hội họa.
Nhưng khi truyền hình bùng nổ trong những năm 1950, ngân sách giảm xuống và những tấm thiệp do các nghệ sĩ như Lawrence “Art” Goble thiết kế đã áp dụng một ngôn ngữ hình ảnh mới, trở nên đồ họa hơn, cách điệu hơn và ít phức tạp hơn. Lưu ý: Lawrence “Art” Goble là một trong những anh hùng thường bị bỏ qua của phim hoạt hình Mỹ giữa thế kỷ 20. Ông chủ yếu làm việc cho Hanna-Barbera trong những năm có ảnh hưởng nhất trong thập niên 1950 và 1960. Goble không phải là người làm hoạt hình nhân vật. Vai trò của anh ấy là tạo ra bầu không khí, vì vậy anh ấy đã thiết kế môi trường cho The Flintstones, Huckleberry Hound, Quick Draw McGraw và Yogi Bear, cũng như các thẻ tiêu đề mở đầu tạo nên không khí chung. Thẻ tiêu đề của anh ấy, có các bức tranh được phủ logo, đã giúp xác định hình thức mang tính biểu tượng của Hanna-Barbera. Tác phẩm nghệ thuật của Goble dành cho các nhân vật như Quick Draw McGraw và Yogi Bear đã có hiệu quả trên các màn hình TV nhỏ hơn. Thay vì tái tạo một ảnh tĩnh từ phim hoạt hình, anh ấy tập trung vào việc trình bày một ý tưởng mạnh mẽ, duy nhất - thường ở dạng hình bóng - nắm bắt được bản chất của nó. Trong “The Buzzin’ Bear”, Yogi bay ngang qua trên một chiếc trực thăng. Anh ấy bật đi, cầm chiếc giỏ chụp ảnh trong tay, trong “Bear on a Picnic” và đối với “Prize Fight Fright” của mình, Yogi đóng hộp văn bản tiêu đề.
Với rất ít hoặc không có chuyển động nào để dựa vào, các khung hình đơn lẻ của Goble phải tạo ra tâm trạng, dựng cảnh và mô tả một câu chuyện. Họ đã làm điều này bằng cách sử dụng màu sắc phẳng, hình dạng đồ họa và kiểu chữ thường được tích hợp vào tác phẩm nghệ thuật.
Là nhà thiết kế làm việc trên web, tiêu đề hoạt hình có thể dạy chúng ta nhiều điều về cách truyền tải cá tính của thương hiệu, tạo ấn tượng đầu tiên và đặt kỳ vọng về trải nghiệm của ai đó khi sử dụng sản phẩm hoặc trang web. Chúng ta có thể học hỏi từ kỹ thuật của các nghệ sĩ để tạo biểu ngữ hiệu quả, tiêu đề trang đích và thậm chí cả màn hình giật gân kiểu cũ. Kiểu chữ tiêu đề Toon Thẻ tiêu đề hoạt hình cho thấy cách kết hợp loại với hình ảnh mang lại sức mạnh mà tiêu đề hoặc anh hùng cần. Với một số thủ thuật tạo bóng văn bản, nét văn bản và chuyển đổi, CSS hiện đại cho phép bạn khai thác năng lượng tương tự.
Trình tạo tiêu đề văn bản Toon Trong quá trình viết bài này, tôi nhận ra rằng sẽ rất hữu ích nếu có một công cụ tạo văn bản có kiểu dáng giống như các tựa phim hoạt hình mà tôi vô cùng yêu thích. Thế nên tôi đã làm một cái. Trình tạo tiêu đề văn bản Toon của tôi cho phép bạn thử nghiệm màu sắc, nét và nhiều bóng văn bản. Bạn có thể điều chỉnh thứ tự màu vẽ, áp dụng khoảng cách giữa các chữ cái, xem trước văn bản của mình trong một loạt phông chữ mẫu, sau đó sao chép thẳng CSS đã tạo vào khay nhớ tạm để sử dụng trong dự án. CSS tiêu đề hoạt hình Bạn có thể chỉ cần sao chép-dán CSS mà Trình tạo tiêu đề văn bản Toon cung cấp cho bạn. Nhưng hãy xem xét kỹ hơn những gì nó làm. Bóng văn bản Hãy xem kiểu chữ trong tiêu đề này từ tập phim “Yuk-Yuk Duck” của Augie Doggie, với các chữ cái màu vàng nhạt và bóng tối, cứng, bù đắp giúp nâng nó lên khỏi nền và tạo ảo giác về chiều sâu.
Có thể bạn đã biết rằng bóng văn bản chấp nhận bốn giá trị: (1) độ lệch ngang và (2) độ lệch dọc, (3) độ mờ và (4) màu có thể đồng nhất hoặc bán trong suốt. Các giá trị offset đó có thể là dương hoặc âm, vì vậy tôi có thể sao chép “Yuk-Yuk Duck” bằng cách sử dụng bóng cứng kéo xuống và sang phải: màu: #f7f76d; bóng văn bản: 5px 5px 0 #1e1904;
Mặt khác, tựa đề “Pint Giant” này mang lại cảm giác khác biệt với bóng bán mềm tiêu cực: màu: #c2a872; bóng văn bản: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Để tăng thêm chiều sâu và tạo ra nhiều hiệu ứng thú vị hơn, tôi có thể tạo nhiều lớp bóng. Đối với “Let’s Duck Out”, tôi kết hợp bốn bóng: bóng đầu tiên đặc với độ lệch ngang âm để nâng văn bản lên khỏi nền, tiếp theo là các bóng mờ dần dần để tạo độ mờ xung quanh nó: màu: #6F4D80; bóng văn bản: -5px5px 0 #260e1e, /* Bóng 1 */ 0 0 15px #e9ce96, /* Bóng 2 */ 0 0 30px #e9ce96, /* Bóng 3 */ 0 0 30px #e9ce96; /* Bóng 4 */
Những bóng này cho thấy rằng việc sử dụng bóng văn bản không chỉ để tạo hiệu ứng ánh sáng mà còn có thể dùng để trang trí và tăng thêm cá tính. nét văn bản Nhiều thẻ tiêu đề phim hoạt hình có các chữ cái có đường viền đậm khiến chúng nổi bật so với nền. Tôi có thể tạo lại hiệu ứng này bằng cách sử dụng nét văn bản. Trong một thời gian dài, thuộc tính này chỉ khả dụng thông qua tiền tố -webkit-, nhưng điều đó cũng có nghĩa là thuộc tính này hiện được hỗ trợ trên các trình duyệt hiện đại.
nét văn bản là cách viết tắt của hai thuộc tính. Cái đầu tiên, chiều rộng nét văn bản, vẽ một đường viền xung quanh từng chữ cái, trong khi cái thứ hai, màu nét văn bản, kiểm soát màu của nó. Đối với “Anything Goes Pup”, tôi đã thêm nét viền màu xanh 4px vào văn bản màu vàng: màu: #eff0cd; -webkit-text-Stroke: 4px #7890b5; nét văn bản: 4px #7890b5;
Các nét có thể đặc biệt hữu ích khi chúng được kết hợp với bóng, vì vậy, đối với “Growing, Growing, Gone”, tôi đã thêm một nét mỏng 3px vào bóng 1px hầu như không mờ để tạo hiệu ứng văn bản ba chiều này: màu: #fbb999; bóng văn bản: 3px 5px 1px #5160b1; -webkit-text-Stroke: 3px #984336; nét văn bản: 3px #984336;
Thứ tự sơn Việc sử dụng nét văn bản không phải lúc nào cũng mang lại kết quả như mong đợi, đặc biệt với các chữ cái mỏng hơn và nét dày hơn, vì theo mặc định, trình duyệt sẽ vẽ một nét trên phần tô. Đáng buồn là CSS vẫn không cho phép tôi điều chỉnh vị trí nét vẽ như tôi thường làm trong Sketch. Tuy nhiên, thuộc tính Paint-order có các giá trị cho phép tôi đặt nét viền phía sau, thay vì phía trước, phần tô màu.
Paint-order: Stroke vẽ nét trước, sau đó là phần tô, trong khi đó Paint-order: fill thực hiện ngược lại: màu: #fbb999; thứ tự sơn: điền; bóng văn bản: 3px 5px 1px #5160b1; màu nét-văn bản:#984336; chiều rộng nét văn bản: 3px;
Một nét vẽ hiệu quả giúp các chữ cái dễ đọc, tăng thêm độ đậm và — khi kết hợp với bóng và thứ tự sơn — mang lại sự hiện diện thực sự cho văn bản phẳng. Hình nền bên trong văn bản Nhiều thẻ tiêu đề hoạt hình không chỉ có màu phẳng bằng cách thêm họa tiết, độ chuyển màu hoặc chi tiết minh họa vào chữ. Đôi khi đó là một kết cấu, đôi khi nó có thể là một gradient với sự thay đổi tông màu tinh tế. Trên web, tôi có thể tạo lại hiệu ứng này bằng cách sử dụng hình nền hoặc dải màu phía sau văn bản, sau đó cắt nó thành hình dạng của các chữ cái. Điều này dựa vào hai thuộc tính làm việc cùng nhau: clip nền: văn bản và màu tô văn bản: trong suốt.
Đầu tiên, tôi áp dụng nền phía sau văn bản. Đây có thể là hình ảnh bitmap hoặc vector hoặc độ dốc CSS. Đối với ví dụ này từ tập Quick Draw McGraw “Baba Bait”, văn bản tiêu đề bao gồm độ chuyển màu từ trên xuống dưới tinh tế từ tối sang sáng: nền: gradient tuyến tính(0deg, #667b6a, #1d271a);
Tiếp theo, tôi cắt nền đó thành các glyph và làm cho văn bản trong suốt để nền hiển thị xuyên suốt: -webkit-background-clip: văn bản; -webkit-text-fill-color: trong suốt;
Chỉ với hai dòng đó, nền không còn được vẽ phía sau văn bản nữa; thay vào đó, nó được sơn bên trong nó. Kỹ thuật này hoạt động đặc biệt tốt khi kết hợp với các nét và bóng. Một dải chuyển màu được cắt bớt cung cấp cho chữ cái màu sắc và kết cấu, một nét giữ cho các cạnh của nó sắc nét và một bóng nâng nó lên khỏi nền. Cùng nhau, họ tái tạo giao diện nhiều lớp của thẻ tiêu đề vẽ tay chỉ bằng một chút CSS. Như mọi khi, hãy kiểm tra văn bản được cắt bớt một cách cẩn thận, vì các lỗi của trình duyệt đôi khi có thể ảnh hưởng đến bóng và kết xuất. Tách văn bản thành các ký tự riêng lẻ Đôi khi tôi không muốn tạo kiểu cho toàn bộ từ hoặc tiêu đề. Tôi muốn tạo kiểu cho từng chữ cái - để đưa một ký tự vào đúng vị trí, tăng thêm trọng lượng cho một glyph hoặc tạo hoạt ảnh cho một vài chữ cái một cách độc lập. Trong HTML và CSS đơn giản, chỉ có một cách đáng tin cậy để làm điều đó: bọc từng ký tự trong phần tử span của chính nó. Tôi có thể làm điều đó một cách thủ công, nhưng điều đó sẽ dễ hỏng, khó bảo trì và sẽ nhanh chóng bị hỏng khi bản sao thay đổi. Thay vào đó, khi tôi cần kiểm soát từng chữ cái, tôi sử dụng thư viện phân tách văn bản như splt.js (mặc dù có sẵn các giải pháp khác). Việc này lấy một nút văn bản và tự động ngắt dòng các từ hoặc ký tự, cung cấp cho tôi thêm các móc nối để tạo hoạt ảnh và tạo kiểu mà không làm rối phần đánh dấu của tôi. Đó là một cách tiếp cận giúp HTML của tôi dễ đọc và có ngữ nghĩa, đồng thời mang lại cho tôi khả năng kiểm soát chi tiết mà tôi cần để tạo lại kiểu chữ không đồng đều, đặc trưng mà bạn thấy trong các thẻ tiêu đề hoạt hình cổ điển. Tuy nhiên, cách tiếp cận này đi kèm vớihãy cẩn thận về khả năng truy cập, vì hầu hết trình đọc màn hình đều đọc các nút văn bản theo thứ tự. Vì vậy, điều này:
Ừm ngọt ngào ừm
…đọc như bạn mong đợi: Hum ngọt ngào
Nhưng điều này:
H u m
…có thể được hiểu khác nhau tùy thuộc vào trình duyệt và trình đọc màn hình. Một số sẽ nối các chữ cái và đọc các từ một cách chính xác. Những người khác có thể tạm dừng giữa các chữ cái, trong trường hợp xấu nhất có thể nghe như sau: “H…” “Ư…” “M…”
Đáng buồn thay, một số giải pháp phân tách không mang lại kết quả luôn có thể truy cập được, vì vậy tôi đã viết bộ tách văn bản của riêng mình, splinter.js, hiện đang trong giai đoạn thử nghiệm. Chuyển đổi các chữ cái riêng lẻ Để kích hoạt Bộ tách văn bản Toon của tôi, tôi thêm thuộc tính data- vào phần tử tôi muốn tách:
Ngậm ngọt ngào
Đầu tiên, tập lệnh của tôi tách từng từ thành các chữ cái riêng lẻ và gói chúng trong phần tử span với các thuộc tính lớp và ARIA được áp dụng:
Sau đó, tập lệnh lấy nội dung ban đầu của phần tử phân tách và thêm nó làm thuộc tính aria để giúp duy trì khả năng truy cập:
Với các thuộc tính lớp đó được áp dụng, tôi có thể tạo kiểu cho từng ký tự mà tôi chọn.
Ví dụ: đối với “Hum Sweet Hum”, tôi muốn tái tạo cách các chữ cái của nó dịch chuyển ra khỏi đường cơ sở. Sau khi sử dụng Toon Text Splitter, tôi đã áp dụng bốn giá trị dịch khác nhau bằng cách sử dụng một số bộ chọn :nth-child để tạo giao diện bán ngẫu nhiên: /* Thứ 4, thứ 8, thứ 12... */ .toon-char:nth-child(4n) { dịch: 0 -8px; } /* Thứ 1, thứ 5, thứ 9... */ .toon-char:nth-child(4n+1) { dịch: 0 -4px; } /* Thứ 2, thứ 6, thứ 10... */ .toon-char:nth-child(4n+2) { dịch: 0 4px; } /* Thứ 3, thứ 7, thứ 11... */ .toon-char:nth-child(4n+3) { dịch: 0 8px; }
Nhưng dịch chỉ là một thuộc tính mà tôi có thể sử dụng để chuyển đổi văn bản hoạt hình của mình.
Tôi cũng có thể xoay các ký tự riêng lẻ đó để có cái nhìn hỗn loạn hơn: /* Thứ 4, thứ 8, thứ 12... */ .toon-line .toon-char:nth-child(4n) { xoay: -4deg; } /* Thứ 1, thứ 5, thứ 9... */ .toon-char:nth-child(4n+1) { xoay: -8deg; } /* Thứ 2, thứ 6, thứ 10... */ .toon-char:nth-child(4n+2) { xoay: 4deg; } /* Thứ 3, thứ 7, thứ 11... */ .toon-char:nth-child(4n+3) { xoay: 8deg; }
Nhưng dịch chỉ là một thuộc tính mà tôi có thể sử dụng để chuyển đổi văn bản hoạt hình của mình. Tôi cũng có thể xoay các ký tự riêng lẻ đó để có cái nhìn hỗn loạn hơn: /* Thứ 4, thứ 8, thứ 12... */ .toon-line .toon-char:nth-child(4n) { xoay: -4deg; }
/* Thứ 1, thứ 5, thứ 9... */ .toon-char:nth-child(4n+1) { xoay: -8deg; }
/* Thứ 2, thứ 6, thứ 10... */ .toon-char:nth-child(4n+2) { xoay: 4 độ; }
/* Thứ 3, thứ 7, thứ 11... */ .toon-char:nth-child(4n+3) { xoay: 8 độ; }
Và tất nhiên, tôi có thể thêm hoạt ảnh để lắc lư các nhân vật đó và làm cho tiêu đề kiểu văn bản hoạt hình của tôi trở nên sống động. Đầu tiên, tôi tạo hoạt ảnh khung hình chính để xoay các ký tự:
@keyframes lắc lư { 0%, 100% { biến đổi: xoay(var(--base-rotate, 0deg)); } 25% { biến đổi: xoay(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { biến đổi: xoay(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { biến đổi: xoay(calc(var(--base-rotate, 0deg) + 1deg)); } }
Trước khi áp dụng nó cho các phần tử span được tạo bởi Toon Text Splitter của tôi: .toon-char { hoạt hình: lắc lư 3 giây dễ dàng ra vào vô hạn; nguồn gốc biến đổi: đáy trung tâm; }
Và cuối cùng, đặt mức độ xoay và độ trễ trước khi mỗi ký tự bắt đầu lắc lư: .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; }
Một Khung Hình Để Tạo Ấn Tượng Các nghệ sĩ làm tiêu đề phim hoạt hình có một khung hình để tạo ấn tượng và kiểu chữ của họ cũng quan trọng như tác phẩm nghệ thuật mà họ vẽ. Điều này cũng đúng trên web. Tiêu đề hoặc anh hùng được thiết kế tốtkhu vực cần sự rõ ràng, đặc sắc và tự tin - không chỉ đơn giản là một hình nền có chiều rộng đầy đủ bị mờ. Với một số thuộc tính CSS được lựa chọn cẩn thận — bóng, nét, nền được cắt bớt và một số hoạt ảnh bị hạn chế — chúng ta có thể tạo lại tác động tương tự. Tôi thích văn bản hoạt hình không phải vì tôi hoài cổ mà vì thiết kế của nó có chủ ý. Hãy đưa ra những lựa chọn có chủ ý và để một chút kiểu chữ văn bản hoạt hình tạo điểm nhấn cho thiết kế của bạn.
