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:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.