WIP sprite sheet images to demo tilesets
This commit is contained in:
48
sprite-sheet-images.html
Normal file
48
sprite-sheet-images.html
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en_US">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
<!-- font-size: x-large; -->
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 1.5em;
|
||||||
|
width: 1em;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
background-image: url('https://minecraft.wiki/images/SchematicSprite.png');
|
||||||
|
background-size: calc(1em * 32) calc(1em * 32);
|
||||||
|
image-rendering: pixelated;
|
||||||
|
|
||||||
|
alignment-baseline: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r1-l {
|
||||||
|
background-position: -8em -5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r2-l {
|
||||||
|
background-position: -9em -5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r3-l {
|
||||||
|
background-position: -10em -5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r4-l {
|
||||||
|
background-position: -11em -5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-l {
|
||||||
|
background-position: -12em -7em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>
|
||||||
|
Repeater : <i class="tile r1-l"></i><i class="tile r2-l"></i><i class="tile r3-l"></i><i class="tile r4-l"></i><i class="tile c-l"></i><br>
|
||||||
|
Repeater : <i class="tile r1-l"></i><i class="tile r2-l"></i><i class="tile r3-l"></i><i class="tile r4-l"></i><i class="tile c-l"></i>
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user