DEV Community

Discussion on: Creating Pixel Art with CSS

Collapse
 
john_horner1 profile image
john_horner • Edited

Nice! I'm not going to do the next-level thing but I'm sure someone is … write a script to create the SASS to create the CSS, a script which can be run on any image!

I did this a while ago, but it's the hard-grinding version of creating table cells with background colours:

johnhorner.info/apple/

I did it with Perl and ImageMagick but I bet there's a Python tool out there.

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

I actually did this myself with PHP as the generator: ashleysheridan.co.uk/blog/Single+D...

Modern browsers with enough resources handled it quite well, even at a 1×1 pixel representation.

Collapse
 
johnhorner profile image
John Horner

Nice! I knew someone smart would have done this!

I’m on my phone right now so I can’t check your source.

  • Does it optimise by re-using colours in a CLUT (colour lookup table)?
  • Does it have a kind of RLE (run length encoding) where a stretch of two or more pixels the same colour are made into a single long element?

Those concepts are used to optimise the file size of GIFs. JPGs I don’t know. They’re more mysterious to me.

Thread Thread
 
ashleyjsheridan profile image
Ashley Sheridan

It doesn't have any optimization really, I might go back to it and update it, those are some good ideas.

Collapse
 
jnschrag profile image
Jacque Schrag

This is incredible! 27,000 lines of CSS for just the 4 examples on the page is nuts, although I believe it. Very cool!

Thread Thread
 
ashleyjsheridan profile image
Ashley Sheridan

Yes, I would absolutely not recommend using the technique to the degree I pushed it! My blog post was just about seeing how far I could push it. I did do a full 1×1 example of the Mona Lisa shown there, but it was starting to slow the page down considerably, so I didn't make it part of the post. There is a link to the generator on github should you wish to try it out yourself though!

Collapse
 
jnschrag profile image
Jacque Schrag

Oh gosh 😂 all I can think is the Inception meme “we need to go deeper”. Although that would actually be really cool to be able to recreate any image via box-shadow. Although I wonder if you would hit a limit at how many box-shadow definitions you’re allowed to have before the browser can’t handle it anymore.

Collapse
 
john_horner1 profile image
john_horner

Only one way to find out!

Thread Thread
 
y6nh profile image
Hugh

I tried to find that out — though these are conventional blurry shadows, not pixel art: codepen.io/y6nH/pen/YRmVvZ (click with shift or ctrl to add larger numbers).

Thread Thread
 
jnschrag profile image
Jacque Schrag

That's amazing. I stopped after 1500ish, so I didn't find the limit, but that's truly incredible just how much the browser can handle. Although I did start to notice a slow down in how quickly it rendered starting around 800ish.