Assignment 2-1: Color and Saturation
For this assignment we focus on CSS background-color declarations. We'll be using our grid as a start (5 columns, 5 rows).
Add background-color rules to your CSS file and apply those styles to your HTML elements.
Fixed: Number 5 colums, 5 rows (25 elements in total), 1 color (red-orange).
Variables: Proportions (widths, heights), Saturation. Keep in mind that the heights need to match within a row in order to keep the layout grid intact.
Theme: Low to high saturation
Since we're only focusing on the background-colors of the elements we need to get rid off the borders first in your HTML markup. In order to do that just delete the border classes there. Important to note here is that you should keep the border rules in the CSS.
There are numerous ways to define color with CSS. For a detailed description please read this article. For our compositions we use the HSL color declaration (H = hue, S = saturation and L = lightness).
Example CSS code:
/* red-orange + saturation*/ <br> <br>
.orange-s-100 { background-color: hsl(15,100%,50%); } <br>
.orange-s-90 { background-color: hsl(15,90%,50%); } <br>
.orange-s-80 { background-color: hsl(15,80%,50%); } <br>
.orange-s-70 { background-color: hsl(15,70%,50%); } <br>
.orange-s-60 { background-color: hsl(15,60%,50%); } <br>
.orange-s-50 { background-color: hsl(15,50%,50%); } <br>
.orange-s-40 { background-color: hsl(15,40%,50%); } <br>
.orange-s-30 { background-color: hsl(15,30%,50%); } <br>
.orange-s-20 { background-color: hsl(15,20%,50%); } <br>
.orange-s-10 { background-color: hsl(15,10%,50%); } <br>
.orange-s-00 { background-color: hsl(15,0%,50%); } <br>
<br>
<div class="column-20 height-60 orange-s-90"></div><br />
<div class="column-20 height-60 orange-s-90"></div><br />
<div class="column-20 height-60 orange-s-90"></div><br />
<div class="column-20 height-60 orange-s-90"></div><br />
<div class="column-20 height-60 orange-s-80"></div><br />
<br />
<div class="column-20 height-05 orange-s-100"></div><br />
<div class="column-20 height-05 orange-s-100"></div><br />
<div class="column-20 height-05 orange-s-100"></div><br />
<div class="column-20 height-05 orange-s-100"></div><br />
<div class="column-20 height-05 orange-s-100"></div><br />
<br />
<div class="column-20 height-20 orange-s-60"></div><br />
<div class="column-20 height-20 orange-s-60"></div><br />
<div class="column-20 height-20 orange-s-60"></div><br />
<div class="column-20 height-20 orange-s-60"></div><br />
<div class="column-20 height-20 orange-s-50"></div><br />
<br />
<div class="column-20 height-05 orange-s-40"></div><br />
<div class="column-20 height-05 orange-s-40"></div><br />
<div class="column-20 height-05 orange-s-40"></div><br />
<div class="column-20 height-05 orange-s-40"></div><br />
<div class="column-20 height-05 orange-s-30"></div><br />
<br />
<div class="column-20 height-10 orange-s-20"></div><br />
<div class="column-20 height-10 orange-s-20"></div><br />
<div class="column-20 height-10 orange-s-20"></div><br />
<div class="column-20 height-10 orange-s-20"></div><br />
<div class="column-20 height-10 orange-s-10"></div>
Task: Create different compositions by applying color to the div elements
A progression from low saturated to high saturated areas should be present visually. Work on different ideas and submit 5 final layouts.