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. During class today, we will make a still life drawing using only HTML and CSS.
   • 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 6.

Note: Take a photo of the still life from your vantage point for future reference, and to share on KakoaTalk later

APEACH in CSS

Resources

• Shapes of CSS
• CSS User Interface
• CSS Psuedo-elements
• CSS box-shadow
• CSS Filters
• Clippy CSS
• CSS Clip Path
• CSS Matic
• 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