Drawing pixels with box-shadow
by Dylan Schadeck
HTML
<div class="sprite">
</div>
SCSS
body { padding: 20px; }
/* Size of each 'pixel' to draw */
$p: 1px; /* Try changing this to, eg. 4px */
/* Calculate 'upsized' value */
@function p($n) {
@return $p * $n;
}
/* Sprite itself */
.sprite {
/* Sets size of pixels for this element */
width: p(1);
height: p(1);
/* Drawing */
box-shadow:
/* Row 1 */
p(6) 0 0 black,
p(7) 0 0 black,
p(8) 0 0 black,
p(9) 0 0 black,
p(10) 0 0 black,
p(11) 0 0 black,
/* Row 2 */
p(4) p(1) 0 black,
p(5) p(1) 0 black,
p(6) p(1) 0 black,
p(7) p(1) 0 white,
p(8) p(1) 0 red,
p(9) p(1) 0 red,
p(10) p(1) 0 white,
p(11) p(1) 0 black,
p(12) p(1) 0 black,
p(13) p(1) 0 black,
/* Row 3 */
p(3) p(2) 0 black,
p(4) p(2) 0 black,
p(5) p(2) 0 white,
p(6) p(2) 0 white,
p(7) p(2) 0 white,
p(8) p(2) 0 red,
p(9) p(2) 0 red,
p(10) p(2) 0 white,
p(11) p(2) 0 white,
p(12) p(2) 0 white,
p(13) p(2) 0 black,
p(14) p(2) 0 black,
/* Row 4 */
p(2) p(3) 0 black,
p(3) p(3) 0 black,
p(4) p(3) 0 red,
p(5) p(3) 0 white,
p(6) p(3) 0 white,
p(7) p(3) 0 red,
p(8) p(3) 0 red,
p(9) p(3) 0 red,
p(10) p(3) 0 red,
p(11) p(3) 0 white,
p(12) p(3) 0 white,
p(13) p(3) 0 red,
p(14) p(3) 0 black,
p(15) p(3) 0 black,
/* Row 5 */
p(2) p(4) 0 black,
p(3) p(4) 0 white,
p(4) p(4) 0 red,
p(5) p(4) 0 red,
p(6) p(4) 0 red,
p(7) p(4) 0 red,
p(8) p(4) 0 red,
p(9) p(4) 0 red,
p(10) p(4) 0 red,
p(11) p(4) 0 red,
p(12) p(4) 0 red,
p(13) p(4) 0 red,
p(14) p(4) 0 white,
p(15) p(4) 0 black,
/* Row 6 */
p(1) p(5) 0 black,
p(2) p(5) 0 black,
p(3) p(5) 0...