การออกแบบตัวละคร 10 แบบที่สร้างขึ้นทั้งหมดด้วย HTML & CSS

ฉันแปลกใจอยู่เสมอว่าคุณสามารถใช้ CSS ทำอะไรได้บ้าง นักพัฒนาเว็บทราบดีว่า CSS ช่วยให้คุณสร้างเค้าโครงหน้าที่น่าทึ่งและเอฟเฟกต์แอนิเมชั่นที่กำหนดเองได้

แต่คุณสามารถใช้มันสำหรับโครงการสนุก ๆ มากมายได้เช่นกัน เช่น การสร้างการออกแบบตัวละครด้วย CSS เพียงอย่างเดียว ฟังดูแปลกใช่มั้ย?

มันแน่นอนอยู่แล้ว และฉันได้รวบรวมการออกแบบตัวละครที่แปลกประหลาดที่สุด (แต่เจ๋งที่สุด) บางส่วน ทั้งหมดทำจากโค้ด HTML & CSS แท้ 100%

1. แองกรี้เบิร์ดส์

ใครไม่ชอบ Angry Birds? พวกเขาเริ่มต้นจากเกมและได้รับภาพยนตร์ของตัวเองหลังจากเจาะวัฒนธรรมป๊อป

และปากกานี้โดย Rachel Bull พิสูจน์ให้เห็นว่า Angry Birds สามารถหาทางเข้าสู่ CSS ได้

น่าแปลกที่หน้าเว็บนี้มีรูปภาพหนึ่งภาพ และใช้เพื่อฝังประเภทที่กำหนดเองไว้ที่ด้านบนสุด องค์ประกอบอื่น ๆ ทั้งหมดตั้งแต่ส่วนโค้งของนกเหล่านั้นไปจนถึงการไล่ระดับสีแบบกำหนดเองทั้งหมดทำงานบน CSS ล้วนๆ

อาจไม่ใช่ข้อมูลโค้ดที่ใช้งานได้จริงที่สุด แต่เป็นแรงบันดาลใจอย่างแน่นอน

2. แฟรงเกนสไตน์

Frankenstein ของ Mary Shelley เป็นที่รู้จักอย่างกว้างขวางว่าเป็นสิ่งมีชีวิตที่มีผิวสีเขียวที่ได้รับการฟื้นฟู ถึงแม้ว่าในทางเทคนิคแล้วจะเป็น สัตว์ประหลาด ของแฟรงเกนสไตน์ แต่ก็ไม่ได้หลุดพ้นจากลิ้นมากนัก

และในขณะที่สิ่งมีชีวิตแฟรงเกนสไตน์นี้อาจตั้งชื่อผิดบ้าง แต่ก็ยังเป็นหนึ่งในการออกแบบตัวละครที่ดีที่สุดที่ฉันเคยเห็น

มันทำงานบน HTML เพียง 40 บรรทัดและนักพัฒนา Victoria Ninni Bergquist ได้เพิ่ม CSS บางส่วนเพื่อช่วยให้สัตว์ประหลาดกะพริบตา สวยเนี๊ยบ!

3. ทอยสตอรี่เอเลี่ยน

ทอยสตอรี่ของ Pixar มีตัวละครที่น่าจดจำมากมาย และพวกเอเลี่ยนที่แปลกประหลาดเหล่านี้ก็เป็นส่วนหนึ่งของนักแสดงอย่างแน่นอน

Sunyoung Park ได้สร้างปากกานี้ขึ้นเพื่อเป็นตัวอย่างสำหรับ CSS และเพื่อทดสอบขอบเขตของการเข้ารหัสส่วนหน้า ควรแสดงผลอย่างถูกต้องในเบราว์เซอร์หลักทั้งหมดและแม้แต่เบราว์เซอร์รุ่นเก่าบางตัว แม้ว่ามันจะอาศัยคุณสมบัติการหมุน () ค่อนข้างน้อย

โชคดีที่สิ่งนี้เป็นส่วนหนึ่งของคุณสมบัติการแปลง CSS ซึ่งรองรับเบราว์เซอร์ย้อนหลังไปถึง IE9+ ดังนั้นเอเลี่ยนตัวน้อยสีเขียวตัวนี้จึงสามารถสร้างความสุขให้กับโลกที่เชื่อมต่ออินเทอร์เน็ตได้เกือบทั้งหมด

4. อะคุอะคุ

หากคุณมี PlayStation คุณอาจรู้จัก Crash Bandicoot คนบ้าที่ชื่อ Aku Aku เป็นแบบจำลองที่สมบูรณ์แบบของหน้ากาก…สิ่งมีชีวิต…

แต่ละองค์ประกอบมี div ของตัวเองพร้อมคลาสที่เกี่ยวข้องซึ่งกำหนดคุณลักษณะนั้น (เช่น ตา ริมฝีปากจมูก)

ฉันจะบอกว่าส่วนที่ยากที่สุดของการออกแบบทั้งหมดนี้คือมงกุฎขนนกบนหัวของเขา รวมถึงแอนิเมชั่นสุดเจ๋งที่อาจกระตุ้นให้นักเล่นเกมเลือกเกม Crash แบบเก่าของพวกเขา

5. ลูกกระรอก

นี่เป็นอีกตัวอย่างที่ดีของแอนิเมชั่นผสมกับการออกแบบตัวละคร CSS

Josh Bader เขียนโค้ดอักขระ Squirtle นี้โดยใช้ CSS บริสุทธิ์และ HTML เพียง 15 บรรทัด ประทับใจ!

เพื่อให้ได้เอฟเฟกต์การเดิน Josh ต่อท้าย :after pseudo-class ในแต่ละองค์ประกอบด้วยแอนิเมชั่นซ้ำ ความสำเร็จที่เรียบง่ายอย่างน่าประหลาดใจเมื่อคุณมองภายใต้ประทุน และยิ่งน่าแปลกใจมากขึ้นที่ต้องใช้โค้ดเล็กๆ น้อยๆ เช่นนี้เพื่อสร้างอักขระเช่นนี้

6. Rick ไม่มี Morty

ในปากกานี้ คุณจะได้พบกับผลงานที่แปลกประหลาดของนักพัฒนา James Gilmore ผู้สร้าง Rick ที่เน้น chibi ใน CSS ล้วนๆ

การออกแบบใช้เงาดรอปของ CSS เพื่อสร้างความลึกและทำให้ตัวละครตัวนี้มีชีวิต ไม่ต้องพูดถึงแอนิเมชั่นที่เกิดซ้ำที่ผสมผสานอย่างลงตัวกับการออกแบบ

โปรดทราบว่าสิ่งนี้ยังทำงานบน Sass และหากคุณต้องการแก้ไข มีตัวแปรที่กำหนดเองในโค้ด มีรูปแบบที่ดีมาก ดังนั้นนี่จึงเป็นตัวอย่างข้อมูลที่ยอดเยี่ยมสำหรับการเรียนรู้ Sass

7. ไบรอัน กริฟฟิน

นี่คือการออกแบบตัวละครอื่นโดย Rachel Bull ตัวละครนี้มี Brian Griffin จาก Family Guy

น่าแปลกใจที่คุณจะได้รับรายละเอียดมากเพียงใดด้วย CSS ล้วนๆ สไตล์ทั้งหมดของ Brian เข้ากันได้ดีกับสไตล์ศิลปะของรายการ และใช้เงาที่ให้ความรู้สึกสมจริงอย่างเหลือเชื่อ

แม้ว่าอันนี้ค่อนข้างเทคนิคที่มี CSS มากกว่า 150 บรรทัดและมันใช้ไลบรารี่ Compass เพื่อบูต

8. เอ็มเม็ต

จาก The Lego Movie มันคือ Emmet ในทุกสง่าราศีของเขา Rachel สร้างตัวอย่างข้อมูลนี้ขึ้นมาใหม่อีกครั้งโดยใช้ CSS และ Haml ซึ่งเป็นวิธีที่ง่ายในการเขียน HTML สมัยใหม่

องค์ประกอบบางส่วนเหล่านี้มีความโดดเด่นพอๆ กับการรันบน CSS เพียงอย่างเดียว โดยเฉพาะอย่างยิ่งเส้นผมที่หมุนวนดูเหมือนชิ้นเลโก้พลาสติกจริงๆ บ้าไปแล้ว เป็นไปได้ด้วย!

มีตรรกะ Sass ที่ยอดเยี่ยมมากมายใน CSS และหากคุณเป็นนักพัฒนามือใหม่ คุณจะสนุกไปกับการใช้ปากกานี้ ทั้งรหัสและผลที่ได้นั้นรุ่งโรจน์

9. CSS อีวุย

สร้างขึ้นจากปรากฏการณ์ Pokemon Go คือ CSS Eevee บริสุทธิ์ที่สร้างโดย David Khourshid

มันใช้พื้นหลังและสไตล์เพจที่คล้ายคลึงกันเป็นแอปพลิเคชันในขณะที่สร้างโปเกมอนใหม่ทั้งหมดด้วย CSS บริสุทธิ์ ด้วยพื้นผิวเล็กน้อยและการเลเยอร์ที่ชาญฉลาด David ทำให้ Eevee นี้ดูเป็น 3D จริงๆ!

แอนิเมชั่นยังให้ความรู้สึกที่ดี และทำให้ทุกอย่างดูสมจริงยิ่งขึ้น ไม่ว่าคุณจะเป็นแฟนของโปเกมอนหรือไม่เคยแตะต้องเกมนี้ คุณต้องยอมรับว่านี่เป็นงานที่ดี

10. มิกกี้เมาส์

แม้ว่าหัวมิกกี้เมาส์นี้จะดูเรียบง่ายกว่าเล็กน้อย แต่ก็ทำได้ดีทีเดียว คุณอาจคิดว่ามันง่ายกว่าในการจัดการเพราะมันคงที่ อย่างไรก็ตาม ปากกาดัน Sass มากกว่า 450 เส้น

ส่วนทางเทคนิคส่วนใหญ่คือการจัดรูปทรงทั้งหมดให้เป็นระเบียบและจัดเรียงองค์ประกอบใหม่เพื่อให้จัดวางเรียงกันอย่างเหมาะสม

แต่ผลลัพธ์ก็ยอดเยี่ยม และคุณสามารถเห็นความคล้ายคลึงกับการ์ตูนมิกกี้ในยุคแรกๆ ได้

11. เจ้าหญิงเซลดา

ฉันได้บันทึกสิ่งที่ดีที่สุดไว้ด้วยการออกแบบตัวละคร Zelda นี้ ขาสั้นไปหน่อย แต่โดยรวมแล้วสไตล์ถูกต้อง

นักพัฒนา Charlie Marcotte ใช้ Sass และการแปลง CSS แบบกำหนดเองเพื่อจัดเรียงองค์ประกอบทั้งหมด นอกจากนี้ HTML ดิบยังถูกทำให้ง่ายขึ้นอีกเล็กน้อยด้วยตัวประมวลผลล่วงหน้าของ Pug

หากคุณกำลังพยายามที่จะผลักดันขีดจำกัดของความรู้ CSS ของคุณ ทำไมไม่ทำโครงการที่คล้ายกัน? เป็นวิธีที่ยอดเยี่ยมในการทดสอบทักษะของคุณ และคุณสามารถแบ่งปันสิ่งที่คุณสร้างในความคิดเห็นด้านล่างได้ตลอดเวลา