Well designed website should also have custom designed 404 page for case that something is broken. So, today we will create notepad style 404 page with small animated bar. Font used for text is Lobster, it is free to use and you can find it online on Google fonts. Patter used for background is from Lea Verou’s website and I want to thank her for providing all of those great patterns.
HTML will be very simple. Whole structure will include div with class “wrapper”. Inside this div will be nested h1 and h2 headings and below them another div with class “container” for our bar. Container will contain the last element in our html – div with class inner.
HTML:
<div class="wrapper"> <h1>404</h1> <h2>Oops, looks like page was not found...</h2> <div class="container"> <div class="inner"></div> </div> </div>
This is all we will need for HTML. Now we will move to CSS. As always, I included reset stylesheet to unite visual styles across the browsers. You can get it on meyerweb or html5doctor. As a first step, we will set width and height properties of html and body elements to 100%. This will create a full-screen page effect. Also let’s set width of wrapper div to 100%.
CSS:
html,
body {
width: 100%;
height: 100%;
}
.wrapper {width: 100%}
Next thing is to create notepad-like background. To achieve this, we will use pattern created by Lea Verou via linear gradient. Since gradients are still experimental and not well supported, we will also include prefixed versions.
CSS:
body {
background-color: #fff;
background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -webkit-gradient(linear, left top, left bottom, color-stop(0.1em, #eeeeee), color-stop(0.1em, transparent));
background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -webkit-linear-gradient(#eeeeee 0.1em, transparent 0.1em);
background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eeeeee 0.1em, transparent 0.1em);
-webkit-background-size: 100% 1.2em;
background-size: 100% 1.2em;
}
Now comes typography … Let’s style our headings. We will set font-family for both, h1 and h2, to Lobster, line-height to 1.5em to make some space between them and align them to the center of page.
CSS:
h1,
h2 {
font-family: 'Lobster', sans-serif;
line-height: 1.5em;
text-align: center;
}
Now we will style h1 and h2 separately. For h1, set margin-top to 3% to push it a bit lower from the border of the page. Font-size is about 3.4em. For newer browsers I included also size defined in rems. H2 will have margin-bottom set to .85em to push the container below, font-size will be 1.8em (and 1.8rem).
CSS:
h1 {
margin-top: 3%;
font-size: 3.4em;
font-size: 3.4rem;
}
h2 {
margin-bottom: .85em;
font-size: 1.8em;
font-size: 1.8rem;
}
This is all we have to do about typography. Now we will create keyframes for our animation. The name for keyframes will be width (we will animate change in width) and they will contain two steps – 0% and 100%. In first step we will declare width property with value of 0% and in second second step with value of 100%.
CSS:
@-webkit-keyframes width {
0% {width: 0;}
100% {width: 100%;}
}
@keyframes width {
0% {width: 0;}
100% {width: 100%;}
}
It is time to style the container (bar). To center the bar set the margin to auto and width to approximately 500px. Height is 35px. To pack it up, we will create border around our container 10px thick, solid style and color of #ddd (light shade of grey). Last thing is to modify the corners of container. To achieve this we will use border-radius property. Since I want to round only borders and not whole container, I declared styles for every corner individually. The amount for radius will be 50px.
CSS:
.container {
margin: auto;
width: 500px;
height: 35px;
border: 10px solid #ddd;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
}
Container is created and styled so now the only thing that left is inner div. We will omit setting width because it will be controlled by animation. Height will be set to 100% – 100% of the container (parent element). For background color I chose my favorite shade of red and also brand color – #ad0000. Important thing is to duplicate the border-radius we used in container so the inner div will fit in right inside the container. Border-radius will have the same value – 50px. The last property is animation. The syntax is simple. First is name of keyframes we want to use (width – declared above). Next is length of animation. The higher the number, the longer and slower the navigation will be. Last value, which is not necessary is for iteration count. You can choose from four values – number, infinite, initial and inherit. We will use infinite.
CSS:
.container .inner {
height: 100%;
background: #ad0000;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
-webkit-animation: width 5s infinite;
animation: width 5s infinite;
}
… And that is all friends.
Codepen:
https://codepen.io/d3v3r0/pen/Gimnk
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
