• Ê
  • Â

5 Sample Unit: Drawing with CSS

í Sample Assignment: Draw found objects with CSS

Posts categorized as “Assignments” or “Homework” will be listed underneath the “Assignments” tab on the main index. This tab is where the instructor’s assignments can be easily seen in reverse chronological order.

The below project is something I assign to sophomores at RISD as part of a three-week formmaking Web workshop titled “Digital Bits.”

Above: Specimen of Paul Elliman’s, “Bits” typeface

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. Title the post with the names of your bits (if they have names).


  1. Bike Lock Example
  2. You may make use of these CSS-drawn shapes from Ali
  3. See results from the previous years
b Add comment    

Comments are closed.