I have always enjoyed looking at and creating pixel art. Before online pixel makers were a thing, I used to spend hours making my own pixel art in ...
For further actions, you may consider blocking this person and/or reporting abuse
Wow, I just learned so much about CSS π€―
Haha I hope it was useful information! I wondered if I was maybe going too much into the weeds, but Β―_(γ)_/Β― It made me realize how much of this information I took for granted until it came time to write it down and I realized how many assumptions I was making about what people knew.
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.
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.
This is so cool!
Thank you!!
Damn this is cool as hell. Didn't even know pseudo element could have box shadows.
Yes! Another fun fact for you: the box-shadow property can be animated. Which means you can make moving pixels like this: codepen.io/jschrag/pen/PrYrQE
But if you apply the box-shadow to a pseudo element & animate it, it actually becomes more performant in the browser. Hereβs an article about that: alligator.io/css/transition-box-sh...
From what I understand, this article is about creating an illusion of transforming box-shadow by changing it's opacity.
The problem with animating box-shadow is that it triggers repaints on every change.
Good catch! Looks like I wasn't paying close enough attention. That said, if your animation has two states, one way to approach it would be to have two pseudo elements (
::beforefor default state &::afterfor 2nd state) withbox-shadowapplied and alternate the opacity on those.Or just make a gif. :)
π€£π€£π€£
The box-shadow technique is definitely a fun way to make pixel art with CSS. I like your approach in explaining the technique to make it simple and accessible. In comparison, my first attempt of using this technique was a bit extreme, to say the least: codepen.io/demaine/full/rRvdJZ
I remember seeing this when you first created it! Itβs so cool!! In another comment we were talking about the browser limits of using box-shadow for this kind of thing, so itβs great to see your piece and read how you addressed that issue.
Such a cool technique! Great post.
I noticed you're drawing a lot of transparent shadow pixels though, they're easily gotten rid of via something like:
Which might speed up rendering a bit (depending on the how many transparent pixels there are and if there are mysterious render optimisations in play).
Yes, drawing the transparent box-shadows aren't necessary, so that's a great improvement! Thanks for sharing. :D
Cool approach even though it is incredibly insane to create pixel art with this technique. We need "crazy" developers like you to push the limits further and further. Thanks for sharing! Have a great day!
I've been quietly obsessing over this topic ever since I read your article and I have written a Perl module to turn images into data structures.
This video shows an image being uploaded and rendered by two different methods, one with elements 1Γ1 pixels in size, the other using your shadow method. They load very differently, as you can see.
The shadow method is quite a bit smaller in file size, though of course both are laughably huge compared to the original GIF itself.
I optimised a bit by using the most common colour as the background, so no "pixels" need to be rendered for that colour, and by creating classes for each colour with names as short as possible.
I'm going to do RLE (run-length encoding) soon but it's making my head hurt trying to figure out how to do it.
I used a GIF because the maximum colours is 256 as opposed to 16 million for JPG. The image in question is 128Γ128.
This is really cool! Until I posted and had some discussion in the comments, I'd never considered creating a tool to generate those different pixels programmatically. Optimizing by coloring the background is quite clever too!
Is this pusheen but kitten? D:
Kitten because it's small? If so, then yes!
C:
I never thought to use box shadow multiple times on the same element. That's a nifty trick!
Yeah! It's one way that you can create truly incredible CSS art like this codepen.io/ivorjetski/pen/xMJoYO
Super cute article (and artwork). Nice!
Thanks! Canβt claim credit for the original artwork though, I found it online :)
Oops, guess I missed that. π€¦π»ββοΈ
Really nice exercice ! Thanks, I'll try to make some :D
Thanks! Would love to see what you come up with! :)
Oh and just changing the shape of your orignal pixel with a border radius seems to make some really cool stuff happens.
I've been doing this for a little while, but without that great little pixelize function. Which I can now "borrow"!
Please do! Nobody should be writing that many box-shadow effects by hand π
In lieu of sitting down to figure out how to break the problem apart, like a luddite, I do it! :) You've saved me a lot of time.
There must be a webpack loader for that!
Haha I mean...thereβs a webpack loader for everything else. π
WOW
This is amazing! :D Awesome work!
This is awesome. A great example of the power of CSS and a preprocessor like SASS. Plus, pixel art is super cute and fun and makes for a great article topic in my opinion. Thanks for this article!
Thank you!! Glad you enjoyed it. :)
sick!!
Thanks!
Funny π! really good article!
Haha thank you!!
Very nice! Good work π
Thanks so much!
My mind literally just exploded with how awesome this is! Thanks for sharing!!
Thanks so much!
What a brilliant and creative use for box-shadow. This is absolutely delightful!
Very Nice tut! Congratss
Thanks!!
So so good, I'll definitely be playing around with this when I get chance!
Thanks! Would love to see any pixels you end up creating!
Very impressive!
BTW, the link to your github page doesn't seem to be working.
Thanks!
Do you mean on my profile? If so, it's working fine for me. But if you're interested, it's github.com/jnschrag
You're welcome.
Yes it goes to jacqueschrag.com/. I get a 404. Just FYI.
Oh, you mean my personal site. Yeah, that's currently offline. :) Thanks for letting me know!
I did this when I was bored just to create something like this but in a simpler way :P
codepen.io/asfo/pen/QxWzVd
This post is super awesome! Thanks for sharing!!!!
Thanks so much!
Hey, excellent post! really like it!.
That is clever and neat!
Thank you!
Awesome! It's cool to get to a point technically that you can start recreating tools for your own use.
Thanks so much! I low-key wrote the article because I wanted to make the color switching tool at the end haha
This is so cool! π
I've always loved playing with pixel art and have spent way too much time at Make 8-bit Art
Thanks! Thereβs so many online tools for this itβs great. Although for whatever reason, I find using them more tedious, even though writing out the colors for all those cells wasnβt exactly quick lol
This is amazing and adorable. Love it!
Thank you!!
Pretty smart. I like the idea!
that escalated quickly... here's a pixel, 2 pixels, 3 pixels, cat!
good stuff though. makes me want to go play with it : )
Thatβs great! Hopefully youβll be able to use this knowledge in a project. π
This is amazing ππ
nice! do you know how can i pixelize with css? (Is css have a filter for this?)