8 個用於創建令人驚嘆的 403 頁面的 CSS 和 JS 片段

網頁設計師已經習慣於將錯誤轉化為機會。 眾所周知，常見的、最廣泛出現（並且令人驚訝地可識別）的 HTTP 狀態代碼 404，又名“未找到”，是由開發人員強迫為項目帶來好處的。 在過去，它嚇跑了用戶，破壞了整體印象，是開發人員的噩夢。 每個人都希望它一勞永逸地消失。

今天，它是網站的重要細節。 WordPress 甚至有一個專門為其分配的模板。 “404 頁面”是用戶體驗不可或缺的元素。 在大多數情況下，它不僅具有精美的設計，而且還具有旨在為網站的整體美感做出貢獻的主題。

除了經過深思熟慮的設計、交互甚至動畫之外，它還包括有用的鏈接和幫助迷失的用戶重回正軌的假期。 然而，網頁設計中的“404”錯誤就像現實世界中的趕時髦的人：他們仍然用笨拙的眼鏡、“復古”襯衫和鬍鬚吸引我們的眼球，但它們對我們來說並不新鮮。 至於“403”錯誤，那就另當別論了。 它不像它的近親那麼受歡迎，但它仍然會發生，而且不是一次偶然。

僅作為背景，HTTP 狀態代碼 403，又名“403 Forbidden”，表示您無權訪問該頁面。 原因可能會有所不同，從不適當的文件夾權限開始，到對登錄憑據的平庸要求結束。 然而，經驗法則表明，任何錯誤都是實現改進的機會。 那麼，為什麼不將虛擬的“403 頁面”變成一個與“404 頁面”具有相同職責的地方呢？

讓我們考慮一下這種錯誤的十幾個精彩片段。 它們不僅是靈感的來源，也是即用型解決方案的來源。

你不可以過去

“你不能通過”——虛構世界中最強大的白鬍子巫師之一曾經說過（我希望所有鄧布利多的粉絲都原諒我）。 Gandalf the Gray 的最後一句話（注意 Grey，不是 White）完全符合這裡的上下文。 Noah Rodenbeek、A van Hagen 和 Jhey 在實踐中證明了這一點。 他們的代碼片段充滿了《霍比特人》小說的精神和魅力。 雖然前兩位藝術家用他的工作人員重新創造了甘道夫，但後者只是暗示了現場，但相當成功。

霍多爾 403

如果上述虛構小說的主題對您來說還不夠，那麼您應該將目光投向 Yasio 的這段代碼片段。 驚喜-驚喜，他從喬治·RR·馬丁的系列奇幻小說中得到靈感。 他提出了一個名為 HODOR 403 的作品。我相信對於大多數人來說，這個解決方案是不言自明的。 剩下的，我建議切換到 HBO 並親自看看為什麼這個虛構角色與這種類型的錯誤完美匹配。

插圖和動畫的使用

我們列表中的其他解決方案以“403”象徵禁區的概念為指導，因此重新創建動畫和靜態 CSS 插圖就是考慮到這個想法。

Error 403 – Forbidden by Aimie 描繪了童話中的經典場景。 在黑暗中出現的動畫蝙蝠、女巫的房子、光禿禿的樹木和令人毛骨悚然的字體在這里肯定能起到作用。

403 Forbidden by Dylan 和 403 Forbidden by Visual Composer 有一些獨特的中世紀魅力。 “關上大門”：這些項目喚起了這些聯想。 第一個以經典的木製防護門為特色，在您眼前關閉； 第二個也適用於守衛門主題，描繪了一種帶有齒輪和鏈條的機制，可以揭示禁止的標誌。

Arturo Wibawa 對禁區的構想是通過中國著名的“紫禁城”（即現在的故宮博物院）的奇妙、高度詳細甚至部分動畫的 CSS 插圖呈現的。

它在看著你

Mariana 的 403 Forbidden Page 以一個異想天開的怪物般的角色為標誌，由於方向感知效果，該角色隨您的鼠標光標隨處可見。 它重現了一種一直被監視的感覺。 它還模仿了一個不允許前進的花哨的仙女守衛。 儘管吉祥物看起來很“險惡”，但這個項目感覺很有趣。

堅持不懈

Gabriele Corti 還提供了“403”錯誤頁面的願景。 他的“持久性是關鍵”項目描述了最初拒絕訪問並在正確的用戶操作後授予訪問權限的整個過程。 正確的操作意味著將鑰匙插入鑰匙孔 然而，您始終可以將此概念用作一些高級操作（如輸入登錄名和密碼）的基礎。

保持簡單

lsgrrd 的 403 是對當然有權存在的“403 頁面”的過度簡化。 它是最小的，但直截了當。 它具有一定的數字質量，散發出計算機領域固有的技術氛圍。 最後閃爍的光標與數字排版一起產生了奇妙的效果。 該解決方案乾淨、優雅且直接。

你有在名單中嗎？

我們將以 Cassidy Williams 的項目結束我們的系列。 與這裡的大多數人不同，這個解決方案是來自現實世界的隱喻，它說明了任何流行夜總會的典型情況。 保鏢是這個代碼片段的核心和靈魂。 角色甚至部分動畫，使一切看起來栩栩如生。

吸引用戶的另一個機會

說實話，“403 錯誤”沒有“404 錯誤”那麼普遍，也沒有那麼流行和可識別。 儘管如此，它仍然存在並且一次又一次地發生。 這會在網站上造成一個漏洞，從而破壞整個用戶體驗。 所以，抓住機會，把它變成項目的有效部分。 它無疑會贏得一些新訪客，並防止您失去舊訪客。