搜尋
  • estherjan

Ode to Mondrian

This March, I'm joining the Creative Code Immersive 2020 course hosted by Gray Area in San Francisco as a teacher's assistant. The Immersive Program is a 12 weeks course in creative code and immersive art.

Although TAs aren't required to work on the class assignments, but I'm trying to follow along and get my brain re-awakened with HTML and CSS.

The first class exercise was to draw squares in css, and using the positioning techniques to draw an illustration of Mondrian's work.



Final product of Ode to Mondrian

I started off by setting some boxes in the css stylesheet.

/* CSS code */


/* setting the page margin and padding */
* {
  margin: 30;
  padding: 0;
}

body {
  background-color: #0C165A;
}

.bigsquare {
  position: relative;
  margin: auto;
  display: block;
  margin0top: 10%;
  width: 360px;
  height: 360px;
  background-color: black;
}
.whitesquare01 {
  position: absolute;
  width: 80px;
  height: 120px;
  background-color: white;
  top: 0;
}

.whitesquare02 {
  position: absolute;
  width: 80px;
  height: 130px;
  background-color: white;
  top: 140px;
  left: 0px;
}
.bluesquare {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: blue;
  top:140px;
}

.redsquare {
  position: absolute;
  width: 270px;
  height: 270px;
  background-color: red;
  top: 0px;
  left: 90px;
}

.whiterect {
  position: absolute;
  width: 240px;
  height: 80px;
  background-color: white;
  left: 90px;
}

.smallwhitesquare {
  position: absolute;
  width: 20px;
  height: 35px;
  background-color: white;
  left: 340px;
}

.smallyellowsquare {
  position: absolute;
  width: 20px;
  height: 35px;
  background-color: yellow;
  left: 340px;
  top: 45px;
}

The first column on the left was pretty simple.


The first column

I put each boxes in its own div, and as soon as I arrive at the second column, I realized that they are all "blocks" that are stacking upon each other. If I put the red square in its own div, it will break the rules of the blocks after it.


Red square breaking the rule of the first column

Since I want the red box to be situated next to the first white square, I'll have to put it inside the white square's div.


/* HTML code */


<div class = "bigsquare"</div>
<div class = "whitesquare01">
  <div class = "redsquare"> </div>
</div>

<div class = "whitesquare02"</div>
<div class = "bluesquare">
  <div class = "whiterect"> </div>
  <div class = "smallwhitesquare"> </div>
  <div class = "smallyellowsquare"> </div>
</div>

See this project in CodePen: Ode to Mondrian

It's actually fun to test around with the pixels and positioning in css. I believe there's more flexibilities in coding, and I'm quite excited to draw more images with html and css!

site logo_new-03.png