12 เอฟเฟกต์ Retro Neon ที่น่าทึ่งในการออกแบบเว็บ

วิวัฒนาการมาจากหลอด Geissler ป้ายนีออนเป็นลักษณะเฉพาะของอเมริกาตั้งแต่ช่วงปี ค.ศ. 1920 ถึง '60s เป็นเวลาหลายทศวรรษและได้สร้างยุคที่แตกต่างกันออกไป นั่นคือยุคของค่ำคืนที่สดใสและเต็มไปด้วยสีสันด้วยป้ายไฟนีออนในทุกมุม

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

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

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

ป้ายไฟนีออน Hot Ones โดย Aaron Minnamon

โปรเจ็กต์ของ Aaron Minnamon มีความรู้สึกที่ชัดเจนเกี่ยวกับสไตล์เมืองแบบอเมริกันในยุค 50 มันสดใส กล้าหาญ และกล้าหาญ มันดูสมจริง ต้องขอบคุณพฤติกรรมการทำซ้ำของป้ายไฟนีออนที่มีชื่อเสียงในการกะพริบตลอดเวลา แอนิเมชั่นขนาดเล็กแต่น่าประทับใจนี้ถูกทำให้มีชีวิตด้วยความช่วยเหลือของ HTML, SCSS และ JavaScript

ป้ายไฟนีออนเคลื่อนไหว CSS โดย Nodws / Neon จากลาสเวกัส โดย Riccardo Tartaglia

ทั้ง Nodws กับโปรเจ็กต์การเลี้ยงลูกที่ยอดเยี่ยมของเขา และ Riccardo Tartaglia กับ Neon ที่โดดเด่นจากลาสเวกัสต่างก็ใช้เส้นทางแบบดั้งเดิม พวกเขาได้แนวคิดที่เลียนแบบป้ายถนนนีออนแบบดั้งเดิมได้อย่างสมบูรณ์แบบ

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

ป้ายนีออนวินเทจ โดย Kyle Lavery

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

โครงการโดย Prima Utama Apriansyah

โครงการโดย Prima Utama Apriansyah มีเอฟเฟกต์นีออนที่เปิดเผยเมื่อวางเมาส์เหนือ มีสามสีให้เลือก: แดง น้ำเงิน และเหลือง แต่ละคนดูดีมาก ทุกอย่างสร้างด้วย HTML และ CSS ล้วนๆ – ไม่จำเป็นต้องใช้ JavaScript ข้อดีของโซลูชันนี้คือเอฟเฟกต์นีออนถูกซ่อนและสร้างความประทับใจให้ผู้เยี่ยมชมเมื่อเปิดเผย

Neon Grid Loaders โดย Mai El-Awini

โอเค นั่นก็เพียงพอแล้วสำหรับเอฟเฟกต์ข้อความ ลองพิจารณาวิธีอื่นๆ ในการเพิ่มเวทย์มนตร์เรืองแสงให้กับอินเทอร์เฟซ อีกทางเลือกหนึ่งคือการใช้สไตล์นีออนในการโหลดแอนิเมชั่น ดังที่ Mai El-Awini ได้ทำกับ Neon Grid Loaders

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

ปุ่มโดย Simone / ปุ่ม Neon โดย Elwin van den Hazel

รายละเอียดอินเทอร์เฟซอื่นๆ ยังสามารถใช้ประโยชน์จากสไตล์นีออนได้อีกด้วย ตัวอย่างเช่น พิจารณาปุ่มต่างๆ เนื่องจากคำกระตุ้นการตัดสินใจ "ผี" ยังคงเป็นที่นิยม เอฟเฟกต์นีออนจึงไม่อาจเหมาะกว่า

มีสองตัวอย่างโค้ดที่ยอดเยี่ยมให้ลองใช้: อันแรกสร้างโดย Simone และอีกอันสร้างโดย Elwin van den Hazel ทั้งคู่มีปุ่มนีออนที่เรียบง่าย แต่สง่างามและละเอียดอ่อน แม้ว่าอันแรกจะมืดมนเล็กน้อยเนื่องจากสีที่ไม่ออกเสียง แต่อันที่สองก็ดึงดูดสายตาได้ทันทีด้วยโทนสีน้ำเงินที่สดใสและเอฟเฟกต์เรืองแสง ทุกอย่างทำด้วย HTML และ CSS ล้วนๆ

กล่องโต้ตอบนีออน โดย Hugo DarbyBrown

คุณสามารถใช้สไตล์นีออนกับกล่องโต้ตอบได้เช่นกัน ลองดู Neon Dialog Boxes โดย Hugo DarbyBrown ผู้เขียนได้รวมแผงโต้ตอบทั่วไปสี่แผง พวกเขาดูกล้าหาญและน่าดึงดูด แต่ไม่มีเสียงกรีดร้องในทุกด้าน เอฟเฟกต์นีออนทำให้องค์ประกอบ UI ซ้ำซากจำเจ

neon hexagrid โดย Matei Copot / Neon Hex Particles – นันทนาการโดย Brett / ชั่วขณะหนึ่งโดย Gerard Ferrandez

แม้ว่าเราจะพิจารณาว่าสไตล์นีออนเป็นเอฟเฟกต์ที่สามารถนำไปใช้กับรายละเอียดแบบสแตนด์อโลนของเว็บไซต์ (เช่น ปุ่ม ตัวพิมพ์ หรือตัวโหลด) แต่ก็สามารถสร้างพื้นหลังที่เจ๋งสุดๆ ได้เช่นกัน พิจารณานีออน hexagrid โดย Matei Copot, Neon Hex Particles – นันทนาการโดย Brett และชั่วขณะหนึ่งโดย Gerard Ferrandez

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

แนวคิดของ Brett มีกลิ่นอายของความลึกลับ มันยังขึ้นอยู่กับรูปร่างหกเหลี่ยม แต่คราวนี้คุณยังสามารถดูภาพเคลื่อนไหวเปิดเผยได้อีกด้วย รูปแบบปรากฏขึ้นตรงกลางและขยายไปด้านข้าง มีแผงควบคุมที่คุณสามารถเล่นกับการตั้งค่าได้

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

ตัวอย่างที่เร่าร้อน

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

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

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