CSS3 Shapes

Look at THIS image. It is totally made with CSS. That's right. NOT AN IMAGE! Check the code if you think I'm kidding.

By using :after, :before, borders, and others, you can create simple graphics that will enhance the look of your webpage and will quickly load. Take a few moments to look through the resources below before starting the assignment.

Resources:

• Shapes of CSS
• Shape tips and examples
• Sample CSS graphics
• Shape Generator

Assignment:

Your assignment is to create a simple page that uses CSS3 shapes to enhance the look. Don't simple copy a shape. Your grade will be on your ability to incorporate these shapes into some element of the page.

1. Open and new HTML5 page in Dreamweaver
2. Save as "css3_shapes.html" in your website folder.
3. you can create a full page with links, banners, and all that other stuff, BUT you will not have a ton of time so plan wisely.
4. When finished, make a link on your index page called "CSS3 Shapes" that links to "css3_shapes.html"
5. FTP both your updated index.html and css3_shapes.html
6. Check the server and make sure it worked.