หลังจากเสร็จสิ้นโปรเจ็กต์ที่ต้องการให้ฉันเรียนรู้ทุกอย่างที่ทำได้เกี่ยวกับแอนิเมชั่น CSS และ SVG ฉันเริ่มเขียนซีรีส์นี้เกี่ยวกับ Smashing Animations และ “How Classic Cartoons Inspire Modern CSS” เพื่อส่งท้ายปีนี้ ฉันอยากจะแสดงให้คุณเห็นถึงวิธีใช้ CSS สมัยใหม่เพื่อสร้างองค์ประกอบที่ทำให้ Toon Titles มีอิทธิพลอย่างมาก นั่นคือตัวพิมพ์ ชื่อเรื่อง การออกแบบงานศิลปะ ในยุคเงียบงันของทศวรรษ 1920 และต้นทศวรรษ 1930 ตัวอักษรของชื่อเรื่องของภาพยนตร์สร้างอารมณ์ จัดฉาก และเตือนผู้ชมถึงประเภทภาพยนตร์ที่พวกเขาจ่ายเงินเพื่อดู
การ์ดไตเติ้ลการ์ตูนยังรวมถึงการสร้างแบรนด์ อารมณ์ และการจัดฉาก ทั้งหมดนี้รวมอยู่ในที่เดียว ในช่วงปีแรกๆ เมื่องบประมาณสตูดิโอหลักๆ มีมากขึ้น การ์ดไตเติ้ลเหล่านี้มักมีภาพประกอบและเป็นจิตรกร
แต่เมื่อโทรทัศน์เฟื่องฟูในช่วงทศวรรษ 1950 งบประมาณก็ลดลง และการ์ดที่ออกแบบโดยศิลปินอย่าง Lawrence “Art” Goble ได้นำภาษาภาพแบบใหม่มาใช้ ทำให้มีภาพกราฟิกมากขึ้น มีสไตล์ และซับซ้อนน้อยลง หมายเหตุ: Lawrence “Art” Goble เป็นหนึ่งในวีรบุรุษแห่งแอนิเมชั่นอเมริกันในช่วงกลางศตวรรษที่มักถูกมองข้าม เขาทำงานให้กับ Hanna-Barbera เป็นหลักในช่วงปีที่มีอิทธิพลมากที่สุดในช่วงทศวรรษ 1950 และ 1960 Goble ไม่ใช่นักสร้างตัวละคร บทบาทของเขาคือการสร้างบรรยากาศ เขาจึงออกแบบสภาพแวดล้อมสำหรับ The Flintstones, Huckleberry Hound, Quick Draw McGraw และ Yogi Bear รวมถึงการ์ดไตเติ้ลเปิดเรื่องที่กำหนดโทนเสียง การ์ดไตเติ้ลของเขาซึ่งมีภาพวาดพร้อมโลโก้ซ้อนทับ ช่วยกำหนดรูปลักษณ์อันเป็นเอกลักษณ์ของ Hanna-Barbera งานศิลปะของ Goble สำหรับตัวละครเช่น Quick Draw McGraw และ Yogi Bear ได้ผลบนหน้าจอทีวีขนาดเล็ก แทนที่จะสร้างภาพนิ่งจากการ์ตูน เขามุ่งเน้นไปที่การนำเสนอแนวคิดเดียวที่แข็งแกร่ง ซึ่งมักจะอยู่ในภาพเงาดำ ซึ่งจับแก่นแท้ของความคิดนั้น ใน “The Buzzin’ Bear” โยคีส่งเสียงหึ่งๆ บนเฮลิคอปเตอร์ เขาเด้งออกไปพร้อมกับตะกร้าปิคนิคในมือใน "Bear on a Picnic" และสำหรับ "Prize Fight Fright" โยคีใส่กรอบข้อความชื่อเรื่อง
เฟรมเดี่ยวของ Goble ต้องอาศัยการเคลื่อนไหวเพียงเล็กน้อยหรือไม่ต้องอาศัยเลย เพื่อสร้างอารมณ์ จัดฉาก และบรรยายเรื่องราว พวกเขาทำเช่นนี้โดยใช้สีเรียบๆ รูปทรงกราฟิก และตัวพิมพ์ที่มักถูกรวมเข้ากับงานศิลปะ
ในฐานะนักออกแบบที่ทำงานบนเว็บ ชื่อการ์ตูนสามารถสอนเราได้มากมายเกี่ยวกับวิธีการถ่ายทอดบุคลิกภาพของแบรนด์ สร้างความประทับใจแรกพบ และกำหนดความคาดหวังสำหรับประสบการณ์ของใครบางคนในการใช้ผลิตภัณฑ์หรือเว็บไซต์ เราสามารถเรียนรู้จากเทคนิคของศิลปินในการสร้างแบนเนอร์ที่มีประสิทธิภาพ ส่วนหัวของหน้า Landing Page และแม้แต่หน้าจอเริ่มต้นที่ดี การพิมพ์ชื่อเรื่องตูน การ์ดไตเติ้ลการ์ตูนแสดงให้เห็นว่าการผสานประเภทเข้ากับรูปภาพช่วยเจาะจงส่วนหัวหรือความต้องการของฮีโร่ได้อย่างไร ด้วยข้อความเงา การลากเส้นข้อความ และเทคนิคการแปลงจำนวนหนึ่ง CSS สมัยใหม่ช่วยให้คุณใช้ประโยชน์จากพลังงานเดียวกันนั้นได้
เครื่องกำเนิดชื่อข้อความ Toon ระหว่างที่เขียนบทความนี้ ฉันพบว่าการมีเครื่องมือสำหรับสร้างข้อความที่มีสไตล์เหมือนกับชื่อการ์ตูนที่ฉันชอบมากคงจะมีประโยชน์ ดังนั้นฉันจึงทำอันหนึ่ง เครื่องมือสร้างชื่อข้อความ My Toon ให้คุณทดลองกับสี ลายเส้น และเงาข้อความหลายแบบ คุณสามารถปรับลำดับการทาสี ใช้การเว้นวรรคตัวอักษร ดูตัวอย่างข้อความของคุณในแบบอักษรตัวอย่างที่เลือก จากนั้นคัดลอก CSS ที่สร้างขึ้นไปยังคลิปบอร์ดของคุณโดยตรงเพื่อใช้ในโปรเจ็กต์ ตูนชื่อเรื่อง CSS คุณสามารถคัดลอกและวาง CSS ที่เครื่องมือสร้างชื่อข้อความ Toon มอบให้คุณได้ แต่ลองดูว่ามันทำอะไรได้บ้าง เงาข้อความ ดูประเภทในชื่อนี้จากตอนของ Augie Doggie เรื่อง “Yuk-Yuk Duck” ที่มีตัวอักษรสีเหลืองอ่อนและเงาที่เข้มและแข็งซึ่งยกมันออกจากพื้นหลังและสร้างภาพลวงตาของความลึก
คุณคงทราบอยู่แล้วว่าเงาข้อความยอมรับค่าสี่ค่า: (1) แนวนอนและ (2) ออฟเซ็ตแนวตั้ง (3) ภาพเบลอ และ (4) สีที่อาจเป็นสีทึบหรือกึ่งโปร่งใส ค่าออฟเซ็ตเหล่านั้นอาจเป็นค่าบวกหรือลบได้ ดังนั้นฉันจึงสามารถจำลอง "เป็ด Yuk-Yuk" โดยใช้เงาแข็งที่ดึงลงและไปทางขวา: สี: #f7f76d; ข้อความเงา: 5px 5px 0 #1e1904;
ในทางกลับกัน ชื่อ “Pint Giant” นี้ให้ความรู้สึกที่แตกต่างออกไปโดยมีเงากึ่งลบที่เป็นลบ: สี: #c2a872; ข้อความเงา: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
หากต้องการเพิ่มความลึกและสร้างเอฟเฟกต์ที่น่าสนใจมากขึ้น ฉันสามารถซ้อนเงาหลายชั้นได้ สำหรับ “Let’s Duck Out” ฉันรวมเงาสี่สีเข้าด้วยกัน โดยภาพแรกเป็นเงาทึบที่มีการชดเชยแนวนอนเป็นลบเพื่อยกข้อความออกจากพื้นหลัง ตามด้วยเงาที่นุ่มนวลขึ้นเรื่อยๆ เพื่อสร้างภาพเบลอรอบๆ: สี: #6F4D80; ข้อความเงา: -5px5px 0 #260e1e, /* เงา 1 */ 0 0 15px #e9ce96, /* เงา 2 */ 0 0 30px #e9ce96, /* เงา 3 */ 0 0 30px #e9ce96; /* เงา 4 */
เงาเหล่านี้แสดงให้เห็นว่าการใช้เงาข้อความไม่ใช่แค่การสร้างเอฟเฟกต์แสงเท่านั้น แต่ยังสามารถใช้เป็นการตกแต่งและเพิ่มบุคลิกภาพได้อีกด้วย ข้อความสโตรค การ์ดไตเติ้ลการ์ตูนหลายใบมีตัวอักษรที่มีเส้นขอบหนาซึ่งทำให้โดดเด่นจากพื้นหลัง ฉันสามารถสร้างเอฟเฟกต์นี้ขึ้นมาใหม่ได้โดยใช้การลากเส้นข้อความ เป็นเวลานานมาแล้วที่คุณสมบัตินี้ใช้งานได้ผ่านคำนำหน้า -webkit- เท่านั้น แต่นั่นก็หมายความว่าตอนนี้ได้รับการรองรับในเบราว์เซอร์สมัยใหม่แล้ว
text- stroke เป็นการจดชวเลขสำหรับสองคุณสมบัติ ตัวแรกคือความกว้างของเส้นขีดข้อความ วาดเส้นขอบรอบตัวอักษรแต่ละตัว ในขณะที่ตัวที่สองคือสีเส้นขีดข้อความจะควบคุมสี สำหรับ “Whatever Goes Pup” ฉันเพิ่มเส้นขีดสีน้ำเงิน 4px ให้กับข้อความสีเหลือง: สี: #eff0cd; -webkit-ข้อความจังหวะ: 4px #7890b5; จังหวะข้อความ: 4px #7890b5;
เส้นโครงร่างจะมีประโยชน์อย่างยิ่งเมื่อรวมเข้ากับเงา ดังนั้นสำหรับ "การเติบโต การเติบโต หายไป" ฉันจึงเพิ่มเส้นบางๆ ขนาด 3px ให้กับเงาขนาด 1px ที่แทบจะเบลอเพื่อสร้างเอฟเฟกต์ข้อความสามมิตินี้: สี: #fbb999; ข้อความเงา: 3px 5px 1px #5160b1; -webkit-ข้อความจังหวะ: 3px #984336; จังหวะข้อความ: 3px #984336;
สั่งทำสี การใช้การขีดข้อความไม่ได้ให้ผลลัพธ์ตามที่คาดหวังเสมอไป โดยเฉพาะกับตัวอักษรที่บางลงและเส้นขีดที่หนาขึ้น เนื่องจากตามค่าเริ่มต้นแล้ว เบราว์เซอร์จะวาดเส้นขีดทับการเติม น่าเศร้าที่ CSS ยังไม่อนุญาตให้ฉันปรับตำแหน่งจังหวะเหมือนที่ฉันเคยทำใน Sketch อย่างไรก็ตาม คุณสมบัติลำดับการทาสีมีค่าที่ช่วยให้ฉันสามารถวางเส้นขีดไว้ด้านหลัง แทนที่จะวางไว้ข้างหน้าการเติม
ลำดับการทาสี: ขีด ทาสีเส้นขีดก่อน จากนั้นจึงเติม ในขณะที่ลำดับการทาสี: เติมจะตรงกันข้าม: สี: #fbb999; ลำดับสี: เติม; ข้อความเงา: 3px 5px 1px #5160b1; ข้อความจังหวะสี:#984336; ข้อความจังหวะความกว้าง: 3px;
เส้นขีดที่มีประสิทธิภาพช่วยให้ตัวอักษรสามารถอ่านได้ เพิ่มน้ำหนัก และเมื่อรวมกับเงาและลำดับการลงสี จะทำให้ข้อความแบบเรียบดูสมจริง พื้นหลังภายในข้อความ การ์ดไตเติ้ลการ์ตูนจำนวนมากมีมากกว่าสีเรียบๆ โดยการเพิ่มพื้นผิว การไล่ระดับสี หรือรายละเอียดภาพประกอบให้กับตัวอักษร บางครั้งนั่นเป็นพื้นผิว บางครั้งก็อาจเป็นการไล่ระดับสีที่มีการเปลี่ยนโทนสีเล็กน้อย บนเว็บ ฉันสามารถสร้างเอฟเฟกต์นี้ขึ้นมาใหม่ได้โดยใช้ภาพพื้นหลังหรือการไล่ระดับสีด้านหลังข้อความ จากนั้นจึงตัดให้เป็นรูปร่างของตัวอักษร ขึ้นอยู่กับคุณสมบัติสองประการที่ทำงานร่วมกัน: พื้นหลังคลิป: ข้อความ และข้อความเติมสี: โปร่งใส
ขั้นแรก ฉันใช้พื้นหลังด้านหลังข้อความ ซึ่งอาจเป็นภาพบิตแมปหรือเวกเตอร์ หรือการไล่ระดับสี CSS สำหรับตัวอย่างนี้จากตอน Quick Draw McGraw “Baba Bait” ข้อความชื่อเรื่องมีการไล่ระดับสีจากมืดไปสว่าง: พื้นหลัง: การไล่ระดับสีเชิงเส้น (0deg, #667b6a, #1d271a);
ต่อไป ฉันตัดพื้นหลังนั้นให้เป็นร่ายมนตร์และทำให้ข้อความโปร่งใสเพื่อให้พื้นหลังแสดงผ่าน: -webkit-พื้นหลังคลิป: ข้อความ; -webkit-text-fill-color: โปร่งใส;
เพียงสองบรรทัดนี้ พื้นหลังจะไม่ถูกวาดไว้ด้านหลังข้อความอีกต่อไป แต่มันถูกทาสีไว้ข้างในแทน เทคนิคนี้ใช้ได้ผลดีเป็นพิเศษเมื่อใช้ร่วมกับลายเส้นและเงา การไล่ระดับสีแบบตัดจะทำให้ตัวอักษรมีสีและพื้นผิว การลากเส้นทำให้ขอบคมชัด และเงาจะยกระดับจากพื้นหลัง พวกเขาร่วมกันสร้างรูปลักษณ์แบบเลเยอร์ของการ์ดไตเติ้ลที่วาดด้วยมือโดยใช้ CSS เพียงเล็กน้อย และเช่นเคย ให้ทดสอบข้อความที่คลิปไว้อย่างระมัดระวัง เนื่องจากบางครั้งลักษณะเฉพาะของเบราว์เซอร์อาจส่งผลต่อเงาและการเรนเดอร์ได้ การแยกข้อความออกเป็นอักขระแต่ละตัว บางครั้งฉันไม่ต้องการจัดสไตล์ทั้งคำหรือหัวเรื่อง ฉันต้องการจัดสไตล์ตัวอักษรแต่ละตัว เพื่อดันตัวละครให้เข้าที่ เพิ่มน้ำหนักให้กับสัญลักษณ์หนึ่งตัว หรือทำให้ตัวอักษรสองสามตัวเคลื่อนไหวแยกกัน ใน HTML และ CSS ธรรมดา มีเพียงวิธีเดียวเท่านั้นที่จะทำเช่นนั้นได้ นั่นคือ ล้อมอักขระแต่ละตัวไว้ในองค์ประกอบ span ของมันเอง ฉันสามารถทำเช่นนั้นได้ด้วยตนเอง แต่นั่นจะเปราะบาง บำรุงรักษายาก และจะพังอย่างรวดเร็วเมื่อมีการเปลี่ยนแปลงการคัดลอก เมื่อฉันต้องการการควบคุมต่อตัวอักษร ฉันจะใช้ไลบรารีการแยกข้อความเช่น splt.js แทน (แม้ว่าจะมีวิธีแก้ไขปัญหาอื่นให้เลือกก็ตาม) การดำเนินการนี้ใช้โหนดข้อความและล้อมคำหรืออักขระโดยอัตโนมัติ ทำให้ฉันมีตะขอเพิ่มเติมในการสร้างภาพเคลื่อนไหวและจัดสไตล์โดยไม่ทำให้มาร์กอัปของฉันยุ่งเหยิง มันเป็นแนวทางที่ทำให้ HTML ของฉันสามารถอ่านได้และสื่อความหมายได้ ในขณะเดียวกันก็ให้การควบคุมที่ละเอียดแก่ฉันเพื่อสร้างตัวพิมพ์ที่มีเอกลักษณ์และไม่สม่ำเสมอที่คุณเห็นในการ์ดไตเติ้ลการ์ตูนคลาสสิกขึ้นมาใหม่ อย่างไรก็ตามแนวทางนี้มาพร้อมกับคำเตือนในการเข้าถึงเนื่องจากโปรแกรมอ่านหน้าจอส่วนใหญ่จะอ่านโหนดข้อความตามลำดับ ดังนั้นสิ่งนี้:
ฮัม ฮัมหวาน ฮัม
…อ่านตามที่คุณคาดหวัง: ฮัม หวาน ฮัม
แต่สิ่งนี้:
ฮ คุณ ม
…สามารถตีความได้แตกต่างกันขึ้นอยู่กับเบราว์เซอร์และโปรแกรมอ่านหน้าจอ บางคนจะต่อตัวอักษรและอ่านคำศัพท์ให้ถูกต้อง บางตัวอาจหยุดชั่วคราวระหว่างตัวอักษร ซึ่งในกรณีที่เลวร้ายที่สุดอาจมีลักษณะดังนี้: “ฮ…” “คุณ…” “ม…”
น่าเศร้าที่โซลูชันการแยกบางโซลูชันไม่ได้ให้ผลลัพธ์ที่เข้าถึงได้เสมอไป ดังนั้นฉันจึงเขียนตัวแยกข้อความของตัวเอง splinter.js ซึ่งขณะนี้อยู่ในรุ่นเบต้า การแปลงจดหมายส่วนบุคคล หากต้องการเปิดใช้งาน Toon Text Splitter ฉันเพิ่ม data- คุณลักษณะให้กับองค์ประกอบที่ฉันต้องการแยก:
ฮัมเพลงหวาน
ขั้นแรก สคริปต์ของฉันแยกแต่ละคำออกเป็นตัวอักษรแต่ละตัวและล้อมไว้ในองค์ประกอบ span โดยใช้แอตทริบิวต์คลาสและ ARIA:
จากนั้นสคริปต์จะนำเนื้อหาเริ่มต้นขององค์ประกอบแยกและเพิ่มเป็นแอตทริบิวต์ aria เพื่อช่วยรักษาความสามารถในการเข้าถึง:
เมื่อนำคุณลักษณะของคลาสมาใช้แล้ว ฉันสามารถจัดสไตล์ตัวละครแต่ละตัวได้ตามที่ฉันเลือก
ตัวอย่างเช่น สำหรับ “Hum Sweet Hum” ฉันต้องการจำลองว่าตัวอักษรของมันเคลื่อนออกจากบรรทัดฐานอย่างไร หลังจากใช้ Toon Text Splitter ของฉันแล้ว ฉันกำหนดค่าการแปลที่แตกต่างกันสี่ค่าโดยใช้ตัวเลือก :nth-child หลายตัวเพื่อสร้างรูปลักษณ์แบบกึ่งสุ่ม: /* วันที่ 4, 8, 12... */ .toon-char:nth-child(4n) { แปล: 0 -8px; } /* วันที่ 1, 5, 9... */ .toon-char:nth-child(4n+1) { แปล: 0 -4px; } /* ที่ 2, 6, 10... */ .toon-char:nth-child(4n+2) { แปล: 0 4px; } /* วันที่ 3, 7, 11... */ .toon-char:nth-child(4n+3) { แปล: 0 8px; }
แต่การแปลเป็นเพียงคุณสมบัติเดียวที่ฉันสามารถใช้เพื่อแปลงข้อความการ์ตูนได้
ฉันยังสามารถหมุนตัวละครแต่ละตัวเพื่อให้ดูวุ่นวายมากยิ่งขึ้น: /* วันที่ 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { หมุน: -4deg; } /* วันที่ 1, 5, 9... */ .toon-char:nth-child(4n+1) { หมุน: -8deg; } /* ที่ 2, 6, 10... */ .toon-char:nth-child(4n+2) { หมุน: 4deg; } /* วันที่ 3, 7, 11... */ .toon-char:nth-child(4n+3) { หมุน: 8deg; }
แต่การแปลเป็นเพียงคุณสมบัติเดียวที่ฉันสามารถใช้เพื่อแปลงข้อความการ์ตูนได้ ฉันยังสามารถหมุนตัวละครแต่ละตัวเพื่อให้ดูวุ่นวายยิ่งขึ้น: /* วันที่ 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { หมุน: -4deg; }
/* วันที่ 1, 5, 9... */ .toon-char:nth-child(4n+1) { หมุน: -8deg; }
/* ที่ 2, 6, 10... */ .toon-char:nth-child(4n+2) { หมุน: 4deg; }
/* วันที่ 3, 7, 11... */ .toon-char:nth-child(4n+3) { หมุน: 8deg; }
และแน่นอน ฉันสามารถเพิ่มแอนิเมชั่นเพื่อเขย่าตัวละครเหล่านั้นและทำให้ชื่อเรื่องสไตล์การ์ตูนของฉันมีชีวิตขึ้นมาได้ ขั้นแรก ฉันสร้างภาพเคลื่อนไหวคีย์เฟรมที่หมุนอักขระ:
@keyframes กระตุก { 0%, 100% { แปลง: หมุน (var (- หมุนฐาน, 0deg)); } 25% { แปลง: หมุน (คำนวณ (var (-- ฐานหมุน, 0deg) + 3deg)); } 50% { แปลง: หมุน (คำนวณ (var (-- ฐานหมุน, 0deg) - 2deg)); } 75% { แปลง: หมุน (คำนวณ (var (-- ฐานหมุน, 0deg) + 1deg)); } }
ก่อนที่จะนำไปใช้กับองค์ประกอบ span ที่สร้างโดย Toon Text Splitter ของฉัน: .toon-ถ่าน { แอนิเมชั่น: jiggle 3s ความสะดวกในการเข้าออกที่ไม่มีที่สิ้นสุด; ต้นกำเนิดการเปลี่ยนแปลง: ตรงกลางด้านล่าง; }
และสุดท้าย ตั้งค่าจำนวนการหมุนและการหน่วงเวลาก่อนที่อักขระแต่ละตัวจะเริ่มกระตุก: .toon-char:nth-child(4n) { --ฐานหมุน: -2deg; } .toon-char:nth-child(4n+1) { --ฐานหมุน: -4deg; } .toon-char:nth-child(4n+2) { --ฐานหมุน: 2deg; } .toon-char:nth-child(4n+3) { --ฐานหมุน: 4deg; }
.toon-char: nth-child (4n) { ภาพเคลื่อนไหวล่าช้า: 0.1 วินาที; } .toon-char:nth-child(4n+1) { ภาพเคลื่อนไหวล่าช้า: 0.3 วินาที; } .toon-char:nth-child(4n+2) { ภาพเคลื่อนไหวล่าช้า: 0.5 วินาที; } .toon-char:nth-child(4n+3) { ภาพเคลื่อนไหวล่าช้า: 0.7 วินาที; }
หนึ่งเฟรมเพื่อสร้างความประทับใจ ศิลปินชื่อการ์ตูนมีกรอบเดียวที่จะสร้างความประทับใจ และการออกแบบตัวอักษรของพวกเขาก็มีความสำคัญพอๆ กับงานศิลปะที่พวกเขาวาด เช่นเดียวกับบนเว็บ ส่วนหัวหรือฮีโร่ที่ออกแบบมาอย่างดีพื้นที่ต้องการความชัดเจน ลักษณะเฉพาะ และความมั่นใจ ไม่ใช่แค่ภาพพื้นหลังเต็มความกว้างที่จางลง ด้วยคุณสมบัติ CSS ที่เลือกสรรมาอย่างดีบางส่วน เช่น เงา ลายเส้น พื้นหลังที่ถูกตัด และแอนิเมชันที่ถูกจำกัด เราสามารถสร้างผลกระทบแบบเดียวกันนั้นขึ้นมาใหม่ได้ ฉันชอบข้อความการ์ตูนไม่ใช่เพราะฉันคิดถึงแต่เพราะว่าการออกแบบนั้นตั้งใจ ตัดสินใจอย่างรอบคอบ และปล่อยให้ตัวพิมพ์ข้อความเป็นตัวการ์ตูนเพิ่มความโดดเด่นให้กับงานออกแบบของคุณ
