Kto powiedział, że strony błędów muszą być nudne?
Źródło:
http://cssdeck.com/labs/404
HTML
<![CDATA[ <div class="lineas">
<blockquote class="tr_bq">
<h1>
- Opps! 404 Error -</h1>
<h2>
Sorry! </h2>
<h1>
Back to <a href="https://www.blogger.com/blogger.g?blogID=4817203568281494964#">home</a></h1>
</blockquote>
</div>
]]>
CSS
<![CDATA[@font-face { font-family: papel; src: url('http://dgbxu.com/f/ed856.otf'); } @font-face { font-family: Delicious; font-weight: bold; src: url('http://dgbxu.com/f/ed856.otf'); }
blockquote {
background: url("http://i.imgur.com/x7maIok.png") no repeat scroll 0 0 transparent;
border-radius: 5px 5px 0 0;
border-top: 1px solid #DDDDDD;
color: #666666;
font-size: 13px;
font-family:papel;
width:50%;
height:300px;
left:-32px;
top:-33px;
position:relative;
line-height: 22px;
margin: 0 auto 0 auto;
padding: 21px 45px 14px 50px;
}
body {
background-image:url(http://i.imgur.com/ffp72Fa.png);
}
h1 {
text-align:center;
position:relative;
width:200px;
}
h2 {
font-size:100px;
-webkit-transform: skew(-20deg) rotate(-8deg);
-moz-transform: skew(-20deg) rotate(-8deg);
-ms-transform: skew(-20deg) rotate(-8deg);
-o-transform: skew(-20deg) rotate(-8deg);
transform: skew(0deg) rotate(-8deg);
text-align:center;
color:#a64d79;
}
.lineas, .lineas:before, .lineas:after
{
background: url("http://i.imgur.com/x7maIok.png") repeat-y scroll 0 0 transparent;
border-radius: 5px 5px 0 0;
height:272px;
border: 1px solid #ccc;
box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}
.lineas
{
position: relative;
width: 50%;
padding: 2em;
margin: 50px auto;
}
.lineas:before, .lineas:after
{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(2.5deg);
-o-transform: rotate(2.5deg);
transform: rotateZ(2.5deg);
z-index: -1;
}
.lineas:after
{
-webkit-transform: rotateZ(-2.5deg);
-o-transform: rotate(-2.5deg);
transform: rotateZ(-2.5deg);
}
a {
text-decoration:none;
color:#666666;
}
a:hover {
text-decoration:none;
color:#073763;
transition:.8s;
-moz-transition:.8s;
-webkit-transition:.8s;
}
]]>
0 komentarze:
Prześlij komentarz