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

 

Pure CSS Art: Day 3

I tried replicating Sasha Tran’s Pikachu without looking at anyone’s code. Since Pikachu’s features are mainly circles, this was pretty easy to make. (Though it still doesn’t look exactly like Sasha’s. Something’s off with the left eye, mouth, and nose. Will fix upon my second attempt.)

See Codepen 

Takeaways: 

• Used one shape to block out another shape to create the effect I wanted i.e. the left eye is really a black oval superimposed by a yellow oval
• Added audio with the HTML5 <audio> element, which specifies a standard way to embed audio in a web page (a music player bar is displayed)

<audio> element:

• The controls attribute adds audio controls i.e. play, pause, and volume
• The <source> element allows specification of alternative audio files which the browser may choose from; browser will use the first recognized format
• The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element
• autoplay attribute : <audio controls autoplay></audio> automatically plays the audio file
• loop attribute: <audio controls loop></audio> loops the audio file
• <audio controls autoplay loop></audio> automatically plays the audio file and then loops it
• The 3 supported audio formats in HTML5: ogg, wav, mp3

NB: The source has to be an audio file that ends in a supported audio format. Dropping that audio file into Google Drive or Dropbox and using that URL as the source does not work.

To Do:

• Review what display: block means
• Find ways to hide the music player bar

Pure CSS Art: Days 1 & 2

Thanks to Sasha Tran and her wonderful Medium post here, I discovered pure CSS art! Creating art out of one or more tags in HTML and styling everything in CSS. The chronicle of her journey was very inspiring, so I decided to set out on my own.

Michael Mangialardi’s Koala tutorial seemed like a good place to start, since he explains each step quite thoroughly.

I learned through replication (and carefully making sure I understood the steps he took), and added a mouth and tongue to the original as my own sort of challenge:

See Codepen 

Takeaways:

• Under the styling for the child div, percentage for widths and heights of shapes applies to the parent div
• position: relative –> the element is positioned relative to its normal position, which is the very top left corner of the viewport (visible area of the web page)
• position: absolute –> the element is positioned relative to its nearest positioned ancestor (if no positioned ancestors, the document body is used, and the element is moved along with page scrolling)
• the invisible box is used as the oldest ancestor for position: absolute
• margin: auto –>  centres the element
• order of margin: auto and margin-top matters
• the formula for percentages to absolutely center the element is:
  left = (100 – width of parent div)/2
  top = (100 – height of parent div)/2
• a child div’s width and height set to 100% means it has the same width and height as its parent div
• z-index –> depth of div (think layers) ; the higher the z-index number, the closer that div is to the top
• negative percentage for left or right: shift in the specified direction i.e. left: -20%   –> shift in the left direction by 20%
• when no right, left, top, or down is applied, the default position of the element in position: absolute and position: relative is at the very top left corner
• No right/left/top/down property applied does not mean they are at 100% or 0%   {check}
• 100% is not the maximum applicable percentage (can go over) {can go under too into the negatives? check}
• border-radius rounds the corners of the rectangle
• when rounding slightly, it’s easier to use px instead of percentage
• clip-path –> used to make any shape outside a square, rectangle, and circle; method is supported by Safari, Chrome, and Opera, but not Firefox
• a tool called Clippy automatically gives us the clip-path for different shapes

 

On Day 2, I wanted to try making something myself, with no tutorial.

See Codepen

Takeaways: 

• Can use ColorZilla  to find exact colors and their hex code on your browser
• Child div pupil can be styled once, and still apply to both right and left eye’s pupil divs
• I accidentally placed right eye div under left eye div because I forgot to close shaper’s div tag under parent div right eye — use Inspect to see the code on the browser; hierarchies are clearly seen there

.

.

.