What Are The Benefits Of Image Sprites and Image gallery In Css

admin_img Posted By Bajarangi soft , Posted On 30-09-2020

An image sprite is a collection of images put into a single image,A web page with many images can take a long time to load and generates multiple server requests, Using image sprites will reduce the number of server requests and save bandwidth,We want to use the sprite image ("img_navsprites.gif") to create a navigation list,We will use an HTML list, because it can be a link and also supports a background image,It is possible to style HTML elements that have specific attributes or attribute values,The [attribute] selector is used to select elements with a specified attribute.

Image Sprites in CSS

1.Image Sprites - Create a Navigation List

<!DOCTYPE html>
<html>
<head>
    <style>
        #navlist {
            position: relative;
        }

        #navlist li {
            margin: 0;
            padding: 0;
            list-style: none;
            position: absolute;
            top: 0;
        }

        #navlist li, #navlist a {
            height: 44px;
            display: block;
        }

        #home {
            left: 0px;
            width: 46px;
            background: url('img_navsprites.gif') 0 0;
        }

        #prev {
            left: 63px;
            width: 43px;
            background: url('img_navsprites.gif') -47px 0;
        }

        #next {
            left: 129px;
            width: 43px;
            background: url('img_navsprites.gif') -91px 0;
        }
    </style>
</head>
<body>

<ul id="navlist">
    <li id="home"><a href="https://bajarangisoft.com./"></a></li>
    <li id="prev"><a href="https://blog.bajarangisoft.com/"></a></li>
    <li id="next"><a href="https://blog.bajarangisoft.com/Videos"></a></li>
</ul>

</body>
</html>
2.Image Gallery
<!DOCTYPE html>
<html>
<head>
    <style>
        div.gallery {
            margin: 5px;
            border: 1px solid #ccc;
            float: left;
            width: 180px;
        }

        div.gallery:hover {
            border: 1px solid #777;
        }

        div.gallery img {
            width: 100%;
            height: auto;
        }

        div.desc {
            padding: 15px;
            text-align: center;
        }
    </style>
</head>
<body>
<h2>Image gallery</h2>
<div class="gallery">
    <a target="_blank" href="img_5terre.jpg">
        <img src="my_pic.jpg" alt="Cinque Terre" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
    <a target="_blank" href="img_forest.jpg">
        <img src="my_pic.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
    <a target="_blank" href="img_lights.jpg">
        <img src="my_pic.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
    <a target="_blank" href="img_mountains.jpg">
        <img src="my_pic.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

Related Post