Page not found 404 CSS3
Tuesday, November 15, 2011 EST
by: Eric Potvin
Tags:css
The Page Not Found, commonly called 404, should provide directive and be friendly so the user that lands on it does not close the browser or simply go away from your site.
Using the rotate CSS3 property, you can make simulate a visual broken page without using images
#menu { -webkit-transform: rotate(-1.8deg); -moz-transform: rotate(-1.8deg); }
#tags { -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); }
#logo { -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); }
#mainContent { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); }
#error404 .icon404 { -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); }
#error404 .text { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); }
#error404 .text h1 { -webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); }
#error404 .text h2 { -webkit-transform: rotate(42deg); -moz-transform: rotate(42deg); margin-top: 20px; }
#error404 .text h2 span { -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg); }
#error404 .text p { -webkit-transform: rotate(26deg); -moz-transform: rotate(26deg); }
.footerTop { -webkit-transform: rotate(-9deg); -moz-transform: rotate(-9deg); margin-top: 80px;}
#footer { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); }
#footer #links { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); }
#footer #feeds { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); }
#footer #social { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); }
#footer #newsletter { -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); }
#footer #copyright { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); }
#footer #copyright p { -webkit-transform: rotate(-17deg); -moz-transform: rotate(-17deg); }
Demo:
You can view the demo of this code at our actual 404 page.
Link to this Article
To link directly to this article from your web site, use one of the following snippets below.
Page not found 404 CSS3 | Book Of Zeus<a href="http://www.bookofzeus.com/articles/page-not-found-404-css3/" title="Page not found 404 CSS3">Page not found 404 CSS3 | Book Of Zeus</a>
Short URL:
Page not found 404 CSS3 | Book Of Zeus<a href="http://s.bookofzeus.com/EwlSP" title="Page not found 404 CSS3 Short URL">Page not found 404 CSS3 | Book Of Zeus</a>