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 错误”那么普遍，也没有那么流行和可识别。 尽管如此，它仍然存在并且一次又一次地发生。 这会在网站上造成一个漏洞，从而破坏整个用户体验。 所以，抓住机会，把它变成项目的有效部分。 它无疑会赢得一些新访客，并防止您失去旧访客。