It starts with a rectangle: Emberly Base Model

In his classic Make a World book, Ed Emberly shows us how we can draw enough things to fill a world using simple shapes and lines. I thought it would be a fun experiment to try building his cars using CSS and HTML. The graphics here are constructed solely with HTML elements (divs) and CSS. I used SCSS to build the CSS because that allowed some flexibility with variables, colors, etc. The cars are all assembled to relative measurements and should be more or less responsive.

Another car: Sport Coupe

One goal was to try a modular approach where I could take the base model and modify it slightly, based on the design modifications in Make a World. This is the sportier coupe model. The angled back end was particularly tricky and involved creative use of border settings to get a triangle shape. I imagine the newer CSS Shapes module that came out after completing these would have made things easier.

Putting the top down: Sport Coupe Convertible

Another modification, building on the Sport Coupe. The convertible model has the same body as the Sport Coupe. The top is folded back and is constructed in a similar fashion to the back end of the car.

Family Truckster

This model modifies the base model by extending the length, adding another set of windows, and flattening the back end.

All together now

The cars were all intended to be modularly-assembled (more cost effective production, right?). This pen shows all four models in the same code space. I had to make adjustments to the CSS and HTML to refine the modularity and prevent one model's styles from overriding another's.

We like to move it

Cars are a lot more fun to watch on the road than sitting in a lot. These cars zoom by in a CSS world (the road, curbs, and sign are all CSS/HTML based). The animation is also controlled using CSS animation. There are a couple of layers of animation. Each car has a 'bounce' animation to suggest the movement of the suspension on the road. Then, each car is animated going to and fro across the screen. The starting and ending points are based on some point outside the screen's width. The timing is adjusted so they zip back and forth at seemingly random intervals. I tried to push durations to keep the cars from syncing up. If left to run long enough, that will probably happen, but it takes longer than most people sit to watch the cars go by.