R2 in Tatooine:
I wanted to see if I could build a simple animated scene without using any images or JavaScript, the choice of R2D2 running around Tatooine was obvious.
Preview still:
Take a look at the actual animated version on cssdeck or just browse the code on github
Why would I want to build this purely in CSS?
I would have saved some time by using images instead of creating everything with markup but I wanted to see if I could actually do it.
CSS Shapes:
One thing to note is that CSS as it stands does not have shapes like hexagons, triangles or robots. This does not mean you won't be able to do it, its just more work.
An example would be the wheels, they are trapezoids and I achieve this by creating a div with no height and a large bottom border with smaller transparent side borders, so the wheel itself is represented by the div's bottom border instead of the div itself.
The following Code:
height: 0;
width: 30px;
border-bottom: 20px solid red;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
produces:
You can read more on this technique on css-tricks.
CSS Animations:
Animations are straight forward and require less trickery, the hovering of the sand speeder is composed by two pieces: a hover keyframe and an animation class:
keyframes hover {
50% {
transform:translateY(4px);
}
}
#speeder {
animation: hover 2s infinite;
}
this produces the hovering of the sand speeder in the background.
I wrote 700 lines of CSS and all I got was a moving robot:
The animations were easy to deal with but drawing R2 and the sand speeder felt like a "Square peg in a round hole" kind of problem, most of the time and code was spent in styling the markup.