Jun 16, 2010

Transparent App Engine logo

The other day I was looking for a transparent App Engine Logo to use in this blog.
Unfortunately I could not find one so I had to make it. Now it is available here .
As for people asking how I made this flying animation ( I know I know ...  it looks  stupid and obscuring etc. etc.  but I wanted this lovely plane to fly a bit !, it is all pure CSS  plus a couple of lines of js all made very easy with the new blogger template designer. Here are the steps :

1) Save the image in an image gadget:
From template designer  > Advanced > Add CSS : to add some css to make thing work.
 3) Position the image :
#Image1 div {position: fixed;top: 7%;left:1%}
4)Define a class so it can be applied by js to auto start the animation on page load or on click using a little js  :
.nmanimate {
-webkit-animation-name: flyplane;
-webkit-animation-duration: 60s;
-webkit-animation-iteration-count: 1;
5) Or make the animation start  with hover ... : 
#Image1 div:hover {
-webkit-animation-name: flyplane;
-webkit-animation-duration: 60s;
-webkit-animation-iteration-count: 2;

(*) It only works on Chrome but it degrades gracefully in other browsers, besides most of the visitors here are Chrome users.
(* *) Lets hope some body with a more creative mind than mine picks up from here an recreates it in a much better way  ie. use multiple css backgrounds to create a parallax effect.

(*) For people wanting the transparent App Engine logo they can get it from here: Logo

No comments:

Post a Comment