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:
I did it with Perl and ImageMagick but I bet there's a Python tool out there.
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.
Nice! I knew someone smart would have done this!
I’m on my phone right now so I can’t check your source.
Those concepts are used to optimise the file size of GIFs. JPGs I don’t know. They’re more mysterious to me.
It doesn't have any optimization really, I might go back to it and update it, those are some good ideas.
This is incredible! 27,000 lines of CSS for just the 4 examples on the page is nuts, although I believe it. Very cool!
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!
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.
Only one way to find out!
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).
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.
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.