/
sprites-and-uris.html
37 lines (37 loc) · 7.09 KB
/
sprites-and-uris.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sprites and Data-URIs</title>
<link rel="stylesheet" href="./standard.css"/>
<style type="text/css">
.icon {
background: url('img/icons.png') no-repeat;
display: inline-block;
width: 114px;
height: 114px;
text-indent: -9999px;
overflow: hidden;
vertical-align: middle;
}
.email {background-position: 0 0;}
.facebook {background-position: -114px 0;}
.rss {background-position: 0 -114px;}
.twitter {background-position: -114px -114px;}
.youtube {
background: url('data:image.png;base64,iVBORw0KGgoAAAANSUhEUgAAAHIAAAByCAYAAACP3YV9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Qzc0ODhCNUJDRjlDMTFFMjk1QThBNjM4MDE4RkYyRjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Qzc0ODhCNUNDRjlDMTFFMjk1QThBNjM4MDE4RkYyRjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDNzQ4OEI1OUNGOUMxMUUyOTVBOEE2MzgwMThGRjJGOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDNzQ4OEI1QUNGOUMxMUUyOTVBOEE2MzgwMThGRjJGOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnTF8FUAAA4ASURBVHja7F0JcFvF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');
}
</style>
</head>
<body>
<h1>Sprites and Data-URIs</h1>
<div>
<p><span class="icon email">E-Mail Icon</span> E-Mail</p>
<p><span class="icon rss">RSS Icon</span> RSS</p>
<p><span class="icon facebook">Facebook Icon</span> Facebook</p>
<p><span class="icon twitter">Twitter Icon</span> Twitter</p>
<p><span class="icon youtube">YouTube Icon</span> YouTube</p>
</div>
<small>Icons by <a href="http://graphicsfuel.com">GraphicsFuel.com</a>, Sprite-Generator by <a href="http://css.spritegen.com/">SpriteGen.com</a>; Base64-Kodierung by <a href="https://www.base64decode.org/">Base64Decode.org</a>.</small>
</body>
</html>