In this example I will show you how you can use only one image for your social media sharing nav-bar. Most of us use this sharing buttons-nav-bar so that our users can share our articles and content to their social media profiles.
Using this style of implementation can bring a few benefits to our user experience – if you are using this on a popular website with lots of requests – the css image sprite can lower your server requests so, instead of having 6 requests for every logo that we use in our example, we use just one request and we use CSS
to display each image in a separate place on our page.
Instead of using three separate images, we use this single image ("sprite.png")
Youtube is just one of the heavily trafficked sites on the internet that uses sprites using one image to display all kinds of small images used in different places on the site:
CSS Image Sprites
/* simplecodetips.com - css image sprites */ .sctinstagram-logo, .sctfacebook-flat-vector-logo, .sctgoogle-favicon-vector, .sctgoogle-plus-new-icon-logo, .sctnew-google-maps-logo-vector-download, .scttwitter-logo-vector-download { display: inline-block; background: url('sprite.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; } .sctinstagram-logo { background-position: -1px -0px; width: 30px; height: 30px; } .sctfacebook-flat-vector-logo { background-position: -32px -0px; width: 30px; height: 30px; } .sctgoogle-favicon-vector { background-position: -1px -31px; width: 30px; height: 30px; } .sctgoogle-plus-new-icon-logo { background-position: -32px -31px; width: 30px; height: 30px; } .sctnew-google-maps-logo-vector-download { background-position: -1px -62px; width: 30px; height: 30px; } .scttwitter-logo-vector-download { background-position: -32px -62px; width: 30px; height: 30px; }
HTML
<!-- simplecodetips.com --> <a href="//facebook.com"><div class="sctfacebook-flat-vector-logo"></div></a> <a href="//twitter.com"><div class="scttwitter-logo-vector-download"></div></a> <a href="//instagram.com"><div class="sctinstagram-logo"></div></a> <a href="//google.com"><div class="sctgoogle-favicon-vector"></div></a> <a href="//plus.google.com"><div class="sctgoogle-plus-new-icon-logo"></div></a> <a href="//maps.google.com"><div class="sctnew-google-maps-logo-vector-download"></div></a>