Ads Top

CSS Image Sprites

What is the image sprites?

CSS sprites are the combination of the multiple images in the single image. It reduces the HTTP server request for them again & again.

View demo

Here is the example of the image sprites:


<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS Image Sprites</title>
    <style>
        .anythingNav {
            position: relative;
        }
        .anythingNav li {
            margin: 0;
            padding: 0;
            float: left;
            list-style: none;
            text-indent: -99999px;
            margin-right: 10px;
        }
        .anythingNav li,
        .anythingNav a {
            height: 30px;
            display: block;
            transition: all 0.5s;
        }
        .facebook {
            left: 0px;
            width: 30px;
            background: url('anythingSpriteImage.png') 0 0;
        }
        .twitter {
            left: 30px;
            width: 30px;
            background: url('anythingSpriteImage.png') -30px 0;
        }
        .linkedin {
            left: 60px;
            width: 30px;
            background: url('anythingSpriteImage.png') -60px 0;
        }
        .googleplus {
            left: 90px;
            width: 30px;
            background: url('anythingSpriteImage.png') -90px 0;
        }
        .youtube {
            left: 120px;
            width: 30px;
            background: url('anythingSpriteImage.png') -120px 0;
        }
        a.facebook:hover,
        a.facebook.active {
            background: url('anythingSpriteImage.png') 0px -30px;
        }
        a.twitter:hover,
        a.twitter.active {
            background: url('anythingSpriteImage.png') -30px -30px;
        }
        a.linkedin:hover,
        a.linkedin.active {
            background: url('anythingSpriteImage.png') -60px -30px;
        }
        a.googleplus:hover,
        a.googleplus.active {
            background: url('anythingSpriteImage.png') -90px -30px;
        }
        a.youtube:hover,
        a.youtube.active {
            background: url('anythingSpriteImage.png') -120px -30px;
        }
    </style>

</head>

<body>

    <div class="anythingNav">
        <ul>
            <li><a href="#" target="_blank" class="facebook active">facebook</a></li>
            <li><a href="#" target="_blank" class="twitter">twitter</a></li>
            <li><a href="#" target="_blank" class="linkedin">linkedin</a></li>
            <li><a href="#" target="_blank" class="googleplus">googleplus</a></li>
            <li><a href="#" target="_blank" class="youtube">youtube</a></li>
        </ul>
    </div>
</body>

</html>


No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.