Error pages 404 is one of the most neglected web design tasks: its layout is always relegated to the last place and with a very low priority, resulting in an uncreative and standard design. However, we have to view 404 errors as an opportunity to help and guide the users towards the content or section that they are looking for, offering a good user experience.
A search form and a summary of the sections of our website is always a good starting point as content on a 404 error page. But the first thing the user will find is precisely that, a warning that something has failed or that the content you are looking for is no longer there. Why not show that in a creative and funny way?
That is what we have proposed in this article: to design several examples of error page 404 with CSS animations. We had already seen some examples in Silo, but after the demos of the hamburger menu and the showcase of the newsletter form we wanted to show you that, so we hope you like them!
Error 404 with CSS animations in text
For this example we have used two animations, one for each number 4. In the first, we wanted to imitate that the number falls and remains hanging from an invisible axis. The final 4 turns to the right, in two phases. This is the final result:
The necessary HTML is very simple, a container to be able to center the elements and each number within a span element to give it style and assign the animations. In this case we needed a father span element and a son to correctly assign the transformations. You can also choose to include the numbers in an h1 element to make it more semantic:
<section class="error-container">
<span><span>4</span></span>
<span>0</span>
<span><span>4</span></span>
</section>Regarding CSS, the styles of each number are defined:
.error-container {
text-align: center;
font-size: 180px;
font-family: 'Catamaran', sans-serif;
font-weight: 800;
margin: 20px 15px;
}
.error-container > span {
display: inline-block;
line-height: 0.7;
position: relative;
color: #FFB485;
}
.error-container > span > span {
display: inline-block;
position: relative;
}
.error-container > span:nth-of-type(1) {
perspective: 1000px;
perspective-origin: 500% 50%;
color: #F0E395;
}
.error-container > span:nth-of-type(1) > span {
transform-origin: 50% 100% 0px;
transform: rotateX(0);
animation: easyoutelastic 8s infinite;
}
.error-container > span:nth-of-type(3) {
perspective: none;
perspective-origin: 50% 50%;
color: #D15C95;
}
.error-container > span:nth-of-type(3) > span {
transform-origin: 100% 100% 0px;
transform: rotate(0deg);
animation: rotatedrop 8s infinite;
}There are two animations through @keyframes for the first 4 and for the last one:
@keyframes easyoutelastic {
0% {
transform: rotateX(0);
}
9% {
transform: rotateX(210deg);
}
13% {
transform: rotateX(150deg);
}
16% {
transform: rotateX(200deg);
}
18% {
transform: rotateX(170deg);
}
20% {
transform: rotateX(180deg);
}
60% {
transform: rotateX(180deg);
}
80% {
transform: rotateX(0);
}
100% {
transform: rotateX(0);
}
}
@keyframes rotatedrop {
0% {
transform: rotate(0);
}
10% {
transform: rotate(30deg);
}
15% {
transform: rotate(90deg);
}
70% {
transform: rotate(90deg);
}
80% {
transform: rotate(0);
}
100% {
transform: rotateX(0);
}
}If you prefer to use JS to animate texts you can choose these other examples, some of which have served as inspiration for this specific demo.
Animating a 404 error graphic design
We love the illustrations and designs of Yoga Perdana, and making one of its works come alive has been a challenge thanks to CSS. The most complex of this demo are undoubtedly the shadows, because in flat design the long shadows are complex to make using only the CSS box-shadow property.
Since the original design does not have any animation, we decided to give it life by playing with the internal shadows of element 0. The HTML is very similar to the previous one, the only difference is that the numbers are not going to be seen, they are graphics, so you have to include them and move them so that they are not readable by the user but for the devices:
<section class="error-container">
<span class="four"><span class="screen-reader-text">4</span></span>
<span class="zero"><span class="screen-reader-text">0</span></span>
<span class="four"><span class="screen-reader-text">4</span></span>
</section>As for the CSS, there are many multiple CSS backgrounds, as we saw in the example of the responsive banner, with shadows simulated over the backgrounds and real CSS gradients. All very fun!
.error-container > span.four {
width: 136px;
height: 43px;
border-radius: 999px;
background:
linear-gradient(140deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 43%, transparent 44%, transparent 100%),
linear-gradient(105deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.06) 41%, rgba(0, 0, 0, 0.07) 76%, transparent 77%, transparent 100%),
linear-gradient(to right, #d89ca4, #e27b7e);
}
.error-container > span.four:before,
.error-container > span.four:after {
content: '';
display: block;
position: absolute;
border-radius: 999px;
}
.error-container > span.four:before {
width: 43px;
height: 156px;
left: 60px;
bottom: -43px;
background:
linear-gradient(128deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 40%, transparent 41%, transparent 100%),
linear-gradient(116deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 50%, transparent 51%, transparent 100%),
linear-gradient(to top, #99749D, #B895AB, #CC9AA6, #D7969E, #E0787F);
}
.error-container > span.four:after {
width: 137px;
height: 43px;
transform: rotate(-49.5deg);
left: -18px;
bottom: 36px;
background: linear-gradient(to right, #99749D, #B895AB, #CC9AA6, #D7969E, #E0787F);
}
.error-container > span.zero {
vertical-align: text-top;
width: 156px;
height: 156px;
border-radius: 999px;
background: linear-gradient(-45deg, transparent 0%, rgba(0, 0, 0, 0.06) 50%, transparent 51%, transparent 100%),
linear-gradient(to top right, #99749D, #99749D, #B895AB, #CC9AA6, #D7969E, #ED8687, #ED8687);
overflow: hidden;
animation: bgshadow 5s infinite;
}
.error-container > span.zero:before {
content: '';
display: block;
position: absolute;
transform: rotate(45deg);
width: 90px;
height: 90px;
background-color: transparent;
left: 0px;
bottom: 0px;
background:
linear-gradient(95deg, transparent 0%, transparent 8%, rgba(0, 0, 0, 0.07) 9%, transparent 50%, transparent 100%),
linear-gradient(85deg, transparent 0%, transparent 19%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.07) 91%, transparent 92%, transparent 100%);
}
.error-container > span.zero:after {
content: '';
display: block;
position: absolute;
border-radius: 999px;
width: 70px;
height: 70px;
left: 43px;
bottom: 43px;
background: #FDFAF5;
box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1);
}Finally, for the animation, an effect playing with the shadows where it seems that the bottom disc of the number 0 moves behind the page … but no, they are only shadows and your eye that plays a trick on you! 😉
@keyframes bgshadow {
0% {
box-shadow: inset -160px 160px 0px 5px rgba(0, 0, 0, 0.4);
}
45% {
box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
}
55% {
box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
}
100% {
box-shadow: inset 160px -160px 0px 5px rgba(0, 0, 0, 0.4);
}
}Error 404 with colour palette
If you have a well-defined colour palette on your website it would be a good idea to use it on your error page 404 to design something creative. In this case we suggest using the 0 as a colour wheel that modifies the colour of the numbers 4 in a circular animation:
HTML continues to be as minimal as possible:
<section class="error-container">
<span>4</span>
<span><span class="screen-reader-text">0</span></span>
<span>4</span>
</section>In CSS we need to define the pseudoelements ::after and ::before</code 0 to create this shadow roulette with the box-shadow property, as well as its animation:
.error-container > span:nth-of-type(1) {
color: #D1F2A5;
animation: colordancing 4s infinite;
}
.error-container > span:nth-of-type(3) {
color: #F56991;
animation: colordancing2 4s infinite;
}
.error-container > span:nth-of-type(2) {
width: 120px;
height: 120px;
border-radius: 999px;
}
.error-container > span:nth-of-type(2):before,
.error-container > span:nth-of-type(2):after {
border-radius: 0%;
content:"";
position: absolute;
top: 0; left: 0;
width: inherit; height: inherit;
border-radius: 999px;
box-shadow: inset 30px 0 0 rgba(209, 242, 165, 0.4),
inset 0 30px 0 rgba(239, 250, 180, 0.4),
inset -30px 0 0 rgba(255, 196, 140, 0.4),
inset 0 -30px 0 rgba(245, 105, 145, 0.4);
animation: shadowsdancing 4s infinite;
}
.error-container > span:nth-of-type(2):before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}And finally a simple animation to change the text colour of the 4:
@keyframes colordancing {
0% {
color: #D1F2A5;
}
25% {
color: #F56991;
}
50% {
color: #FFC48C;
}
75% {
color: #EFFAB4;
}
100% {
color: #D1F2A5;
}
}The importance of unique pages in web design
When we design a web we must follow a structure, some contents, a style guide … in short, a program that often makes it very difficult to introduce new elements or experiment with new properties and values.
Looking for a challenging task to test new CSS rules usually is out of designer daily basis or at least out of projects that take most of work time.
However, in unique pages, like error 404, designers can create and users are able to perceive another feeling in the interaction with the application or web. In a project where the global style is much defined, we can develop something different and use the new trends with minimal risk to make mistakes.
Therefore, through the use of CSS animations as we have seen in the example or using some singular elements (an illustration, a svg …) we can make these pages unique. Let’s turn that singularity into something special. Our users will appreciate it.
amazing
Thank you.