Fun with CSS

A bit of fun with a design I made entitled "Fun with CSS". The design personified the CSS states of an anchor, and thus I thought why not show it in action.

by erick

HTML

<body>
    <div class="center">
        <a href="#" alt="Fun with CSS" class="fun">Fun with CSS</a>
    </div>
</body>

CSS

.fun {
    display: block;
    width:170px;
    height:200px;
    /*image from my flickr: http://www.flickr.com/photos/caartooner/ */
    background-image:
            url('http://farm8.staticflickr.com/7211/7043502207_52d7e5909c_z.jpg');
    text-indent: -1999px;
}
.fun:hover {
    background-position: 0px -200px;
}
.fun:active {
    background-position: 0px -400px;
}
.center {
    width: 170px;
    margin: 60px auto 0 auto;
}

body {
    background-color: #d0ecf8;
}