3d text using CSS3

3d text using CSS3

by Сергей Тарасевич

HTML

<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css" />

<a href="http://nouincolor.com">Nouincolor</a>
<a href="http://twitter.com/oskar">Twitter</a>
<a href="http://last.fm/user/wassago_">Last.fm</a>
<a href="http://www.facebook.com/oskar.krawczyk">Facebook</a>
<a href="http://www.flickr.com/photos/oskarkrawczyk/">Flickr</a>

CSS

body {
    background: #D4D7DF url('http://img21.imageshack.us/img21/7868/mootoolifiedbg.png');
    font-family: 'Yanone Kaffeesatz', Helvetica, Arial, serif;
    text-shadow: 0 1px 0 #fff;
    text-align: center;
    color: #73799C;
    font-size: 4em;
}

.shadow {
   
}
a {
    text-decoration: none;
    color: #fff;
    -webkit-transition: all 0.12s ease-out;
    position: relative;
    text-transform: uppercase;
    text-shadow: 1px 1px #73799C, 2px 2px #73799C, 3px 3px #73799C, 4px 4px #73799C, 5px 5px #73799C, 6px 6px #73799C;
    top: -7px;
    left: -7px;
    display: block;
}

a:hover {
    text-decoration: none;
    text-shadow: 1px 1px #73799C, 2px 2px #73799C;
    top: -3px;
    left: -3px;
    color: #fff;
}