Drawing Pixels with CSS3
html:
<div class="sprite">
</div>
stylus:
// minimum pixel size
ps = 5px
// upsize pixel
p(n)
ps * n
sprite
div
// pixel size
width p(1)
height p(1)
// Draw
box-shadow:
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,
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,
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,
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,
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,
p(1) p(5) 0 black,
p(2) p(5) 0 black,
p(3) p(5) 0 white,
p(4) p(5) 0 white,
p(5) p(5) 0 red,
p(6) p(5) 0 red,
p(7) p(5) 0 white,
p(8) p(5) 0 white,
p(9) p(5) 0 white,
p(10) p(5) 0 white,
p(11) p(5) 0 red,
p(12) p(5) 0 red,
p(13) p(5) 0 white,
p(14) p(5) 0 white,
p(15) p(5) 0 black,
p(16) p(5) 0 black,
p(1) p(6) 0 black,
p(2) p(6) 0 white,
p(3) p(6) 0 white,
p(4) p(6) 0 white,
p(5) p(6) 0 red,
p(6) p(6) 0 white,
p(7) p(6) 0 white,
p(8) p(6) 0 white,
p(9) p(6) 0 white,
p(10) p(6) 0 white,
p(11) p(6) 0 white,
p(12) p(6) 0 red,
p(13) p(6) 0 white,
p(14) p(6) 0 white,
p(15) p(6) 0 white,
p(16) p(6) 0 black,
p(1) p(7) 0 black,
p(2) p(7) 0 white,
p(3) p(7) 0 white,
p(4) p(7) 0 white,
p(5) p(7) 0 red,
p(6) p(7) 0 white,
p(7) p(7) 0 white,
p(8) p(7) 0 white,
p(9) p(7) 0 white,
p(10) p(7) 0 white,
p(11) p(7) 0 white,
p(12) p(7) 0 red,
p(13) p(7) 0 white,
p(14) p(7) 0 white,
p(15) p(7) 0 white,
p(16) p(7) 0 black,
p(1) p(8) 0 black,
p(2) p(8) 0 white,
p(3) p(8) 0 white,
p(4) p(8) 0 red,
p(5) p(8) 0 red,
p(6) p(8) 0 white,
p(7) p(8) 0 white,
p(8) p(8) 0 white,
p(9) p(8) 0 white,
p(10) p(8) 0 white,
p(11) p(8) 0 white,
p(12) p(8) 0 red,
p(13) p(8) 0 red,
p(14) p(8) 0 white,
p(15) p(8) 0 white,
p(16) p(8) 0 black,
p(1) p(9) 0 black,
p(2) p(9) 0 red,
p(3) p(9) 0 red,
p(4) p(9) 0 red,
p(5) p(9) 0 red,
p(6) p(9) 0 red,
p(7) p(9) 0 white,
p(8) p(9) 0 white,
p(9) p(9) 0 white,
p(10) p(9) 0 white,
p(11) p(9) 0 red,
p(12) p(9) 0 red,
p(13) p(9) 0 red,
p(14) p(9) 0 red,
p(15) p(9) 0 red,
p(16) p(9) 0 black,
p(1) p(10) 0 black,
p(2) p(10) 0 red,
p(3) p(10) 0 red,
p(4) p(10) 0 black,
p(5) p(10) 0 black,
p(6) p(10) 0 black,
p(7) p(10) 0 black,
p(8) p(10) 0 black,
p(9) p(10) 0 black,
p(10) p(10) 0 black,
p(11) p(10) 0 black,
p(12) p(10) 0 black,
p(13) p(10) 0 black,
p(14) p(10) 0 red,
p(15) p(10) 0 red,
p(16) p(10) 0 black,
p(1) p(11) 0 black,
p(2) p(11) 0 black,
p(3) p(11) 0 black,
p(4) p(11) 0 black,
p(5) p(11) 0 white,
p(6) p(11) 0 white,
p(7) p(11) 0 black,
p(8) p(11) 0 white,
p(9) p(11) 0 white,
p(10) p(11) 0 black,
p(11) p(11) 0 white,
p(12) p(11) 0 white,
p(13) p(11) 0 black,
p(14) p(11) 0 black,
p(15) p(11) 0 black,
p(16) p(11) 0 black,
p(2) p(12) 0 black,
p(3) p(12) 0 black,
p(4) p(12) 0 white,
p(5) p(12) 0 white,
p(6) p(12) 0 white,
p(7) p(12) 0 black,
p(8) p(12) 0 white,
p(9) p(12) 0 white,
p(10) p(12) 0 black,
p(11) p(12) 0 white,
p(12) p(12) 0 white,
p(13) p(12) 0 white,
p(14) p(12) 0 black,
p(15) p(12) 0 black,
p(3) p(13) 0 black,
p(4) p(13) 0 white,
p(5) p(13) 0 white,
p(6) p(13) 0 white,
p(7) p(13) 0 white,
p(8) p(13) 0 white,
p(9) p(13) 0 white,
p(10) p(13) 0 white,
p(11) p(13) 0 white,
p(12) p(13) 0 white,
p(13) p(13) 0 white,
p(14) p(13) 0 black,
p(3) p(14) 0 black,
p(4) p(14) 0 black,
p(5) p(14) 0 white,
p(6) p(14) 0 white,
p(7) p(14) 0 white,
p(8) p(14) 0 white,
p(9) p(14) 0 white,
p(10) p(14) 0 white,
p(11) p(14) 0 white,
p(12) p(14) 0 white,
p(13) p(14) 0 black,
p(14) p(14) 0 black,
p(4) p(15) 0 black,
p(5) p(15) 0 black,
p(6) p(15) 0 black,
p(7) p(15) 0 black,
p(8) p(15) 0 black,
p(9) p(15) 0 black,
p(10) p(15) 0 black,
p(11) p(15) 0 black,
p(12) p(15) 0 black,
p(13) p(15) 0 black
Written by Farhad
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css3
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#