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