10 เอฟเฟกต์ CSS & HTML Retro Type ที่น่าทึ่ง

Hipstamatic, Spotify และตอนนี้ Adidas: ดูเหมือนว่าสังคมของเรามีความกระหายอย่างมากสำหรับวันเก่า ๆ และวิธีการเก่า ๆ บางทีตลาดของเราอาจจะอิ่มตัวด้วยทุกอย่างที่มีเทคโนโลยีสูงและนวัตกรรมที่เราเริ่มเบื่อ หรือบางทีอาจเป็นแค่ความคิดถึงซ้ำซากในสมัยก่อนเมื่อทุกอย่างดูเรียบง่าย เรียบง่าย และเป็นสีกุหลาบ ความหมกมุ่นในปัจจุบันกับทุกสิ่งทุกอย่างจากอดีตที่ผ่านมาเป็นที่ประจักษ์ชัด สามารถเห็นได้ทุกที่ และทรงกลมการออกแบบเว็บก็ไม่มีข้อยกเว้น

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

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

ยิ่งไปกว่านั้น คุณสามารถสร้างเอฟเฟกต์จากยุค 80 หรือ 90 ได้อย่างรวดเร็วด้วยความช่วยเหลือของ CSS/JS และ SVG ทั้งสามคน เพียงใช้เอฟเฟกต์กับคำใดก็ได้และรับผลลัพธ์ที่ต้องการในไม่กี่วินาที และคุณไม่จำเป็นต้องวุ่นวายกับการแก้ไขภาพหรือโปรแกรมที่เกี่ยวข้องกับการออกแบบ เช่น Photoshop หรือ Sketch เพื่อทำการปรับเปลี่ยน เรียบง่ายและสง่างามใช่ไหม

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

ออกจากประเทศ

เราอดไม่ได้ที่จะเริ่มต้นคอลเลกชันของเราด้วยข้อมูลโค้ดที่โดดเด่นนี้จาก Gabrielle Wee โครงการของเธอมีชื่อว่า Left the Country และได้รับแรงบันดาลใจจากภาพยนตร์สยองขวัญเรื่อง “Stranger Things” ของพี่น้อง Duffer Brothers นักออกแบบและนักพัฒนาจำนวนมากได้ทำซ้ำ Dribbble และ Codepen เต็มไปด้วยมืออาชีพในบทนำของรายการ มีแม้กระทั่งเครื่องกำเนิดที่พัฒนาโดย Nelson Cash ที่ให้คุณสร้างโลโก้ใหม่พร้อมข้อมูลของคุณและดาวน์โหลดภาพได้ แต่ถ้าคุณต้องการหลีกเลี่ยงทุกอย่างที่คงที่ ให้ลองใช้ข้อมูลโค้ดของ Wee ที่เป็นโซลูชัน HTML และ SCSS ล้วนๆ

ไม่มีตำแหน่งว่าง404

No Vacancy 404 โดย Riley Shaw เหมือนกับงานก่อนหน้าของ Gabrielle Wee รากของมันอยู่ในภาพลายเส้นอันมหัศจรรย์ที่ได้รับการปรับปรุงด้วยการสัมผัสที่เร่าร้อนและเอฟเฟกต์การกะพริบเพื่อความสมจริงยิ่งขึ้น มันเตือนเราถึงป้ายไฟนีออนที่สว่างไสวซึ่งเป็นที่นิยมมากขึ้นในช่วงกลางศตวรรษที่ผ่านมาในอเมริกา แม้ว่าพวกเขาอาจจะดูไม่สง่างามและประณีตเหมือนผลงานชิ้นเอกของไรลีย์ ชอว์ การแก้ปัญหาคือการอยู่ร่วมกันของความสง่างาม ความซับซ้อน และเสน่ห์แบบวินเทจ

ป้ายไฟนีออนวินเทจ

ต้องการเอฟเฟกต์ที่เร่าร้อนและกลิ่นอายแบบอเมริกันมากกว่านี้หรือไม่? ถ้าอย่างนั้นคุณควรหันมาสนใจ Vintage Neon Sign โดย Kyle Lavery รู้สึกเหมือนก้าวออกจากโฆษณาในยุค 60 ที่มีป้ายเรืองแสงมากเกินไป การผสมผสานที่ชาญฉลาดของหลอดที่มีเส้นผ่านศูนย์กลางต่างๆ เอฟเฟกต์เรืองแสงที่ยอดเยี่ยม จานสีที่ขัดแย้งกัน และแบบอักษรที่งดงามทำให้เกิดผลงานชิ้นเอกที่ขับเคลื่อนด้วยรหัสที่โดดเด่น

Splitting: Space Invaders

ย้อนกลับไปในยุค 80 และข้อมูลโค้ดที่มีเอฟเฟกต์การพิมพ์ที่สร้างขึ้นโดยคำนึงถึงช่วงเวลานี้ ประการแรกและสำคัญที่สุดคือยุค 80 และ 90 เป็นเรื่องเกี่ยวกับวิดีโอเกม วัยเด็กของเราน่ารักมาก และมาร์ติน พิตต์ ก็เป็นหนึ่งในคนที่เตือนใจเราเรื่องนั้นได้ การแยกตัวของเขา: Space Invaders นำเรากลับไปสู่วัยรุ่นของเรา การรับรู้นี้มีเสน่ห์ด้วยความรู้สึกในเชิงบวกและความสนุกสนาน มันดูน่ารักและชวนฝัน มันถูกสร้างขึ้นด้วยความช่วยเหลือของไลบรารี Splitting ซึ่งทำให้การจัดการกับ CSS เป็นเรื่องง่าย

เล่นกับ Retro Typography

ไม่มียุค 90 ที่ไม่มีเกมอาร์เคดที่เล่นในโฮมวิดีโอเกมคอนโซล Atari มันเป็นเพียงคำพ้องความหมายของยุค 80 และ 90 ใน Geek World และแม็กซ์ โคห์เลอร์ก็รู้ดี Codepen ของเขาที่อุทิศให้กับการออกแบบตัวอักษรย้อนยุคมีโลโก้ Atari ที่ทำซ้ำอย่างชำนาญ นอกจากนี้คุณยังจะได้พบกับเอฟเฟกต์อีกสี่แบบที่ทำให้ตัวอักษรมีความย้อนยุคที่น่ารื่นรมย์

ข้อความย้อนยุคใหม่ / การพิมพ์ตัวอักษรยุค 80 / 404 SVG

มีเอฟเฟกต์ข้อความที่ยอดเยี่ยมหลายอย่างในคอลเล็กชันของเราที่ชวนให้นึกถึงความทรงจำอันแสนหวานที่เกี่ยวข้องกับทีวี ตัวอย่างเช่น ข้อความย้อนยุคใหม่โดย Vladimir Jovanovic, Typography 80s โดย David Parker และ 404 SVG โดย Marcos Mellado ในขณะที่สองโปรเจ็กต์แรกใช้ตัวอักษรหนา พื้นผิวมันวาว สไตล์นีออน และสีที่รุนแรงสำหรับ VHS ช่วงแนะนำย้อนยุคแบบย้อนยุค แต่โครงการที่สองให้ความรู้สึกเรียบง่าย ธรรมดา และหยาบเล็กน้อย เช่นเดียวกับคลิปมิวสิควิดีโอบน MTV ในช่วงเวลานั้น

แบบอักษรวินเทจ / ชื่อวินเทจสุดเก๋

นี่จะไม่ใช่คอลเลกชันที่สมบูรณ์ของเอฟเฟกต์ตัวอักษรย้อนยุคหากไม่มีวิธีแก้ปัญหาแบบดั้งเดิม และเรามีข้อมูลโค้ดที่ยอดเยี่ยมสองอย่าง: Vintage Typeface โดย Thibault Jan Beyer และ Awesome Vintage Title โดย Kevin Nagata ทั้งคู่แสดงแบบอักษรวินเทจแบบดั้งเดิม เช่นเดียวกับที่เราเคยจินตนาการถึง: บางเฉียบด้วยรูปแบบตัวอักษรที่ยาวขึ้นเรื่อยๆ สัมผัสแบบอาร์ตเดคโคที่ละเอียดอ่อน และแน่นอน เงาที่เป็นหัวใจและจิตวิญญาณของงานศิลปะ ในขณะที่โครงการโดย Thibault Jan Beyer ดูคลาสสิกและสง่างาม โปรเจ็กต์โดย Kevin Nagata ดูค่อนข้างทันสมัยด้วยแฝงขี้เล่น

ย้อนเวลากลับไป

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

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