5 Week 1: Concrete forms

I’ve placed an edited selection of Digital Bits from Assignment 2 on an iPad in the RISD Student Triennial. You can see the results online.

And there is a mention from RISD XYZ…
Screen Shot 2013-01-03 at 4.05.46 PM

4 Blog / Week 1: Concrete forms    f   b 21       

w Le macchine


B Bruno Munari

Designer Paul Elliman has been collecting small found objects that resemble typographic glyphs. Whether found on the side of the road, at someone’s house or at the hardware store, the objects become silhouetted and kept at actual size. He calls the monochromatic collection of objects, “Bits”. The formal language used can be traced to photograms, a one-to-one photographic black and white copy of an object. The photogram effectively makes two dimensional and graphic any three-dimensional object.

This assignment asks you to collect objects of your own, whether in your home, around town, at RISD 2nd life, etc., and draw them using HTML and CSS. Do not choose electronics. Try a band aid, for example. With CSS3, it is possible to draw non-rectangular shapes right in the browser. You may use any foreground and any background color, but be sure to use only one color for each — thereby working with form and counterform only. You may stylize (simplify) your original object as needed, but the goal is to make a faithful copy of the object. Consider the perspective that you choose for the object. You are encouraged to sketch out your objects in your F&C course notebook first.

Make five digital bits. Create an html file for each digital bit, and upload your html files into a post on the class website. Attach the post to the category Assignment 2 and Workshop 4. Title the post with the names of your bits (if they have names).

You may make use of these CSS-drawn shapes from Ali

Bike Lock Example


4 Week 1: Concrete forms    f   b 6,316       

Choose one of the Scandinavian countries (link to other countries at the bottom) and construct its flag in two ways: using absolute positioning and using floated divs. Apply the links to both from one post assigned to assignment 1. The size of the flag is up to you.


  1. Exercise solution with Float
  2. Exercise solution with absolute positioning
  3. Recap of html/css basics
  4. Updated recap of html/css basics and boxing


4 Week 1: Concrete forms    f   b 2,653       


  1. Syntax: declaration blocks, comma separated selectors
  2. Padding, Margin, Background, Border, Width, Height
  3. Units, Colors
  4. The natural flow of a page
  5. Floats and Clear
  6. Code an 8×8 black and red checkboard
  7. Absolute, Relative and Fixed Positioning (z-index)
  8. View source and Inspector

Positioning example

Link here

CSS Basics

CSS Positioning

4 Week 1: Concrete forms    f   b 121       


  1. Browsers read HTML. HTML is structure.
  2. Collection of well-formed tags.
  3. Required elements: html, head, title, body
  4. Block elements: headers, paragraphs, nesting
  5. Inline elements: anchor, strong, em, img


4 Week 1: Concrete forms    f   b 2,274       

B Workshop Overview