17: CSS Art

Learning Target

• Use CSS to create shapes of various types
• Create a recognizable image using CSS drawing techniques

Tutorials

Part 1: The Beginner's guide to CSS Illustrations - Part 1  (Google Doc)
Learn how to create squares, rectangles, triangles, circles, trapezoids, parallelograms and even an egg shape.

Part 2: The Beginner's guide to CSS Illustrations - Part 2  (Google Doc)
Draw a smiling emoji using primitive shapes created with CSS.

Instructions

Step 1: 

Review Part 1 of the tutorial listed above. Pay close attention to the way that shapes are created by manipulating the border and transform properties of CSS.

Step 2:

Create these:

• • Create a new folder in your H: drive
  • Create a new HTML page file called emoji.html
  • Create a new CSS stylesheet file called emoji.css

Step 3:

Write a basic HTML file (html, head, title, body). Then, add this to your head tag to connect your CSS stylesheet to your HTML file.

<link href="emoji.css rel="stylesheet">

Follow along with Part 2 of the tutorial to create a smiley emoji.

Step 4:

Create two new files:

• • art.html
  • art.css

Connect art.css to your art.html page as a stylesheet.

Step 5:

Create a basic winter scene using only CSS and HTML.

Extended example:

Good example:

Grading