江门企业网站开发:Illustrated 404 Pages的HTML / CSS代码片段

2019.08.09 mf_web

81

你有多少次偶然发现了404 Page?一百,一百万次?总而言之,我们是比十年前更聪明的人,知道如何顺利上网,无忧无虑,但我们仍然犯错误,有时这些错误是如此愚蠢。但是,浏览器和网站都不是人工智能的机器,可以动态纠正它们。所以偶尔,我们必须处理错误页面。顺便提一下,在网络中可能出现的各种错误中,有三十多种在野外 - 404是最受欢迎的错误之一。

江门企业网站开发如果“404”对你没有任何意义:任何喜欢在线广阔之美的人都很高兴见到它一两次,你也不例外。404页面也被称为“没有找到” - 我敢打赌这听起来很熟悉。

一个完整的元素

404页面经常出现,似乎是网站不可或缺的一部分。你知道吗?现在确实如此。它被认为是任何网络项目的基本要素。考虑到这个页面在用户中如此受欢迎这一事实,开发人员已经找到了一种方法将其转换为一个不会破坏用户体验的有效播放器,相反,它可以节省它甚至增加它的味道。

因此,现在错误页面不仅仅是标题为“错误”的白色屏幕,仅此而已; 它们功能齐全,俏皮迷人。如果您是那些完全认识到这些页面的全部潜力的网站所有者之一,那么我们随时为您提供帮助。我们收集了梦幻般的代码段,设有十几个图示 404页。只需进行微小的更改,就可以轻松地将它们用于任何项目,以避免用户失望。我们将选择分为两部分。第一个包含纯HTML / CSS解决方案,第二个包含充满JavaScript功能的概念。

纯HTML / CSS代码片段

如果你是那些仍然相信没有任何专家帮助的HTML和CSS不能做魔术的人之一,那么准备好让我们感到惊讶,因为我们在这里有一些令人兴奋的例子。让我们从Darin的Yeti 404 Page开始,这真是令人惊讶。

这个概念不仅凭借其精彩的插图将自己与竞争对手分开,而且还提供了动态行为,使Yeti打开和关闭手电筒以突出404标志。这不是让用户留下而不是离开的有效方式吗?我相信它是。

Darin的Yeti 404 Page

在没有任何JavaScript帮助的情况下创建的404页面的另一个例子是404页面动画 - Valeriya缺少的书。Valeriya做得很好。她对错误页面的看法非常聪明。它结合了说明性方法和实用主义,为用户提供了有效的出路。

404页面动画 -  Valeriya缺少的书

Paolo Duzioni与观众分享了他极简主义的想法。他长途跋涉,整洁,干净,精致。它按照它说的做了:通知用户他们已经迷路了。页面底部的一个小行人让事情变得不那么沮丧了。

长的散步

如果这样的轻盈,清洁和极简主义确实符合您对404页面的愿景,那么我们还有更多。   404 - Nico van Zyl的Tridiv与Paolo Duzioni的概念具有相同的美学。然而,这一次艺术家选择了3d维度制作404标志从字面和比喻中脱颖而出。

 404  -  Nico van Zyl的Tridiv

如果前面的例子感觉有点简单和无色,那么你总是可以选择Sussie Casasola的错误404等完全说明的解决方案。她的概念看起来简直令人惊叹:渐变背景非常出色,发光的圆圈自然引起了人们的注意,404标志是另类的好消息。

Sussie Casasola的错误404

为了增加一些东西,让我们添加一些JavaScript魔法。

HTML / CSS和JavaScript代码片段

错误404页面与Filip Vitas的宇航员和Chris Samuels的404页面具有与Sussie Casasola的项目相同的艺术光环。虽然第一个代码片段以宇宙主题为中心,但第二个代码片段从航海主题中获得它的美感。这两个插图都很精彩,两个插图都巧妙地设置在运动中。尽管这种动作几乎不可察觉,但足以将插图提升到一个新的水平。

错误404页面与菲利普维塔斯的宇航员
错误404页面与菲利普维塔斯的宇航员
404页面由Chris Samuels提供
404页面由Chris Samuels提供

苏珊·李的动画404页面并不像前两个例子那样风景如画。然而,它肯定具有艺术氛围。它具有令人难以置信的几何吸引力,并增强了一些微小的效果,使这个核心部件非常棒。

由Susan Lee制作的动画404页面

让我们选择oldie但是好吃的:Stix的404 错误和Miles Peebles的404。我敢打赌,80年代和90年代的每个孩子都会从第一眼看到这两个场景。是的,他们是我们心爱的游戏,永远不会变老

Stix的Retro Error 404只不过是一部名为Zelda 2的史诗冒险场景。在我看来,Miles Peebles的概念不需要任何介绍,因为如果你不认识马里奥那你在这做什么?

Stix的复古错误404
Stix的复古错误404
404由Miles Peebles提供
404由Miles Peebles提供

Jinu的404页面是2016年的错误页面片段,但即便如此,它也不会阻止它看起来很酷。而且,它功能性和实用性。除了巧妙地抛出404错误之外,该解决方案还有一个汉堡包菜单甚至是cookie通知。

404页面由Jinu

最后但并非最不重要的是,Chase Allbee的404 Page。我相信每个人都会在这个黑暗神秘的概念中认识到Duffer Brothers的杰作介绍。就像电视剧一样,它有一个颠倒世界,Demogorgan横冲直撞并吃掉所要求的页面。

404 Chase Allbee

 

结论

HTML和CSS的当前状态让开发人员可以发挥魔力。如果这一对充满了JavaScript,那么结果将更加鼓舞人心和激动人心。404页面通常会被忽视,是从HTML,CSS和JavaScript联合中获益的理想之地。即使没有菜单链接,完全说明的解决方案也可以轻松地防止用户离开。

江门企业网站开发

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP