Attempted to recreate Justin Middendorp’s graphic illustration (“Cabin in the Woods”), which could be found here.
Day 9:
Day 10:
Added to the clouds.
See Codepen
This is far from complete. I still have to:
- Adjust the opacity of some connecting cloud parts for a better blend
- Add stars
- Add texture to the cabin exterior
- Taper the trees
- Get rid of the outlines of the borders of the triangle shapes that make up the tips of the grey trees/bushes
- Adjust the gradient of the sky background
- Improve the clouds
Not going to lie, halfway through this, I stopped trying to replicate Middendorp’s work down to the little details. But once that list of items above is completed, I might go back and try to get it closer to the original work again.
Takeaways:
- Plan the number of layers for the z-indexes, and make a separate note section in HTML to keep track of them (used 8 layers for this work)
- Used triangles for the tips of the grey trees/bushes — have to set the width and height to 0 pixels and use border-bottom as the triangle (border-left and border-right are supposed to be transparent)
- Used the transform: rotate(#deg) property to rotate the roofs onto the cabin
- While this was fun and immensely satisfying to put together, there was a lot of repetition (creating and moving shapes). I should have focused more on finding creative solutions to problems (see the list above) and learning new CSS properties and tricks
For the future:
- Find a way to replicate HTML elements efficiently i.e stars
- I made a lot of div elements with class=”star”, and then gave them each an unique id i.e. id=”star1″, id=”star2″ ; the CSS declaration for star contained properties that gave color and size to the elements; the id declarations gave position (top and left); but nothing was displayed. Why?
- Can I create the cabin exterior’s texture with table cells with borders or outlines that are dashed?
- Transparent borders didn’t really turn out transparent; find out why it didn’t work as expected
Ode to STEM 