8 CSS & JS Snippets สำหรับการสร้างหน้า 403 อันน่าทึ่ง

นักออกแบบเว็บไซต์เคยชินกับการเปลี่ยนข้อผิดพลาดให้เป็นโอกาส ไม่เป็นความลับที่รหัสสถานะ HTTP 404 ที่พบได้บ่อยที่สุด (และเป็นที่รู้จักอย่างน่าประหลาดใจ) หรือที่เรียกว่า "ไม่พบ" นั้นถูกบังคับโดยนักพัฒนาให้นำประโยชน์มาสู่โครงการ ในอดีตมันทำให้ผู้ใช้กลัว ทำลายความประทับใจโดยรวม และเป็นฝันร้ายสำหรับนักพัฒนา ทุกคนอยากให้มันหายไปทันทีและตลอดไป

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

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

สำหรับพื้นหลังเท่านั้น รหัสสถานะ HTTP 403 หรือที่เรียกว่า “403 Forbidden” หมายความว่าคุณไม่ได้รับอนุญาตให้เข้าถึงหน้า เหตุผลอาจแตกต่างกันไป โดยเริ่มด้วยการอนุญาตโฟลเดอร์ที่ไม่เหมาะสมและลงท้ายด้วยข้อกำหนดซ้ำซากของข้อมูลรับรองการเข้าสู่ระบบ อย่างไรก็ตาม กฎทั่วไปกำหนดว่าข้อผิดพลาดใด ๆ เป็นโอกาสที่จะทำให้เกิดการปรับปรุง เหตุใดจึงไม่เปลี่ยนหน้าจำลอง “หน้า 403” ให้เป็นสถานที่ทำหน้าที่เดียวกับหน้า “หน้า 404” ล่ะ?

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

คุณจะไม่ผ่าน

“คุณจะไม่ผ่าน” – ครั้งหนึ่งเคยกล่าวไว้โดยหนึ่งในพ่อมดที่มีเคราขาวที่ทรงอิทธิพลที่สุดในโลกเรื่องสมมติ (ฉันหวังว่าแฟน ๆ ของดัมเบิลดอร์ทุกคนจะยกโทษให้ฉันสำหรับเรื่องนี้) วลีสุดท้ายของ Gandalf the Grey (หมายเหตุ Grey ไม่ใช่ White) เข้ากับบริบทที่นี่อย่างสมบูรณ์แบบ และ Noah Rodenbeek, A van Hagen และ Jhey ได้สาธิตสิ่งนี้ในทางปฏิบัติ ตัวอย่างโค้ดของพวกเขาเต็มไปด้วยจิตวิญญาณและเสน่ห์ของนวนิยายเรื่อง “The Hobbit” ในขณะที่ศิลปินสองคนแรกสร้างแกนดัล์ฟขึ้นใหม่พร้อมกับทีมงานของเขา แต่คนหลังก็พูดเป็นนัยถึงที่เกิดเหตุ แต่ก็ค่อนข้างประสบความสำเร็จ

HODOR 403

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

การใช้ภาพประกอบและแอนิเมชั่น

โซลูชันอื่นๆ ในรายการของเราได้รับคำแนะนำจากแนวคิดที่ว่า “403” เป็นสัญลักษณ์ของพื้นที่ต้องห้าม ดังนั้นภาพประกอบ CSS แบบเคลื่อนไหวและแบบคงที่จึงถูกสร้างขึ้นใหม่โดยคำนึงถึงแนวคิดนี้

ข้อผิดพลาด 403 – Forbidden by Aimie แสดงฉากคลาสสิกจากเทพนิยาย ค้างคาวที่เคลื่อนไหวได้ บ้านแม่มด ต้นไม้เปล่า และรูปแบบตัวอักษรที่น่าขนลุกซึ่งปรากฏให้เห็นในช่วงเวลาแห่งความมืดมนล้วนเป็นจุดเด่นที่นี่

403 Forbidden by Dylan และ 403 Forbidden by Visual Composer มีเสน่ห์ในยุคกลางที่ไม่เหมือนใคร “ปิดประตู”: โครงการทำให้เกิดความสัมพันธ์เหล่านี้ อันแรกมีประตูรั้วไม้แบบคลาสสิกที่ปิดลงต่อหน้าต่อตาคุณ ส่วนที่สองยังไปที่หัวข้อประตูยามและแสดงกลไกที่มีฟันเฟืองและโซ่ที่เผยให้เห็นป้ายต้องห้าม

วิสัยทัศน์ของ Arturo Wibawa เกี่ยวกับพื้นที่ต้องห้ามถูกนำเสนอผ่านภาพประกอบ CSS ที่น่าอัศจรรย์ มีรายละเอียดสูง และแม้แต่ภาพเคลื่อนไหวบางส่วนของ 'The Purple Forbidden City' ของจีนหรือที่รู้จักกันในนาม Palace Museum ในปัจจุบัน

มันกำลังเฝ้าดูคุณอยู่

403 Forbidden Page โดย Mariana ถูกทำเครื่องหมายด้วยตัวละครที่เหมือนสัตว์ประหลาดแปลก ๆ ที่ต้องขอบคุณเอฟเฟกต์ที่รู้ทิศทางตามเคอร์เซอร์ของเมาส์ไปทุกที่ มันสร้างความรู้สึกของการถูกจับตามองตลอดเวลา นอกจากนี้ยังเลียนแบบนางฟ้าการ์ดแฟนซีที่ไม่ยอมให้ก้าวไปข้างหน้า โปรเจ็กต์รู้สึกสนุกสนานทั้งๆ ที่หน้าตาของมาสคอต “ดูอันตราย”

ตะบัน

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

ทำให้มันง่าย

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

คุณอยู่ในรายชื่อหรือไม่?

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

โอกาสอื่นในการมีส่วนร่วมกับผู้ใช้

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