Extra Credit – Coding from Life: CSS Still Life

Coding from Life: CSS Still Life by Ben at CCA via Mindy Seu

1. Download this starter kit.
2. To get started with CSS styling, we will learn to draw and position basic shapes with code. Before we meet again next class, we will make a still life drawing using only HTML and CSS.
   • set up a basic "still life" at home consisting of 3-5 objects – you can choose what to include and how complex they are
   • draw your elements via CSS by targetting html <div> tags using the id attribute
   • move them around the <div id="stage"> element using position: absolute;
   • give them height, width and a background-color (as well as other visual adjustments)
3. Make sure to link your “Exercise: Coding from Life” page from your class website homepage by Monday May 11.

Note: Take a photo of the still life for future reference, and to share on KakoaTalk later when you finish your still life.

APEACH in CSS

Resources

• Shapes of CSS
• CSS User Interface
• CSS Psuedo-elements
• CSS box-shadow
• CSS Filters
• Clippy CSS
• CSS Clip Path
• Devdocs: CSS
• Devdocs: HTML
• Keyframe Animation Syntax
• Using CSS transitions
• Transition
• Easing Functions
• Ceaser - CSS Animation Tool

The Simpsons in CSS

References

• Alex the CSS Husky
• Simpsons in CSS
• a.single.div
• CSS Drawing Tag on Codepen
  • APEACH