re: Creating Pixel Art with CSS VIEW POST

FULL DISCUSSION
 

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 (::before for default state & ::after for 2nd state) with box-shadow applied and alternate the opacity on those.

Or just make a gif. :)

code of conduct - report abuse