Late last week I was skipping over the latest tweets for jsfiddle just to see if there was anything interesting. I came across a fiddle by Joshua Hibbert where he asked people to guess how he had made this image with only 1 element.

I had no idea at first but after seeing him working fiddle I decided to take it one step further and get some animation in there.

Pretty cool right? The effect is really simple to do as it is just multiple box-shadows! Here is the sample code for the smaller question box.

As you can imagine, creating this effect takes a little time and creating multiple sizes takes even longer. Just getting the coordinates and the colors in the right place is a real pain. As I was looking around through the list of #jsfiddle tweets this one also popped.

I immediately forked it so unfortunately I can’t remember the name of the original creator.

Update: The original creator of the Mushroom was Jesper Hills - (Fiddle), great work Jesper (#hattip Harry Robert)

Jesper had used SASS to make the coordinate creation a lot easier to deal with. This was a great idea so I decided to base my version off his (or her) work.

My aim was to get all of this working in 1 fiddle but unfortunately SASS doesn’t compile correctly when using the @-webkit-keyframe. Instead I had to generate 4 separate fiddles and then merge my work together.

• Frame 1
• Frame 2
• Frame 3
• Frame 4

After I had all my frames I just needed to put them in keyframes and set the timing. The end effect is pretty cool but they are currently fading between each keyframe (is there any way to stop that? Update: Thanks to Harry Roberts for -webkit-animation-timing-function:step-start; works great)

1
2
3
4
5
6
7
8
9
10
11
12
13
.sprite-question-box-small{

    height:1px;

    width:1px;



    -webkit-animation: question-box-idle-small 0.8s infinite;

}



@-webkit-keyframes question-box-idle-small {

    0% { box-shadow:1px 0 0 #d8b018, 2px 0 0 #d8b018, 3px 0 0 #d8b018, 4px 0 0 #d8b018, 5px 0 0 #d8b018, 6px 0 0 #d8b018, 7px 0 0 #d8b018, 8px 0 0 #d8b018, 9px 0 0 #d8b018, 10px 0 0 #d8b018, 11px 0 0 #d8b018, 12px 0 0 #d8b018, 13px 0 0 #d0a820, 14px 0 0 #d0a820, 0 1px 0 #d8b018, 1px 1px 0 #e8c030, 2px 1px 0 #f8f8f8, 3px 1px 0 #f8f8f8, 4px 1px 0 #f8e888, 5px 1px 0 #f8e888, 6px 1px 0 #f8e888, 7px 1px 0 #f8e888, 8px 1px 0 #f8e888, 9px 1px 0 #f8e888, 10px 1px 0 #f8e888, 11px 1px 0 #f8e888, 12px 1px 0 #f8d028, 13px 1px 0 #f8d028, 14px 1px 0 #c8a018, 15px 1px 0 #884810, 0 2px 0 #d8b018, 1px 2px 0 #f8e888, 2px 2px 0 #602800, 3px 2px 0 #e0b018, 4px 2px 0 #e0b018, 5px 2px 0 #e0b018, 6px 2px 0 #e0b018, 7px 2px 0 #e0b018, 8px 2px 0 #d8b018, 9px 2px 0 #d8b018, 10px 2px 0 #d8b018, 11px 2px 0 #d8b018, 12px 2px 0 #d0a820, 13px 2px 0 #602800, 14px 2px 0 #b08018, 15px 2px 0 #602800, 0 3px 0 #d8b018, 1px 3px 0 #f8e888, 2px 3px 0 #e0b018, 3px 3px 0 #e0b018, 4px 3px 0 #f8f8f8, 5px 3px 0 #f8f8f8, 6px 3px 0 #f8f8f8, 7px 3px 0 #f8f8f8, 8px 3px 0 #f8f8f8, 9px 3px 0 #f8f8f8, 10px 3px 0 #f8f8f8, 11px 3px 0 #f8f8f8, 12px 3px 0 #e0b018, 13px 3px 0 #d0a820, 14px 3px 0 #b08018, 15px 3px 0 #602800, 0 4px 0 #d8b018, 1px 4px 0 #f8d028, 2px 4px 0 #e0b018, 3px 4px 0 #f8f8f8, 4px 4px 0 #f8f8f8, 5px 4px 0 #f8f8f8, 6px 4px 0 #f8f8f8, 7px 4px 0 #f8f8f8, 8px 4px 0 #f8f8f8, 9px 4px 0 #f8f8f8, 10px 4px 0 #f8f8f8, 11px 4px 0 #f8f8f8, 12px 4px 0 #f8f8f8, 13px 4px 0 #884810, 14px 4px 0 #b08018, 15px 4px 0 #602800, 0 5px 0 #d8b018, 1px 5px 0 #f8d028, 2px 5px 0 #e0b018, 3px 5px 0 #f8f8f8, 4px 5px 0 #f8f8f8, 5px 5px 0 #f8f8f8, 6px 5px 0 #884810, 7px 5px 0 #884810, 8px 5px 0 #884810, 9px 5px 0 #884810, 10px 5px 0 #f8f8f8, 11px 5px 0 #f8f8f8, 12px 5px 0 #f8f8f8, 13px 5px 0 #884810, 14px 5px 0 #b08018, 15px 5px 0 #602800, 0 6px 0 #d0a820, 1px 6px 0 #e8c030, 2px 6px 0 #e0b018, 3px 6px 0 #f8f8f8, 4px 6px 0 #f8f8f8, 5px 6px 0 #f8f8f8, 6px 6px 0 #b08018, 7px 6px 0 #d8b018, 8px 6px 0 #d8b018, 9px 6px 0 #d8b018, 10px 6px 0 #f8f8f8, 11px 6px 0 #f8f8f8, 12px 6px 0 #f8f8f8, 13px 6px 0 #884810, 14px 6px 0 #986018, 15px 6px 0 #602800, 0 7px 0 #d0a820, 1px 7px 0 #e8c030, 2px 7px 0 #e0b018, 3px 7px 0 #884810, 4px 7px 0 #884810, 5px 7px 0 #884810, 6px 7px 0 #d0a820, 7px 7px 0 #f8f8f8, 8px 7px 0 #f8f8f8, 9px 7px 0 #f8f8f8, 10px 7px 0 #f8f8f8, 11px 7px 0 #f8f8f8, 12px 7px 0 #f8f8f8, 13px 7px 0 #884810, 14px 7px 0 #986018, 15px 7px 0 #602800, 0 8px 0 #d0a820, 1px 8px 0 #e8c030, 2px 8px 0 #d8b018, 3px 8px 0 #d8b018, 4px 8px 0 #d8b018, 5px 8px 0 #d8b018, 6px 8px 0 #f8f8f8, 7px 8px 0 #f8f8f8, 8px 8px 0 #f8f8f8, 9px 8px 0 #f8f8f8, 10px 8px 0 #f8f8f8, 11px 8px 0 #f8f8f8, 12px 8px 0 #d0a820, 13px 8px 0 #884810, 14px 8px 0 #986018, 15px 8px 0 #602800, 0 9px 0 #c8a018, 1px 9px 0 #e0b018, 2px 9px 0 #d8b018, 3px 9px 0 #d8b018, 4px 9px 0 #d8b018, 5px 9px 0 #d0a820, 6px 9px 0 #f8f8f8, 7px 9px 0 #f8f8f8, 8px 9px 0 #f8f8f8, 9px 9px 0 #f8f8f8, 10px 9px 0 #884810, 11px 9px 0 #884810, 12px 9px 0 #884810, 13px 9px 0 #c8a018, 14px 9px 0 #986018, 15px 9px 0 #602800, 0 10px 0 #b08018, 1px 10px 0 #e0b018, 2px 10px 0 #d8b018, 3px 10px 0 #d8b018, 4px 10px 0 #d0a820, 5px 10px 0 #d0a820, 6px 10px 0 #f8f8f8, 7px 10px 0 #f8f8f8, 8px 10px 0 #f8f8f8, 9px 10px 0 #f8f8f8, 10px 10px 0 #884810, 11px 10px 0 #c8a018, 12px 10px 0 #c8a018, 13px 10px 0 #c8a018, 14px 10px 0 #884810, 15px 10px 0 #602800, 0 11px 0 #b08018, 1px 11px 0 #d8b018, 2px 11px 0 #d8b018, 3px 11px 0 #d0a820, 4px 11px 0 #d0a820, 5px 11px 0 #d0a820, 6px 11px 0 #b08018, 7px 11px 0 #884810, 8px 11px 0 #884810, 9px 11px 0 #884810, 10px 11px 0 #884810, 11px 11px 0 #c8a018, 12px 11px 0 #c8a018, 13px 11px 0 #c8a018, 14px 11px 0 #884810, 15px 11px 0 #602800, 0 12px 0 #b08018, 1px 12px 0 #d8b018, 2px 12px 0 #d0a820, 3px 12px 0 #d0a820, 4px 12px 0 #d0a820, 5px 12px 0 #d0a820, 6px 12px 0 #f8f8f8, 7px 12px 0 #f8f8f8, 8px 12px 0 #f8f8f8, 9px 12px 0 #f8f8f8, 10px 12px 0 #884810, 11px 12px 0 #c8a018, 12px 12px 0 #c8a018, 13px 12px 0 #c8a018, 14px 12px 0 #884810, 15px 12px 0 #602800, 0 13px 0 #b08018, 1px 13px 0 #c8a018, 2px 13px 0 #602800, 3px 13px 0 #b08018, 4px 13px 0 #b08018, 5px 13px 0 #b08018, 6px 13px 0 #f8f8f8, 7px 13px 0 #f8f8f8, 8px 13px 0 #f8f8f8, 9px 13px 0 #f8f8f8, 10px 13px 0 #884810, 11px 13px 0 #b08018, 12px 13px 0 #b08018, 13px 13px 0 #602800, 14px 13px 0 #884810, 15px 13px 0 #602800, 0 14px 0 #884810, 1px 14px 0 #986018, 2px 14px 0 #986018, 3px 14px 0 #986018, 4px 14px 0 #986018, 5px 14px 0 #986018, 6px 14px 0 #884810, 7px 14px 0 #884810, 8px 14px 0 #884810, 9px 14px 0 #884810, 10px 14px 0 #884810, 11px 14px 0 #986018, 12px 14px 0 #986018, 13px 14px 0 #986018, 14px 14px 0 #884810, 15px 14px 0 #602800, 1px 15px 0 #602800, 2px 15px 0 #602800, 3px 15px 0 #602800, 4px 15px 0 #602800, 5px 15px 0 #602800, 6px 15px 0 #602800, 7px 15px 0 #602800, 8px 15px 0 #602800, 9px 15px 0 #602800, 10px 15px 0 #602800, 11px 15px 0 #602800, 12px 15px 0 #602800, 13px 15px 0 #602800, 14px 15px 0 #602800 }

    33% { box-shadow:1px 0 0 #d8b018, 2px 0 0 #d8b018, 3px 0 0 #d8b018, 4px 0 0 #d8b018, 5px 0 0 #d8b018, 6px 0 0 #d8b018, 7px 0 0 #d8b018, 8px 0 0 #d8b018, 9px 0 0 #d8b018, 10px 0 0 #d8b018, 11px 0 0 #d8b018, 12px 0 0 #d8b018, 13px 0 0 #d0a820, 14px 0 0 #d0a820, 0 1px 0 #d8b018, 1px 1px 0 #e8c030, 2px 1px 0 #f8f8f8, 3px 1px 0 #f8f8f8, 4px 1px 0 #f8e888, 5px 1px 0 #f8e888, 6px 1px 0 #f8e888, 7px 1px 0 #f8e888, 8px 1px 0 #f8e888, 9px 1px 0 #f8e888, 10px 1px 0 #f8e888, 11px 1px 0 #f8e888, 12px 1px 0 #f8d028, 13px 1px 0 #f8d028, 14px 1px 0 #c8a018, 15px 1px 0 #884810, 0 2px 0 #d8b018, 1px 2px 0 #f8e888, 2px 2px 0 #602800, 3px 2px 0 #e0b018, 4px 2px 0 #e0b018, 5px 2px 0 #e0b018, 6px 2px 0 #e0b018, 7px 2px 0 #e0b018, 8px 2px 0 #d8b018, 9px 2px 0 #d8b018, 10px 2px 0 #d8b018, 11px 2px 0 #d8b018, 12px 2px 0 #d0a820, 13px 2px 0 #602800, 14px 2px 0 #b08018, 15px 2px 0 #602800, 0 3px 0 #d8b018, 1px 3px 0 #f8e888, 2px 3px 0 #e0b018, 3px 3px 0 #e0b018, 4px 3px 0 #e0b018, 5px 3px 0 #e0b018, 6px 3px 0 #e0b018, 7px 3px 0 #d0a820, 8px 3px 0 #f8f8f8, 9px 3px 0 #f8f8f8, 10px 3px 0 #f8f8f8, 11px 3px 0 #f8f8f8, 12px 3px 0 #f8f8f8, 13px 3px 0 #f8f8f8, 14px 3px 0 #f8f8f8, 15px 3px 0 #602800, 0 4px 0 #d8b018, 1px 4px 0 #f8f8f8, 2px 4px 0 #884810, 3px 4px 0 #e0b018, 4px 4px 0 #e0b018, 5px 4px 0 #e0b018, 6px 4px 0 #d8b018, 7px 4px 0 #f8f8f8, 8px 4px 0 #f8f8f8, 9px 4px 0 #f8f8f8, 10px 4px 0 #f8f8f8, 11px 4px 0 #f8f8f8, 12px 4px 0 #f8f8f8, 13px 4px 0 #f8f8f8, 14px 4px 0 #f8f8f8, 15px 4px 0 #602800, 0 5px 0 #d8b018, 1px 5px 0 #f8f8f8, 2px 5px 0 #884810, 3px 5px 0 #e0b018, 4px 5px 0 #e0b018, 5px 5px 0 #d8b018, 6px 5px 0 #d8b018, 7px 5px 0 #f8f8f8, 8px 5px 0 #f8f8f8, 9px 5px 0 #f8f8f8, 10px 5px 0 #884810, 11px 5px 0 #884810, 12px 5px 0 #884810, 13px 5px 0 #884810, 14px 5px 0 #f8f8f8, 15px 5px 0 #602800, 0 6px 0 #d0a820, 1px 6px 0 #f8f8f8, 2px 6px 0 #884810, 3px 6px 0 #e0b018, 4px 6px 0 #d8b018, 5px 6px 0 #d8b018, 6px 6px 0 #d8b018, 7px 6px 0 #f8f8f8, 8px 6px 0 #f8f8f8, 9px 6px 0 #f8f8f8, 10px 6px 0 #b08018, 11px 6px 0 #d0a820, 12px 6px 0 #d0a820, 13px 6px 0 #d0a820, 14px 6px 0 #f8f8f8, 15px 6px 0 #602800, 0 7px 0 #d0a820, 1px 7px 0 #f8f8f8, 2px 7px 0 #884810, 3px 7px 0 #d8b018, 4px 7px 0 #d8b018, 5px 7px 0 #d8b018, 6px 7px 0 #d8b018, 7px 7px 0 #884810, 8px 7px 0 #884810, 9px 7px 0 #884810, 10px 7px 0 #d0a820, 11px 7px 0 #f8f8f8, 12px 7px 0 #f8f8f8, 13px 7px 0 #f8f8f8, 14px 7px 0 #f8f8f8, 15px 7px 0 #602800, 0 8px 0 #d0a820, 1px 8px 0 #e0b018, 2px 8px 0 #884810, 3px 8px 0 #d8b018, 4px 8px 0 #d8b018, 5px 8px 0 #d8b018, 6px 8px 0 #d0a820, 7px 8px 0 #d0a820, 8px 8px 0 #d0a820, 9px 8px 0 #d0a820, 10px 8px 0 #f8f8f8, 11px 8px 0 #f8f8f8, 12px 8px 0 #f8f8f8, 13px 8px 0 #f8f8f8, 14px 8px 0 #f8f8f8, 15px 8px 0 #602800, 0 9px 0 #c8a018, 1px 9px 0 #884810, 2px 9px 0 #d8b018, 3px 9px 0 #d8b018, 4px 9px 0 #d8b018, 5px 9px 0 #d0a820, 6px 9px 0 #d0a820, 7px 9px 0 #d0a820, 8px 9px 0 #d0a820, 9px 9px 0 #d0a820, 10px 9px 0 #f8f8f8, 11px 9px 0 #f8f8f8, 12px 9px 0 #f8f8f8, 13px 9px 0 #f8f8f8, 14px 9px 0 #986018, 15px 9px 0 #602800, 0 10px 0 #b08018, 1px 10px 0 #e0b018, 2px 10px 0 #d8b018, 3px 10px 0 #d8b018, 4px 10px 0 #d0a820, 5px 10px 0 #d0a820, 6px 10px 0 #d0a820, 7px 10px 0 #d0a820, 8px 10px 0 #d0a820, 9px 10px 0 #c8a018, 10px 10px 0 #f8f8f8, 11px 10px 0 #f8f8f8, 12px 10px 0 #f8f8f8, 13px 10px 0 #f8f8f8, 14px 10px 0 #884810, 15px 10px 0 #602800, 0 11px 0 #b08018, 1px 11px 0 #d8b018, 2px 11px 0 #d8b018, 3px 11px 0 #d0a820, 4px 11px 0 #d0a820, 5px 11px 0 #d0a820, 6px 11px 0 #d0a820, 7px 11px 0 #d0a820, 8px 11px 0 #c8a018, 9px 11px 0 #c8a018, 10px 11px 0 #b08018, 11px 11px 0 #884810, 12px 11px 0 #884810, 13px 11px 0 #884810, 14px 11px 0 #884810, 15px 11px 0 #602800, 0 12px 0 #b08018, 1px 12px 0 #d8b018, 2px 12px 0 #d0a820, 3px 12px 0 #d0a820, 4px 12px 0 #d0a820, 5px 12px 0 #d0a820, 6px 12px 0 #d0a820, 7px 12px 0 #c8a018, 8px 12px 0 #c8a018, 9px 12px 0 #c8a018, 10px 12px 0 #f8f8f8, 11px 12px 0 #f8f8f8, 12px 12px 0 #f8f8f8, 13px 12px 0 #f8f8f8, 14px 12px 0 #884810, 15px 12px 0 #602800, 0 13px 0 #b08018, 1px 13px 0 #c8a018, 2px 13px 0 #602800, 3px 13px 0 #b08018, 4px 13px 0 #b08018, 5px 13px 0 #b08018, 6px 13px 0 #b08018, 7px 13px 0 #b08018, 8px 13px 0 #b08018, 9px 13px 0 #b08018, 10px 13px 0 #f8f8f8, 11px 13px 0 #f8f8f8, 12px 13px 0 #f8f8f8, 13px 13px 0 #f8f8f8, 14px 13px 0 #884810, 15px 13px 0 #602800, 0 14px 0 #884810, 1px 14px 0 #986018, 2px 14px 0 #986018, 3px 14px 0 #986018, 4px 14px 0 #986018, 5px 14px 0 #986018, 6px 14px 0 #986018, 7px 14px 0 #986018, 8px 14px 0 #986018, 9px 14px 0 #986018, 10px 14px 0 #884810, 11px 14px 0 #884810, 12px 14px 0 #884810, 13px 14px 0 #884810, 14px 14px 0 #884810, 15px 14px 0 #602800, 1px 15px 0 #602800, 2px 15px 0 #602800, 3px 15px 0 #602800, 4px 15px 0 #602800, 5px 15px 0 #602800, 6px 15px 0 #602800, 7px 15px 0 #602800, 8px 15px 0 #602800, 9px 15px 0 #602800, 10px 15px 0 #602800, 11px 15px 0 #602800, 12px 15px 0 #602800, 13px 15px 0 #602800, 14px 15px 0 #602800 }

    66% { box-shadow:1px 0 0 #d8b018, 2px 0 0 #d8b018, 3px 0 0 #d8b018, 4px 0 0 #d8b018, 5px 0 0 #d8b018, 6px 0 0 #d8b018, 7px 0 0 #d8b018, 8px 0 0 #d8b018, 9px 0 0 #d8b018, 10px 0 0 #d8b018, 11px 0 0 #d8b018, 12px 0 0 #d8b018, 13px 0 0 #d0a820, 14px 0 0 #d0a820, 0 1px 0 #d8b018, 1px 1px 0 #e8c030, 2px 1px 0 #f8f8f8, 3px 1px 0 #f8f8f8, 4px 1px 0 #f8e888, 5px 1px 0 #f8e888, 6px 1px 0 #f8e888, 7px 1px 0 #f8e888, 8px 1px 0 #f8e888, 9px 1px 0 #f8e888, 10px 1px 0 #f8e888, 11px 1px 0 #f8e888, 12px 1px 0 #f8d028, 13px 1px 0 #f8d028, 14px 1px 0 #c8a018, 15px 1px 0 #884810, 0 2px 0 #d8b018, 1px 2px 0 #f8e888, 2px 2px 0 #602800, 3px 2px 0 #e0b018, 4px 2px 0 #e0b018, 5px 2px 0 #e0b018, 6px 2px 0 #e0b018, 7px 2px 0 #e0b018, 8px 2px 0 #d8b018, 9px 2px 0 #d8b018, 10px 2px 0 #d8b018, 11px 2px 0 #d8b018, 12px 2px 0 #d0a820, 13px 2px 0 #602800, 14px 2px 0 #b08018, 15px 2px 0 #602800, 0 3px 0 #d8b018, 1px 3px 0 #f8f8f8, 2px 3px 0 #f8f8f8, 3px 3px 0 #f8f8f8, 4px 3px 0 #d0a820, 5px 3px 0 #e0b018, 6px 3px 0 #e0b018, 7px 3px 0 #d8b018, 8px 3px 0 #d8b018, 9px 3px 0 #d8b018, 10px 3px 0 #d8b018, 11px 3px 0 #d0a820, 12px 3px 0 #f8f8f8, 13px 3px 0 #f8f8f8, 14px 3px 0 #f8f8f8, 15px 3px 0 #602800, 0 4px 0 #d8b018, 1px 4px 0 #f8f8f8, 2px 4px 0 #f8f8f8, 3px 4px 0 #f8f8f8, 4px 4px 0 #f8f8f8, 5px 4px 0 #884810, 6px 4px 0 #d8b018, 7px 4px 0 #d8b018, 8px 4px 0 #d8b018, 9px 4px 0 #d8b018, 10px 4px 0 #d0a820, 11px 4px 0 #f8f8f8, 12px 4px 0 #f8f8f8, 13px 4px 0 #f8f8f8, 14px 4px 0 #f8f8f8, 15px 4px 0 #602800, 0 5px 0 #d8b018, 1px 5px 0 #b08018, 2px 5px 0 #f8f8f8, 3px 5px 0 #f8f8f8, 4px 5px 0 #f8f8f8, 5px 5px 0 #884810, 6px 5px 0 #d8b018, 7px 5px 0 #d8b018, 8px 5px 0 #d8b018, 9px 5px 0 #d0a820, 10px 5px 0 #d0a820, 11px 5px 0 #f8f8f8, 12px 5px 0 #f8f8f8, 13px 5px 0 #f8f8f8, 14px 5px 0 #884810, 15px 5px 0 #602800, 0 6px 0 #d0a820, 1px 6px 0 #e0b018, 2px 6px 0 #f8f8f8, 3px 6px 0 #f8f8f8, 4px 6px 0 #f8f8f8, 5px 6px 0 #884810, 6px 6px 0 #d8b018, 7px 6px 0 #d8b018, 8px 6px 0 #d0a820, 9px 6px 0 #d0a820, 10px 6px 0 #d0a820, 11px 6px 0 #f8f8f8, 12px 6px 0 #f8f8f8, 13px 6px 0 #f8f8f8, 14px 6px 0 #986018, 15px 6px 0 #602800, 0 7px 0 #d0a820, 1px 7px 0 #f8f8f8, 2px 7px 0 #f8f8f8, 3px 7px 0 #f8f8f8, 4px 7px 0 #f8f8f8, 5px 7px 0 #884810, 6px 7px 0 #d8b018, 7px 7px 0 #d0a820, 8px 7px 0 #d0a820, 9px 7px 0 #d0a820, 10px 7px 0 #d0a820, 11px 7px 0 #b08018, 12px 7px 0 #884810, 13px 7px 0 #884810, 14px 7px 0 #986018, 15px 7px 0 #602800, 0 8px 0 #d0a820, 1px 8px 0 #f8f8f8, 2px 8px 0 #f8f8f8, 3px 8px 0 #f8f8f8, 4px 8px 0 #d0a820, 5px 8px 0 #884810, 6px 8px 0 #d0a820, 7px 8px 0 #d0a820, 8px 8px 0 #d0a820, 9px 8px 0 #d0a820, 10px 8px 0 #d0a820, 11px 8px 0 #c8a018, 12px 8px 0 #c8a018, 13px 8px 0 #c8a018, 14px 8px 0 #f8f8f8, 15px 8px 0 #602800, 0 9px 0 #c8a018, 1px 9px 0 #f8f8f8, 2px 9px 0 #884810, 3px 9px 0 #884810, 4px 9px 0 #884810, 5px 9px 0 #d0a820, 6px 9px 0 #d0a820, 7px 9px 0 #d0a820, 8px 9px 0 #d0a820, 9px 9px 0 #d0a820, 10px 9px 0 #c8a018, 11px 9px 0 #c8a018, 12px 9px 0 #c8a018, 13px 9px 0 #c8a018, 14px 9px 0 #f8f8f8, 15px 9px 0 #602800, 0 10px 0 #b08018, 1px 10px 0 #f8f8f8, 2px 10px 0 #884810, 3px 10px 0 #d8b018, 4px 10px 0 #d0a820, 5px 10px 0 #d0a820, 6px 10px 0 #d0a820, 7px 10px 0 #d0a820, 8px 10px 0 #d0a820, 9px 10px 0 #c8a018, 10px 10px 0 #c8a018, 11px 10px 0 #c8a018, 12px 10px 0 #c8a018, 13px 10px 0 #c8a018, 14px 10px 0 #f8f8f8, 15px 10px 0 #602800, 0 11px 0 #b08018, 1px 11px 0 #b08018, 2px 11px 0 #884810, 3px 11px 0 #d0a820, 4px 11px 0 #d0a820, 5px 11px 0 #d0a820, 6px 11px 0 #d0a820, 7px 11px 0 #d0a820, 8px 11px 0 #c8a018, 9px 11px 0 #c8a018, 10px 11px 0 #c8a018, 11px 11px 0 #c8a018, 12px 11px 0 #c8a018, 13px 11px 0 #c8a018, 14px 11px 0 #884810, 15px 11px 0 #602800, 0 12px 0 #b08018, 1px 12px 0 #f8f8f8, 2px 12px 0 #884810, 3px 12px 0 #d0a820, 4px 12px 0 #d0a820, 5px 12px 0 #d0a820, 6px 12px 0 #d0a820, 7px 12px 0 #c8a018, 8px 12px 0 #c8a018, 9px 12px 0 #c8a018, 10px 12px 0 #c8a018, 11px 12px 0 #c8a018, 12px 12px 0 #c8a018, 13px 12px 0 #c8a018, 14px 12px 0 #f8f8f8, 15px 12px 0 #602800, 0 13px 0 #b08018, 1px 13px 0 #f8f8f8, 2px 13px 0 #602800, 3px 13px 0 #b08018, 4px 13px 0 #b08018, 5px 13px 0 #b08018, 6px 13px 0 #b08018, 7px 13px 0 #b08018, 8px 13px 0 #b08018, 9px 13px 0 #b08018, 10px 13px 0 #b08018, 11px 13px 0 #b08018, 12px 13px 0 #b08018, 13px 13px 0 #602800, 14px 13px 0 #f8f8f8, 15px 13px 0 #602800, 0 14px 0 #884810, 1px 14px 0 #884810, 2px 14px 0 #884810, 3px 14px 0 #986018, 4px 14px 0 #986018, 5px 14px 0 #986018, 6px 14px 0 #986018, 7px 14px 0 #986018, 8px 14px 0 #986018, 9px 14px 0 #986018, 10px 14px 0 #986018, 11px 14px 0 #986018, 12px 14px 0 #986018, 13px 14px 0 #986018, 14px 14px 0 #986018, 15px 14px 0 #602800, 1px 15px 0 #602800, 2px 15px 0 #602800, 3px 15px 0 #602800, 4px 15px 0 #602800, 5px 15px 0 #602800, 6px 15px 0 #602800, 7px 15px 0 #602800, 8px 15px 0 #602800, 9px 15px 0 #602800, 10px 15px 0 #602800, 11px 15px 0 #602800, 12px 15px 0 #602800, 13px 15px 0 #602800, 14px 15px 0 #602800 }

    100% { box-shadow:1px 0 0 #d8b018, 2px 0 0 #d8b018, 3px 0 0 #d8b018, 4px 0 0 #d8b018, 5px 0 0 #d8b018, 6px 0 0 #d8b018, 7px 0 0 #d8b018, 8px 0 0 #d8b018, 9px 0 0 #d8b018, 10px 0 0 #d8b018, 11px 0 0 #d8b018, 12px 0 0 #d8b018, 13px 0 0 #d0a820, 14px 0 0 #d0a820, 0 1px 0 #d8b018, 1px 1px 0 #e8c030, 2px 1px 0 #f8f8f8, 3px 1px 0 #f8f8f8, 4px 1px 0 #f8e888, 5px 1px 0 #f8e888, 6px 1px 0 #f8e888, 7px 1px 0 #f8e888, 8px 1px 0 #f8e888, 9px 1px 0 #f8e888, 10px 1px 0 #f8e888, 11px 1px 0 #f8e888, 12px 1px 0 #f8d028, 13px 1px 0 #f8d028, 14px 1px 0 #c8a018, 15px 1px 0 #884810, 0 2px 0 #d8b018, 1px 2px 0 #f8e888, 2px 2px 0 #602800, 3px 2px 0 #e0b018, 4px 2px 0 #e0b018, 5px 2px 0 #e0b018, 6px 2px 0 #e0b018, 7px 2px 0 #e0b018, 8px 2px 0 #d8b018, 9px 2px 0 #d8b018, 10px 2px 0 #d8b018, 11px 2px 0 #d8b018, 12px 2px 0 #d0a820, 13px 2px 0 #602800, 14px 2px 0 #b08018, 15px 2px 0 #602800, 0 3px 0 #d8b018, 1px 3px 0 #f8f8f8, 2px 3px 0 #f8f8f8, 3px 3px 0 #f8f8f8, 4px 3px 0 #f8f8f8, 5px 3px 0 #f8f8f8, 6px 3px 0 #f8f8f8, 7px 3px 0 #f8f8f8, 8px 3px 0 #d0a820, 9px 3px 0 #d8b018, 10px 3px 0 #d8b018, 11px 3px 0 #d0a820, 12px 3px 0 #d0a820, 13px 3px 0 #d0a820, 14px 3px 0 #b08018, 15px 3px 0 #602800, 0 4px 0 #d8b018, 1px 4px 0 #f8f8f8, 2px 4px 0 #f8f8f8, 3px 4px 0 #f8f8f8, 4px 4px 0 #f8f8f8, 5px 4px 0 #f8f8f8, 6px 4px 0 #f8f8f8, 7px 4px 0 #f8f8f8, 8px 4px 0 #f8f8f8, 9px 4px 0 #884810, 10px 4px 0 #d0a820, 11px 4px 0 #d0a820, 12px 4px 0 #d0a820, 13px 4px 0 #d0a820, 14px 4px 0 #f8f8f8, 15px 4px 0 #602800, 0 5px 0 #d8b018, 1px 5px 0 #f8f8f8, 2px 5px 0 #884810, 3px 5px 0 #884810, 4px 5px 0 #884810, 5px 5px 0 #884810, 6px 5px 0 #f8f8f8, 7px 5px 0 #f8f8f8, 8px 5px 0 #f8f8f8, 9px 5px 0 #884810, 10px 5px 0 #d0a820, 11px 5px 0 #d0a820, 12px 5px 0 #d0a820, 13px 5px 0 #d0a820, 14px 5px 0 #f8f8f8, 15px 5px 0 #602800, 0 6px 0 #d0a820, 1px 6px 0 #f8f8f8, 2px 6px 0 #b08018, 3px 6px 0 #d0a820, 4px 6px 0 #d0a820, 5px 6px 0 #d0a820, 6px 6px 0 #f8f8f8, 7px 6px 0 #f8f8f8, 8px 6px 0 #f8f8f8, 9px 6px 0 #884810, 10px 6px 0 #d0a820, 11px 6px 0 #d0a820, 12px 6px 0 #d0a820, 13px 6px 0 #c8a018, 14px 6px 0 #f8f8f8, 15px 6px 0 #602800, 0 7px 0 #d0a820, 1px 7px 0 #884810, 2px 7px 0 #d0a820, 3px 7px 0 #f8f8f8, 4px 7px 0 #f8f8f8, 5px 7px 0 #f8f8f8, 6px 7px 0 #f8f8f8, 7px 7px 0 #f8f8f8, 8px 7px 0 #f8f8f8, 9px 7px 0 #884810, 10px 7px 0 #d0a820, 11px 7px 0 #d0a820, 12px 7px 0 #c8a018, 13px 7px 0 #c8a018, 14px 7px 0 #884810, 15px 7px 0 #602800, 0 8px 0 #d0a820, 1px 8px 0 #e8c030, 2px 8px 0 #f8f8f8, 3px 8px 0 #f8f8f8, 4px 8px 0 #f8f8f8, 5px 8px 0 #f8f8f8, 6px 8px 0 #f8f8f8, 7px 8px 0 #f8f8f8, 8px 8px 0 #d0a820, 9px 8px 0 #884810, 10px 8px 0 #d0a820, 11px 8px 0 #c8a018, 12px 8px 0 #c8a018, 13px 8px 0 #c8a018, 14px 8px 0 #986018, 15px 8px 0 #602800, 0 9px 0 #c8a018, 1px 9px 0 #e0b018, 2px 9px 0 #f8f8f8, 3px 9px 0 #f8f8f8, 4px 9px 0 #f8f8f8, 5px 9px 0 #f8f8f8, 6px 9px 0 #884810, 7px 9px 0 #884810, 8px 9px 0 #884810, 9px 9px 0 #d0a820, 10px 9px 0 #c8a018, 11px 9px 0 #c8a018, 12px 9px 0 #c8a018, 13px 9px 0 #c8a018, 14px 9px 0 #986018, 15px 9px 0 #602800, 0 10px 0 #b08018, 1px 10px 0 #e0b018, 2px 10px 0 #f8f8f8, 3px 10px 0 #f8f8f8, 4px 10px 0 #f8f8f8, 5px 10px 0 #f8f8f8, 6px 10px 0 #884810, 7px 10px 0 #d0a820, 8px 10px 0 #d0a820, 9px 10px 0 #c8a018, 10px 10px 0 #c8a018, 11px 10px 0 #c8a018, 12px 10px 0 #c8a018, 13px 10px 0 #c8a018, 14px 10px 0 #884810, 15px 10px 0 #602800, 0 11px 0 #b08018, 1px 11px 0 #d8b018, 2px 11px 0 #b08018, 3px 11px 0 #884810, 4px 11px 0 #884810, 5px 11px 0 #884810, 6px 11px 0 #884810, 7px 11px 0 #d0a820, 8px 11px 0 #c8a018, 9px 11px 0 #c8a018, 10px 11px 0 #c8a018, 11px 11px 0 #c8a018, 12px 11px 0 #c8a018, 13px 11px 0 #c8a018, 14px 11px 0 #884810, 15px 11px 0 #602800, 0 12px 0 #b08018, 1px 12px 0 #d8b018, 2px 12px 0 #f8f8f8, 3px 12px 0 #f8f8f8, 4px 12px 0 #f8f8f8, 5px 12px 0 #f8f8f8, 6px 12px 0 #884810, 7px 12px 0 #c8a018, 8px 12px 0 #c8a018, 9px 12px 0 #c8a018, 10px 12px 0 #c8a018, 11px 12px 0 #c8a018, 12px 12px 0 #c8a018, 13px 12px 0 #c8a018, 14px 12px 0 #884810, 15px 12px 0 #602800, 0 13px 0 #b08018, 1px 13px 0 #c8a018, 2px 13px 0 #f8f8f8, 3px 13px 0 #f8f8f8, 4px 13px 0 #f8f8f8, 5px 13px 0 #f8f8f8, 6px 13px 0 #884810, 7px 13px 0 #b08018, 8px 13px 0 #b08018, 9px 13px 0 #b08018, 10px 13px 0 #b08018, 11px 13px 0 #b08018, 12px 13px 0 #b08018, 13px 13px 0 #602800, 14px 13px 0 #884810, 15px 13px 0 #602800, 0 14px 0 #884810, 1px 14px 0 #986018, 2px 14px 0 #884810, 3px 14px 0 #884810, 4px 14px 0 #884810, 5px 14px 0 #884810, 6px 14px 0 #884810, 7px 14px 0 #986018, 8px 14px 0 #986018, 9px 14px 0 #986018, 10px 14px 0 #986018, 11px 14px 0 #986018, 12px 14px 0 #986018, 13px 14px 0 #986018, 14px 14px 0 #884810, 15px 14px 0 #602800, 1px 15px 0 #602800, 2px 15px 0 #602800, 3px 15px 0 #602800, 4px 15px 0 #602800, 5px 15px 0 #602800, 6px 15px 0 #602800, 7px 15px 0 #602800, 8px 15px 0 #602800, 9px 15px 0 #602800, 10px 15px 0 #602800, 11px 15px 0 #602800, 12px 15px 0 #602800, 13px 15px 0 #602800, 14px 15px 0 #602800 }

}

Final thoughts

Although this effect is pretty cool, I can’t see it kicking off.

At first I was thinking about creating a Github project and maybe converting some popular emoticon sets to pure CSS. This would have taken forever though as having to create these 1 pixel at a time is just too much work.

Next I though maybe I should create the tool that can generate these? Maybe have it drag and drop and then some canvas element and JS could read out the pixel coords and colours and create the end CSS. Great idea so I started thinking about it a little more…

In my day job I’m all for front end speed and making sure the end users experience of a site is as good as it can be so naturally the next thing I thought about was, is it actually worth the effort? We use sprite sheets instead of separate images to minimize the data and HTTP requests so this seemed as though it ticked all the box’s but there was another thought that kept jumping in my head.

When I have created games for any device in the past it is generally best to use sprites instead of getting the device to generate any sort of effect. The generation time of custom effects is outweighed by the speed of just displaying an image. To generate the above 4 framed demo the browser has to draw 1,008 separate box-shadows (252 per slide). That’s a lot of shadows and obviously would be slower than just displaying an image.

The final nail in the coffin for this example is the end file size. For just the base CSS to create the class and the keyframes for 1 browser is around 24kb. If you include all of the vendor prefixes then this number jumps to 64kb. The below GIF file is just 3.64kb or 4kb on disk, its a no brainer for size. But what about the extra HTTP request again?

Well in this case I would just say to convert the image into a data uri and store it directly in the CSS file. This gets the base CSS down to 4.96kb or 8kb on disk.

1
background-image:url(data:image/gif;base64,R0lGODlhEAAQALMAAAAAAP////joiPjQKNiwGOjAMOCwGMigGNCoILCAGJhgGIhIEGAoAPj4+P///wAAACH5BAEAAA4ALAAAAAAQABAAAARp0JFJ60RIltaE/94wHAshMEaaVgiTMKaaIlzNwc2iEraN64ZJbUFcNBg0HaWWwNCQuUqRVkMaShdnj0GiODE2hStI+CIOtoUr6zwcEkV1ovx1o4eugyvB76cZCwqCg4Nxag4MiYqLiw4RADs=);

In closing, great to show off what can be done with web technologies but not practical. Of course I am open to opinions and any other ideas or thoughts you may have on this so drop me a comment and please share

Update: Also check out Animating sprites using CSS