Coding from Life: CSS Still Life
- Download this starter kit.
- 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 theid
attribute - move them around the
<div id="stage">
element usingposition: absolute;
- give them
height
,width
and abackground-color
(as well as other visual adjustments)
- draw your elements via CSS by targetting html
- 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
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