Give your Apache file Index a face lift with h5ai

Are you running an Apache server?

If you are then you would have been greeted by that horrible directory page more than once. Isn’t it time to get rid of the old to make way for the new? Give your Index pages a face lift with h5ai.

h5ai makes browsing directories on HTTP web servers more pleasant

h5ai is a modern replacement for the built in Index view for folder listings and it boast plenty of neat features. It is build with HTML5 Boilerplace, jQuery + Modernizr and can be implemented with just a few steps (2 in my case). It has been created by Lars Jung (@lrsjng) and he has a number of other useful libraries and tools, go check him out.

The design of h5ai is nice and minimal and uses CSS3 and sprinkles of JS to get things working. If you have JS turned off though it degrades nicely. There is a built in colorbox that enables you to view images on the fly and to top it all off there is a code syntax view so you can easily read things like JS and XML.

This definitely makes your index views easier to digest and easier to navigate around as there is a built in search and tree view.

There are plenty of optional features and extensions you can enable with h5ai as seen above where you can enable QR Codes on file hover. The whole install sits in one folder at the root of your site and all you need to do is get your server to add its index file to the index file list. Basically just add this line to your .htaccess

1
DirectoryIndex index.html index.php /_h5ai/server/php/index.php

Here are just some of the optional features that are available

  • breadcrumb for the current directory, linked to all parent directories
  • auto refresh
  • custom header and/or footer for each directory
  • select and download multiple files and folders at once, either as tar or zip archive
  • filter function for the displayed files and folders
  • folder sizes
  • localization with a lot of languages already included
  • link hover states between main view, breadcrumb and tree view
  • display HTTP web server details
  • image preview with keyboard support
  • text file preview with Markdown rendering and keyboard support
  • QR codes on hovering files
  • sort files and folders
  • status bar with additional information about files and folders
  • thumbnails for images, pdfs and movies
  • directory tree view
  • display breadcrumb in the browser title

If your not convinced yet then why not head on over to the official page or check out the Github repo.

h5ai demo

Know of any other cool scripts like this? Let me know so I can get them installed and featured on here.

Could this mean in the future we can Cache the rendering of DOM elements

I have just been watching this talk about the Shadow Dom by +Angelina Fabbro and although it is for things that I have read about and played with before something seems to have just clicked in my head (where else would it click?).

I love the idea of making re-usable components but always thought that scoped JS and CSS would be enough, why add on this layer of complexity with the Shadow Dom? I looked at it as just another way to hide spam content. A way to display something without Google being able to see it so you can market a page the best way possible but when you visit it you just seem spam, everywhere >_>

I have just stopped this video at 8:49, the thing that has clicked for me is that the Shadow Root is then placed into the Host Node… The rendering of the Shadow Node was done by the Shadow Root!

I’m sure I mentioned this to +Paul Irish or +Addy Osmani  before but I always thought it would be neat to give Front-end devs a way to do what Flash devs have been doing for a while… cacheAsBitmap…. Tell the browser that this section shouldn’t be updated, no matter what.

Am I right in thinking that each Shadow Dom could be rendered and cached this way and hence save on Render times? keeping the FPS down and only having to render when its Child Nodes become *dirty*…

There may not be a way to get the browser to cache this just yet, but having an attribute we can change for this would be most useful. Having the browser *cough*chrome*cough* cache these automatically would be useful too. Who knows the structure of our pages better than us right? Why can’t we say when to and not to update a frame?

Either way that has just made Components a lot more tempting in my books.

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

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 ;-)