Add Social info to WordPress Profiles

Warning: Use of undefined constant is_author - assumed 'is_author' (this will throw an Error in a future version of PHP) in /home/designserver1/domains/validatethis.co.uk/www/wp-content/plugins/google-plus-author/google-plus-author.php on line 37

Warning: Use of undefined constant is_author - assumed 'is_author' (this will throw an Error in a future version of PHP) in /home/designserver1/domains/validatethis.co.uk/www/wp-content/plugins/google-plus-author/google-plus-author.php on line 56
Aaron Layton

Just a quick snippet for you all as I needed to do this recently for my custom AuthorBox on this site and I didn’t want to include a separate plugin to achieve this.

Just open up your functions.php and add the below…


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Add contact links

function add_contactmethod( $contactmethods ) {

    // Add Twitter

    $contactmethods['twitter'] = 'Twitter';

    // Add Facebook

    $contactmethods['facebook'] = 'Facebook';

    // Add Facebook

    $contactmethods['googleplus'] = 'Google+';

    // Add Facebook

    $contactmethods['skype'] = 'Skype';

    // Remove Yahoo IM



    unset($contactmethods['yim']);

    unset($contactmethods['aim']);



    return $contactmethods;

}



add_filter('user_contactmethods','add_contactmethod',10,1);

I would class the above as pretty self explanatory if your used to WordPress but if not let me try and break it down for you.

We add a custom filter to

user_contactmethods

This lets us intercept the listed options before being processed. We get passed an array which we store in $contactmethods

Array
(
    [aim] => AIM
    [yim] => Yahoo IM
    [jabber] => Jabber / Google Talk
)

From here we can just use normal PHP to create a new element to be stored. We could have used array_push() also but this way looks better to me. Try and keep the Key to one word or a hyphenated word, the value will be the text the end user sees.


1
2
// Add Twitter

$contactmethods[ KEY ] = VALUE;

Notice how I also unset some of the entries? These are just ones that I don’t feel I will need, you can either include these lines or not. Well I hope this helps you understand how to add your own custom contact details to the WordPress Profile pages. What’s that? You need to know how to get them back out aswell… ok then.

Retrieving Author information

Getting the new author meta information is really easy! Check out the official documentation on it afterwards here. If you are within the Loop then you can just use the below


1
2
3
// Get the Googleplus contact information

// This echo's out

the_author_meta( "googleplus");

Or if you need to use this somewhere else then just pass in the User ID along with the meta you want to get


1
2
3
// Get the Googleplus contact information

// This echo's out

the_author_meta( "googleplus", 21 //UserID );

Simple as that folks 😉

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 ^_^

Flash AS3 Countdown to Midnight

A few days ago I needed to create a countdown timer that went to midnight of the current day.

I’m just posting the code here for reference later down the line if I need it. If you find the code useful then leave a comment 😉

On a side note this code could be used to countdown to any date / time (example below).


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
package  {

    

    import flash.display.MovieClip;

    

    import flash.utils.Timer;                           // Import the timer and the event for it

    import flash.events.TimerEvent;

    

    public class main extends MovieClip {

        

        // Digital 7 Font - by Chess-7

        // http://www.dafont.com/chess-7-chess-7.d1833

        

        var currentTime:Date;                           // We dont need to instantiate this yet as it will get the time it was created

        var endDate:Date = new Date();                  // Set the endDate to the time now

        

        var clockTimer = new Timer(1000);               // Make a new timer and set it to 1000 milliseconds (or 1 sec)

        

        public function main() {

            // ValidateThis.co.uk

            // Learn what getTime, setDate and setHours does here : http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001580.html

            

            // Figure out midnight today

            endDate.setDate(endDate.getDate() + 1);     // Set the date to tomorrow

            endDate.setHours(0,0,0,0);

            

            // Lets start the countdown

            clockTimer.addEventListener(TimerEvent.TIMER, timerTick);

            clockTimer.start();

            

            // Update the timer for the first time

            updateCountdown();

        }

        

        private function timerTick(e:TimerEvent):void {

            updateCountdown();

        }

        

        public function updateCountdown():void {

            var currentTime:Date = new Date();              // We now create a new Date and it will give us the current time

            

            // Get the current time difference

            var timeDifference:Number = endDate.getTime() - currentTime.getTime();          // Divide by 1000 because the results are in milliseconds

            

            // Calculate times

            var seconds:Number = Math.floor(timeDifference / 1000);

            var minutes:Number = Math.floor(seconds / 60);

            var hours:Number = Math.floor(minutes / 60);

            var days:Number = Math.floor(hours / 24); 

            

            // Set the remainder of the division vars above

            hours %= 24;

            minutes %= 60;

            seconds %= 60;

            

            

            // If everything has counted down to 0

            if (seconds < 0 || minutes < 0 || hours < 0){

                myCountdown.txtTimeLeft.text = "Time over";

                clockTimer.stop();                      // Stop the clock from keep calling updateCountdown

            }else{

                // Create the strings for the clock so that we have a 0 infront of any number less than 10

                var tHours:String = (hours < 10) ? "0" + hours.toString() : hours.toString();

                var tMinutes:String = (minutes < 10) ? "0" + minutes.toString() : minutes.toString();

                var tSeconds:String = (seconds < 10) ? "0" + seconds.toString() : seconds.toString();

                

                // Set the text so we can read it

                myCountdown.txtTimeLeft.text = tHours + ":" + tMinutes + ":" + tSeconds;

            }

        }

    }

}

You can download a working copy here if you like

MidnightCountdown

ValidateThis

No pixels were harmed in the making of this site

Category Archives: Tutorials

Single element Pure CSS Animated Sprite

Final thoughts

Use LESS in JSFiddle, the easy way

Flash AS3 Countdown to Midnight

Popular Posts