css-sprite-loader
Version:
A webpack loader to convert png into sprite image
58 lines (57 loc) • 2.49 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Sprite Loader</title>
<script src="dest/bundle.js"></script>
</head>
<body>
<div class="part">
<p>Source images display</p>
<div class="source simple"></div>
<div class="source background-image"></div>
<div class="source with-color"></div>
<div class="source with-color-outside"></div>
<div class="source with-color-override"></div>
<div class="source bg-size"></div>
<div class="source bg-size-pixel"></div>
<div class="source bg-size-height"></div>
<div class="source bg-size-cover"></div>
<div class="source bg-size-contain"></div>
<div class="source bg-size-override"></div>
<div class="source bg-position"></div>
<div class="source bg-position-outside"></div>
<div class="source bg-position-override"></div>
<div class="source bg-position-and-size"></div>
<div class="source bg-position-and-size-outside"></div>
<div class="source without-image-set"></div>
<div class="source image-set"></div>
<div class="source image-set-fallback"></div>
<div class="source image-set-and-others"></div>
<div class="source image-set-captain-america"></div>
</div><div class="part">
<p>Sprite display</p>
<div class="sprite simple"></div>
<div class="sprite background-image"></div>
<div class="sprite with-color"></div>
<div class="sprite with-color-outside"></div>
<div class="sprite with-color-override"></div>
<div class="sprite bg-size"></div>
<div class="sprite bg-size-pixel"></div>
<div class="sprite bg-size-height"></div>
<div class="sprite bg-size-cover"></div>
<div class="sprite bg-size-contain"></div>
<div class="sprite bg-size-override"></div>
<div class="sprite bg-position"></div>
<div class="sprite bg-position-outside"></div>
<div class="sprite bg-position-override"></div>
<div class="sprite bg-position-and-size"></div>
<div class="sprite bg-position-and-size-outside"></div>
<div class="sprite without-image-set"></div>
<div class="sprite image-set"></div>
<div class="sprite image-set-fallback"></div>
<div class="sprite image-set-and-others"></div>
<div class="sprite image-set-captain-america"></div>
</div>
</body>
</html>