Scribd
Upload
16 views

CSS Lecture 8 (Image Sprite)

The document discusses CSS image sprites and the clear property. It explains how image sprites can reduce server requests by combining images into one larger file. It provides an example of using CSS background-position to display different parts of a sprite image. It also explains that the clear property controls element flow around floated elements and its values of none, left, right, and both.

Uploaded by

NeeharikaPandey
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
16 views

CSS Lecture 8 (Image Sprite)

The document discusses CSS image sprites and the clear property. It explains how image sprites can reduce server requests by combining images into one larger file. It provides an example of using CSS background-position to display different parts of a sprite image. It also explains that the clear property controls element flow around floated elements and its values of none, left, right, and both.

Uploaded by

NeeharikaPandey
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 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