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

Pure CSS Art: Day 7

After returning from an awesome day at Google’s Summit for Women in Computing, I was inspired to create something Google-related. The Android logo was a good candidate, as it contains simple shapes such as rectangles and circles.

See Codepen

Takeaways: 

• Initially, I was going to create a full circle, and then use another shape to cover the half of the circle to create the head; however, I knew there must be a way to create a half-circle (and I didn’t want to use Clippy either); a quick Google search led me to find this Codepen  , where I learned that the border-radius property could be further specified i.e. border-bottom-left-radius, border-bottom-right-radius, bottom-top-left-radius, bottom-top-right-radius 
• To create a half-circle, the bottom/top-left/right-radius property must be double the width of the circle {why, exactly? I have a vague notion}

• To rotate a <div> element, use the transform property
• Angles could be negative, just like in math; it rotates counterclockwise

• The top property’s value could also be negative — the shape moves upward

 

Questions: 

• Why does the width have to be half the value of height for the eye to appear as a circle, even with border radius 50%?
• Why does the bottom/top-left/right-radius property have to be double the width of the circle to create a half-circle?

 

For the future: 

• Review how to absolutely center a shape (in both percentage and px)
• Learn how to animate and rotate the Android bot’s head or arm or leg

Pure CSS Art: Day 6

Days 4 and 5 – started attempting pixel art and encountered some issues (still unresolved). Stumbled upon the mention of tables, and tried that instead:

Does this count as pixel art? 0.0

See Codepen 

Takeaways: 

• <table> element makes tables out of grids (two-axes)
• <tr> element makes rows
• one or more <td> element is nested inside <tr> to make the cells

Example: 

<table>
  <tr> 
    <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
</table>

This table has 1 row with 3 cells.

• there is the <table> element, and the table selector; no need to make a class for table to style it
• Sass is a CSS pre-processor (I started to use Sass but Codepen kept freezing; will try Sass again another time)
• The cells are all empty, so the cells are thin slices of color
• When there is content, the cells stretch to accommodate the content

Example: 

Yes, the third word is the longest word in the German language, meaning “law delegating beef label monitoring”

 

For the future: 

• Find a more concise way to create a lot of cells
• Try Sass properly
• Find out why the top property had no effect on the element table