Single element Pure CSS Animated Sprite

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.

1
2
3
4
5
6
<pre>    .sprite-question-box-small{
    height:1px;
    width:1px;

    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
}</pre>

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.

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

Use LESS in JSFiddle, the easy way

If your like me then you love online ‘tinker tools’ like JSFiddle, they allow you to quickly prototype your ideas and to share them with the world. I have been using it for a while now but one of the things that always bugged me is the lack of LESS support in the panels :-(

I decided to have a play and see if I can get LESS running but somehow still allow me to write my CSS in the correct panel. The quickest way I could think of doing this is with this one liner

1
2
3
<pre>
    (function(){ $('head style[type="text/css"]').attr('type', 'text/less');less.refreshStyles(); })()
</pre>

It’s a really simple 2 step shim. First find the <Style> tag and change its type to ‘text/less’. Second tell less to refresh the styles on the page. You can see a working version here

Of course this may not be the best way of doing this but its the first thing that came into my head. Got any suggestions for an improvement?

I have emailed Piotr Zalewa to see if there are any plans to implement LESS in the future so I will update here if I get a reply.

Edit: JSFiddle have their docs on GitHub here.

An Issue has already been raised to add LESS support but it has been closed of saying it will be in the Beta release

https://github.com/jsfiddle/jsfiddle-docs-alpha/issues/168

Update: Piotr replied to my email and informed me they are planning on adding a few extra languages to support. Although they state in the above issue that LESS support will in bete he says it might be possible to add it before although there would be no ETA.

Thanks for the reply Piotr and looking forward to future updates ^_^

Move the web forward

I figure I don’t post enough around here so I’m just going to start writing about the things that interest me, hope you like them and follow along.

I have been trying to catch up with the Web Platform just lately and I gotta say, I’m excited!!! There are so many new things on the horizon, so many new things to learn, so many new things to try and wrap my head around. Lets take a look at some of them and how you can help.

Firstly let me just say I am in part writing this because of Move the web forward.

Publish what you learn and don’t be afraid to make mistakes. Publish to your personal blog and keep your posts updated. Be sure to speak with your own voice! Remember that it is okay to not be an absolute authority on a subject to author a post! Always ask questions and prompt conversations. There is seldom a wrong question or a wrong answer.

If you havn’t seen this site before then go take a look as it has a lot of like minded people and a lot of articles / projects to learn from.

New features

Web Components

These excite me the most (and Intents) as I can for see a lot of open source components being written and made into shared libraries. The new component model for the Web (aka Web Components) consists of four separate pieces designed to be used together to let application authors define widgets that are easy to reuse and share. The pieces are:

  • Templates, which define chunks of markup that are inert but can be activated for later use
  • Decorators, which apply templates to let CSS affect rich visual and behavioral changes to documents
  • Custom Elements, which let authors define their own elements, including new presentation and API, that can be used in HTML documents
  • Shadow DOM which defines how presentation and behavior of decorators and custom elements fit together in the DOM tree.

Note: Decorators and custom Elements are called components.

I can’t say I’m looking forward to custom elements though as I think this will cause chaos when trying to read through the HTML of a site. If everyone suddenly starts to create their own elements, and their own API for using them then this has the possibility of getting out of hand real fast.

Check the current status of Web Components

Web Intents

Wow, I’m so glad this is coming to the Web! Most modern web sites are inter-connected, for example logging into Facebook, sharing on Twitter, editing a photo with Picasa. Users expect popular sites to just work with their favorite service but the truth is these things take time to implement.

It is impossible for developers to anticipate every new service and to integrate with every existing service that the end user prefers. Instead most sites just stick to the most popular services and this integration still takes time to complete.

Web Intents to the rescue! Web Intents is a framework for client-side service discovery and inter-application communication. Services register their intention to be able to handle an action on the user’s behalf. Applications request to start an Action of a certain verb (share, edit, view, pick etc) and the system will find the appropriate Services for the user to use based on the user’s preference.

Web Intents puts the user in control of the service integration and makes the developer’s life simple. To read up on Web Intents head on over to http://webintents.org/ also make sure to check out their Demos.

Push Notifications

Another great feature that I think the Web could really do with. These notifications work the same as on iOS devices where you don’t need a website open to receive a notification.

Google Chrome already supports desktop notifications which is a great start and I’m sure they will keep the same design. You can only receive these notifications while you are on the website in question though. Imagine just browsing the web and then a push notification coming through saying that an order has been dispatched?!!

There is still a lot of work that needs to go into Push Notifications as there isn’t any standardization and the only browser support is through a Chrome extension API. This doesn’t mean we can’t be brushing up on it now though ;-)

There are loads of other great features coming soon (some are already here). Here is a list of the general Web Platform features:

  • Styling Block elements with CSS filters and 3D transforms
  • Debugging on Mobile devices
  • Awesome developer tools
  • CSS Regions,new tools for text layout (think magazine layouts). Demos
  • Payments API
  • WebCam access through Javascript
  • Web Audio
  • WebGL
  • NaCI and GamePads

I would suggest heading over to http://movethewebforward.org/ and having a read through some of the articles and do like what I did and just write about them. The Web is what we make of it and it’s will get better with out help.

You can make the web as awesome as you want it to be. Browser vendors, standards editors and library creators actively seek your voice and your contribution.
Together we can move the web forward.

Is there anything I have left out? Got anything to add? Leave a comment ;-)

1 Like no Other Launched

Remember how I posted that Sneak Peek back in September? Well it was for our latest launched website 1 Like no Other! Why not check it out and then come back and read the rest of this article?

I don’t usually do write-ups on the sites that I have worked on but I enjoyed this project so why not.

The homepage for this site has gone through 4 different version that include a CSS3 animated intro, a HTML5 Book where you can click through each page and even a Flash version of the above in hopes that it would be faster to download on slower connections.

1LNO Homepage

The end version the client went for was a subtle parallax effect which works great! It gives you the ability to see all of graphics and illustrations for this seasons clothing. It went through many different revisions and many different layers (9 layers at one point) just goes to show that more is not always better.

1LNO Listing page

The product listing page was also fun to create for this project. The main filter system is pulled in through Ajax to reduce page load and to provide a nicer experience when navigating, who wants a page refresh anyway?

Once an Ajax request is finished all of the products animate to their new locations. This is a great effect and I hadn’t done anything like this before so it was great to learn something new at the same time. Most of the text that is on and around the site in a custom font called Paulson which works really well and is placed on with Cufon.

1LNO Product page

The product page was another nice one to do. I added some subtle animations to the alternate images and to the add to basket just to catch the users eye when they first navigate to it.

We went through a few versions of the carousel at the bottom of the page aswell. This went from a simple left and right carousel, to just one large image in the middle that was more like a zoom of item underneath it. The end version is definitely better and uses the jQuery easing plugin to give the animations a smoother transition.

When the product page was first made we just had a standard zoom on hover effect so that a potential customer could see the detail of the shirts. We found that this didn’t show enough though, instead I created a custom full page zoom to really show them off.

Custom product zoom

Well that’s the main pages of this ecommerce build but I have included more images below for you to look at. Let you know what you think in the comments or even go check out the website for youself and have a look around ;-)

CSS Off 2011

I finally got around to uploading my submission for CSSOff 2011 (http://www.unmatchedstyle.com/cssoff/).

I gotta say I’m not happy with it though. It started off really good, but then I got lazy and started putting it off. Next thing I knew I was coding away while Andrew was playing the Rocky theme tune on his phone. The design was really good and everything was meant to be responsive but the bottom half of the site just went wrong. Not through lack of skill, but lack of time.

Have a look for yourself here http://www.validatethis.co.uk/cssoff-2011/

I don’t think the submissions have been marked yet so I don’t know where I came but I will update this when I find out. I’m also going to enter into any other competitions like this so if you know of any then post them in the comments ;-)

New Twitter background

I had never really been one for Twitter, maybe because I just didn’t give it enough time but over the last few days I have been trying to be a little more active and engaging. I still only have 33 follows and I thank them all for adding me, I just need to get a few more.

To make my page seem a little more inviting I decided to design my own background. I love the way it has turned out and I think it perfectly compliments me and my style. Let me know what you think to it.

HelloWorld – three.js edition

I decided that it’s time I learnt HTML5 Canvas!

The idea has been swirling around my head for a while, but I didn’t have anything I would want to do with it? I started looking around and eventually settled on three.js. If you havn’t already seen it then go ahead and take a look, there are loads of cool examples.

OK plenty of examples, jsFiddle open… Go…. 2 hours later, 55 saves (or commits which ever what you look at it) and this is what I have come up with.

Just a quick cube, the stats counter, a quick debug logger for me and the awesome dat.GUI for some quick controls. Next I will try some keyboard controls :-D

Sneak Peak

A sneak peak of what I’m working on here at work. I’m having to animate everything but as you can see this has rotations, which are always fun to try and implement into older browsers.



Luckily I found some great plugins for jQuery that make the job a lot easier.

jQuery Transform
https://github.com/heygrady/transform/
This plugin uses CSS3 transforms if they are supported and if not then relies on the matrix filter for IE8 and below meaning it allows you to transform layers all the way down to IE6 and gives you loads of options like


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Go Crazydd
$('#example').transform({
    matrix: [1, 0, 0, 1, 0, 0], //applies a matrix
    reflect: true, //same as rotate(180deg)
    reflectX: true, //mirrored upside down
    reflectXY: true, //same as reflectX + rotate(-90deg)
    reflectY: true, //mirrored
    rotate: '45deg', //rotates 45 degrees
    skew: ['10deg', '10deg'], //skews 10 degrees on the x and y axis
    skewX: '10deg', //skews 10 degrees on the x axis
    skewY: '10deg', //skews 10 degrees on the y axis
    scale: [1.5, 1.5], //scales by 1.5 on the x and y axis
    scaleX: 1.5, //scales by 1.5 on the x axis
    scaleY: 1.5, //scales by 1.5 on the y axis
    translate: ['20px', '20px'], //moves the transformation 20px on the x and y axis
    translateX: '20px', //moves the transformation 20px on the x axis
    translateY: '20px', //moves the transformation 20px on the y axis
    origin: ['20%', '20%'] //changes the transformation origin
});

jQuery Easing
http://gsgd.co.uk/sandbox/jquery/easing/
When animating things its always nice to have more easing options that the standard ‘linear’ or ‘swing’. jQuery Easing gives you around 32 extra easing’s to make your job easier. It also allows you to setup your own custom easings.

PHP MVC Framework? Easy!!

OK been working on a project for work with +Andrew Beniston and it seems to be coming along quite nicely. We have done all the design work for the web pages and were just re-coding the back-end so that things should be a lot easier to manager.

We decided to make a PHP MVC framework as our workplace are currently using an ASP.NET MVC backend and it will help us to get our head around things more.

We started following a tutorial but quickly had to move away from it as our needs were a lot different. Were about 40% through at the moment, but not sure what pics if any to post on here (if any)? let me know…

Aaron Layton – Google+.