A heart made of pixel – very big pixels — is today’s page. I wanted to recreate the same pixelated heart I found in this dribbble shot. The border shadow might be a bit off and it lacks the animation, but all in all it look pretty similar! Maybe I’ll try to do the animations for a future page.

Now for the technical part: the whole pixelated heart is one big square done with 9 smaller squares (or pixels in this case) which I rotated 45 degrees. The top square is completely clear (zero opacity) while the other square are wearing nice colors.

Adding the shadow was more tricky. Because the css box-shadow property allows to cast a shadow behind a box-shaped element only, it would not have worked with the hidden square at the top. Thankfully, using the css filter property instead fixes this issue and puts a nice shadow around the heart-shaped element.