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.
See the Pen Ed Emberly Car (CSS) by Patricia Kruep (@littleberry) on CodePen.
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.
See the Pen Ed Emberly Another Car (CSS) by Patricia Kruep (@littleberry) on CodePen.
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.
See the Pen Ed Emberly Convertable (CSS) by Patricia Kruep (@littleberry) on CodePen.
This model modifies the base model by extending the length, adding another set of windows, and flattening the back end.
See the Pen Ed Emberly Station Wagon (CSS) by Patricia Kruep (@littleberry) on CodePen.
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.
See the Pen Ed Emberly Car Gallery (CSS) by Patricia Kruep (@littleberry) on CodePen.
We like to move it
Cars are a lot more fun to watch on the road that 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.
See the Pen Emberly Autos Drive-thru by Patricia Kruep (@littleberry) on CodePen.