Sprites
By Marcin Olejarz
This method allows us to contain one image instead of many for example social media icons.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
background-color:purple;
}
#menu {
list-style-type:none;
margin:0 auto;
padding:0;
height:64px;
}
#menu li {
float:left;
margin-left:15px;
}
#menu li:first-child {
margin-left:0;
}
#menu li a {
display:block;
text-indent:-999px;
width:64px;
height:64px;
/* I recommend to copy image with sprites into tizen app's catalog to use it offline */
/* Like: background-image:url('images/social_icons_sprite_2x.png'); */
background-image:url('http://www.kellerclub.eu/wp-content/uploads/2013/07/social_icons_sprite_2x.png');
}
#menu #facebook a {}
#menu #youtube a { background-position:-128px 0; }
#menu #googleplus a { background-position:-256px 0; }
#menu #twitter a { background-position:320px 0; }
#menu #facebook a:hover { background-position:0 -64px; }
#menu #youtube a:hover { background-position:-128px -64px; }
#menu #googleplus a:hover { background-position:-256px -64px; }
#menu #twitter a:hover { background-position:320px -64px; }
</style>
</head>
<body>
<div>
<ul id="menu">
<li id="facebook"><a href="#">Facebook</a></li>
<li id="youtube"><a href="#">youtube</a></li>
<li id="googleplus"><a href="#">googleplus</a></li>
<li id="twitter"><a href="#">Twitter</a></li>
</ul>
</div>
</body>
</html>