Image Sprite in CSS
What is Sprite image?
Sprite image is a set of decorative images such as icons or buttons located in a single image file, then use the background properties of CSS to display the right position.
Websites with multiple images often take a long time to load and create multiple server requests, so using sprite images will reduce the load required to the server, reduce the file size, and increase the download speed. page and save system resources.
This is usually applied with hover, active or focus effects to create animated buttons more smoothly or to hold decorative icons.
Example Simple Sprite image
Instead of using three separate images, we use this single image ('img_navsprites.gif'):
Here are 3 processed icons placed in a single image. The important thing when using sprites is that you have to know the exact location and size of these 3 icons. Write the following code to display them separately:
Inside:
width: 46px; height: 44px
>> Determine the part of the image you want to use. Notice the width and height size because this is the display part of the icon, so it must be calculated correctly. It should be set to fit the icon size.
background: url(img_navsprites.gif) 0 0
>> Determine the sprite image and its position (left 0px, top 0px).
>> Use to specify a small transparent image does not affect the result because the src attribute cannot be empty.
This is the easiest way to use sprite images. Follow the following examples to insert links and hover images.
Create navigation lists with sprite images
Attach links to icons to navigate to another link. You try the following:
Determine the size of the image elements as follows:
#home {left:0px;width:46px;}
Use the entire left part and the image width is 46px.
#home {background:url(img_navsprites.gif) 0 0;}
Using the top left part of the image file should be located: left: 0px, top: 0px.
#prev {left:63px;width:43px;}
63px position from left to right (#home width is 46px + the distance you want between 2 icons), image width is 43px.
#prev {background:url('img_navsprites.gif') -47px 0;}
icon 47px to the left (equal to the width of #home 46px + 1px of the divider), so we have to move this image element to the left -47px to return to the correct position 0 0.
#next {left:129px;width:43px;}
>> For 129px position from left to right (starting point of #prev is 63px + #prev's width is 43px + the distance you want between 2 icons), image width is 43px.
#next {background:url('img_navsprites.gif') -91px 0;}
icon is 91px to the left (equal to #home width 46 px + 1px separator + width #prev is 43px + 1px separator).
Effects when hovering on sprite images
Add a hover effect to the navigation menu you just created above to make the components more vivid.
First, create a new sprite image ('img_navsprites_hover.gif') containing three navigation images and three images to use for the hover effect:
The advantage of using this sprite is that this is a single image and not six separate files, there will be no delay to wait for the request to the server when the user hovers over the image. Add three lines of code to add the hover effect:
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px -45px;
}
You should read it
May be interested
- How to convert a PDF to a JPG imagehow to convert a pdf to a jpg image. in certain cases we need to convert the pdf file format to a jpg image format. because image files do not need to have any additional applications, just use the default image viewer application of windows
- ChatGPT now has an image gallery: Here's what it does and how to use it!openai has just launched a brand new image library for chatgpt users — an overdue but welcome feature that finally gives you a way to view, manage, and review ai-generated images.
- Reverse Image Search on iPhonereverse image search reverses the normal image search process, instead of searching with words or phrases, users will use images to search. this article will show you how to search backwards with images on iphone.
- How to edit the Metadata of the image file, change the image informationan ordinary image file not only contains image content, but they also contain a lot of data related to them such as: photographer's name, shooting parameters, image structure ...
- Top 5 best image compression softwaretop 5 best image compression software. with high quality image files, compressing image files helps reduce the storage space on phones and computers, which makes it possible for us to share image files easily via messenger, zalo ...
- Image library in CSScss can be used to create collections that help you manage images in your website.
- How to Resize an Image in Microsoft Paintthis wikihow teaches you how to enlarge, shrink, or crop an image in microsoft paint. the first two maintain the native aspect ratio while the latter removes the outer area from the image. make a copy of the image you want to resize. go to...
- How to insert a picture below another picture in PowerPointplacing images below other images in powerpoint helps users create more beautiful slide layouts, with images displayed in a more sequential and artistic way.
- What is the difference between JPG, JPEG, GIF, PNG and SVG image formats?jpg, jpeg, gif, png or svg are the most used image formats on the internet today. in this article, we will learn about popular image formats, know the differences between image formats and which ones to use.
- How to find the source of an image on Googlegoogle helps you find the source of an image with more detailed information about the image you want to learn more about. to do this, google's google lens tool will identify the image and scan the image to bring you the original image and accompanying information.