- Â
5 Week 1: Concrete Forms
w Pocket Pictograms: Inspiration for Assignment 2 Feb 13, 2015
w “Concrete objects”, Christian Leborg Feb 13, 2015
í Assignment 2: Draw found objects with CSS
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 are silhouetted at actual size and placed in his project. 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 iPhones or super-common electronics. Hunt around for unique and simple forms — like a band aid.
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 plan out your drawings in your F&C course notebook first.
Make five drawings using div tags and css classes. Create an html file for each digital bit, and upload your html files into a post on the class website. Categorize your post to the category CSS Found Objects. Place your name in the tile of the post and the names of the objects above or as part of your link.
Goals for the assignment
Designing websites starts with structural thinking — blocking in shapes in the browser. It’s the exact same thinking required needed to establish blocks needed to form these drawings. This process demands that you both plan your shapes in advance (by sketching) and adapt them to the reality of what you are able to code and what you see while you are coding.
Example code for reference
You may make use of these CSS-drawn shapes from Ali
Previous solutions
Links
í Assignment 1: Make a Scandinavian flag with CSS
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 Scandinavian Flag. The size of the flag is up to you.
Solutions
Links
Positioning support links are here
( Getting setup: Add users, bios and avatars
Welcome, everyone.
-
1. We’ll enter you into the WordPress system one by one.
2. While you wait, you can set up your avatar and download Textwrangler. Use whatever image you’d like for your avatar. You’ll need to set up a wordpress.com account at gravatar.com and use your risd email address.
3. Once you’re set-up, add a nickname (case sensitive), an optional bio and URL. Note, you may keep your identity private by choosing an avatar that isn’t a portrait.
-
Classroom
-
