Pure CSS Art: Days 9 & 10 – Cabin in the Woods

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

 

 

Pure CSS Art: Day 11

See Codepen 

I rushed this one, having started it around 11:30PM and trying to finish it before midnight. (That didn’t happen until 1AM. 1.5 hours haha. I feel like I’m regressing.)

Takeaways:

• Used box-shadow property to create the mouth — the mouth div itself is pink, and the black shadow rests right underneath it

• Created a triangle shape for the cone — this involved setting both the width and height to 0 pixels, the border-left and border-right to transparent (which actually didn’t turn transparent, so I set the border colors to the background colors instead), and border-top to a color of my choosing

• The shimmer of light in each eye was created with two classes of the same name, and needed only one CSS declaration

 

Questions:

• Why did setting the box div ‘s width and height to percentages not display anything? Using pixels does display the block
• Same thing happened with the slants on the cone. Why?
• Why did setting the triangle’s border transparent not actually render it transparent?

 

For the future: 

• Add different colors or sprinkles to the ice cream