Scribd Logo
Upload

Welcome to Scribd!

  • CSS Lecture 8 (Image Sprite)

    Uploaded by

    NeeharikaPandey
    1 views21 pages
    ABout Image Sprites

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    ABout Image Sprites

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    1 views21 pages

    CSS Lecture 8 (Image Sprite)

    Uploaded by

    NeeharikaPandey
    ABout Image Sprites

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 21

    CSS Lecture 8

    Image Sprite, clear property


    • Image Sprite:- Sprites are two-dimensional images which are made up
    of combining small images into one larger image at defined X and Y
    coordinates.
    • A web page with many images can take a long time to load and
    generates multiple server requests.
    • Image sprites is useful as image resources will have to be
    loaded only once.
    • Using image sprites will reduce the number of server
    requests and save bandwidth.
    • Using the CSS background-position different parts of the
    combined image can be shown.
    Example: Showing flags of Countries .flag3 {
    <!DOCTYPE html> background-position: -510px 0px;
    <html> }
    <head> .flag4 {
    background-position: -765px 0px;
    <title></title>
    }
    <style type="text/css">
    body {
    .sprite { text-align: center;
    background: url("Capture.png") no-repeat; }
    width: 280px; </style>
    height: 200px; </head>
    <body>
    display: inline-block;
    <div><h1>Flag Image Sprite</h1></div>
    }
    <div class="sprite flag1"></div>
    .flag1 { <div class="sprite flag2"></div>
    background-position: 0px 0px; <div class="sprite flag3"></div>
    } <div class="sprite flag4"></div>
    .flag2 { </body>
    </html>
    background-position: -255px 0px;
    }
    • Output:
    • Example:- Creating navigation list
    <!DOCTYPE html> #home {
    <html> left: 0px;
    </head>
    <head> width: 46px; <body>
    <style> background: url('img_navsprites.gif') 0 0;
    #navlist { } <ul id="navlist">
    position: relative; <li id="home">
    } #prev { <a href="default.asp"></a>
    left: 63px; </li>
    #navlist li { <li id="prev">
    width: 43px;
    margin: 0; <a href="css_intro.asp"></a>
    background: url('img_navsprites.gif') - </li>
    padding: 0; 47px 0;
    <li id="next">
    list-style: none; } <a href="css_syntax.asp"></a>
    position: absolute; </li>
    top: 0; #next { </ul>
    } left: 129px;
    width: 43px; </body>
    #navlist li, #navlist a { background: url('img_navsprites.gif') - </html>
    height: 44px; 91px 0;
    display: block; }
    } </style>
    • Output:
    • this sprite image by combining 10 separate images in a single image
    • First of all, we will create the class .sprite that will load our sprite
    image. This is to avoid repetition, because all items share the same
    background-image.

    .sprite {
    background: url("images/mySprite.png") no-repeat;
    }
    • Now, we must define a class for each item we want to display. For example,
    to display Internet Explorer icon form the image sprite the CSS code would
    be.
    .ie {
    width: 50px; /* Icon width */
    height: 50px; /* Icon height */
    display: inline-block; /* Display icon as inline block */
    background-position: 0 -200px;
    /* Icon background position in sprite */
    }
    <!DOCTYPE html> .ie {
    <html lang="en"> width: 50px; /* Icon width */
    height: 50px; /* Icon height */
    <head>
    display: inline-block; /* Display
    <meta charset="utf-8"> icon as inline block */
    <title>Example of CSS background-position: 0 -200px; /*
    Sprite</title> Icon background position in sprite */
    <style> }
    </style>
    .sprite {
    </head>
    background:
    <body>
    url("/examples/images/mySprite.p
    ng") no-repeat; <span class="sprite ie"></span>
    </body>
    }
    </html>
    • Output:
    • The clear property specifies what should happen with the element
    that is next to a floating element.
    • The clear property controls the flow next to floated elements.
    • Sytax:
    • clear: none|left|right|both|initial|inherit;
    Value Description
    none Default. The element is not pushed below left or right floated
    elements
    left The element is pushed below left floated elements
    right The element is pushed below right floated elements
    both The element is pushed below both left and right floated elements
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.
    <!DOCTYPE html> <body>
    <html>
    <head> <h1>The clear Property</h1>
    <style>
    img {
    <img src="birdimage.jpeg"
    float: left; width="100" height="132">
    }

    <p class=clear >This is Bird image


    p.clear { </p>
    clear: left;
    }
    </body>
    </style>
    </html>
    </head>
    • Output:
    <!DOCTYPE html> <body>
    <html>
    <head> <h1>The clear Property</h1>
    <style>
    img {
    <img src="birdimage.jpeg"
    float: left; width="100" height="132">
    }

    <p class=clear >This is Bird image


    p.clear { </p>
    clear: none;
    }
    </body>
    </style>
    </html>
    </head>
    • Output:
    <!DOCTYPE html> <body>
    <html>
    <head> <h1>The clear Property</h1>
    <style>
    img {
    <img src="birdimage.jpeg"
    float: right; width="100" height="132">
    }

    <p class=clear >This is Bird image


    p.clear { </p>
    clear: right;
    }
    </body>
    </style>
    </html>
    </head>
    • Output:

    You might also like