CSS Image Sprites
An image sprite is a sum of images placed in a single image.
CSS Sprite is an important CSS feature that allows you to save space and time by gathering together the images that are summoned to the site and making them into a single file. This will reduce the opening speed of your site, which will be useful to you for SEO
First of all, we create a transparent image file with a Photoshop. We save this file as PNG format that we use on our website and appear on every page. It is used for a picture of your theme that is repeated on every page of your website.
How to use CSS Sprite
Prepare some icons or images with the help of Photoshop as a single file which has space between two icons or pics. Save it as PNG file. Or use my image below.
HTML code
Your HTML file must be as shown below. ( Copy paste can be trouble sometimes Here is to download the CSS and HTML file.)
< html>
< head> < title> Learning CSS Sprite < /title>
< /head>
< body>
< div id="sprite_container">
< div class="bestwishes">
< /div>
< div class="frebies">
< /div>
< div class="emailme">
< /div>
< div class="findonface">
< /div>
< div class="instagram">
< /div>
< div class="gmail">
< /div>
< /div>
< /body>
< /html>
CSS code
Instead of struggling with the codes to clarify the positions of image parts, there are couple of websites to help you with it.
- Open your PNG image . Here is to download the PNG images
- Then 1. Select Sprite Tool, 2. Select one of your images, it will automatically select the part of image considering the spaces around, 3. Copy all code.
- Then, change ".sprite" with the name "bestwishes",
- If you want to open your website very very fast by reducing the codes, then delete "background: url..." code and add "background-position" like below. And then, the codes must be like below.
.bestwishes {
width: 155px;
height: 27px;
background-position: -34px -33px;}
- Apply this to each image, and your CSS codes must be edited like below. (Copy paste can be trouble sometimes Here is to download the CSS and HTML file.)
< style>
.bestwishes, .frebies, .emailme, .findonface, .instagram, .gmail {
background-image: url('https://www.alpinpon.com/wp-content/uploads/2018/01/css-sprite-all-icon.png');
background-repeat: no-repeat;
< /style>
}
#sprite_container {width:263px; margin:0 auto; }
.bestwishes {
width: 155px;
height: 27px;
background-position: -34px -33px;
}
.frebies {
width: 210px;
height: 33px;
background-position: -15px -114px;
}
.emailme {
width: 129px;
height: 125px;
background-position: -298px -156px;
}
.findonface {
width: 252px;
height: 84px;
background-position: -309px -30px;
}
.instagram {
width: 80px;
height: 80px;
float:left;
background-position: -22px -189px;
}
.gmail {
width: 97px;
height: 68px;
background-position: -122px -196px;
}
< /stlyle>
Your page will be exactly seen like that
You can move your images independently wherever you want moving its "div".
0 Comments