Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

by Ali Spittel

See the Pen Single Div Grace Hopper by Trish Katz ( @techxastrish) on CodePen.

See the Pen Loving Car - Pure CSS with animation by Nikhil Krishnan ( @nikhil8krishnan) on CodePen.

See the Pen One div CSS camera by Adam Towle ( @adamtowle) on CodePen.

See the Pen Cute Dog by David López ( @davidlpz) on CodePen.

See the Pen CSS Toucan by Clara Song ( @clarawrsong) on CodePen.

See the Pen Mona Lisa with pure CSS by Jay Salvat ( @jaysalvat) on CodePen.

CSS is used to declare styling on webpages. Pretty much every website uses it!

Styles are applied in a cascading manner -- the most specific styles will override the less specific ones!

HTML defines the structure and content of our website. HTML tags have different meanings. For example a h1 tag defines a header. We will attach our CSS code to HTML tags using selectors.

When we use CSS, we are selecting content from our HTML code and adding styling to it. We apply CSS code at varying levels of specificity. We will use: Demo
Today, we will be using an HTML tag called a div. These tags are special -- they just specify a grouping of elements or a space to style -- they don't have any default behaviors other than having a new line after them.

Elements are positioned using the top, bottom, left, and right properties. These properties don't work until the position property is set! There are a few different options for positioning, but we will use two today: absolute and relative.

Absolute positioning: We can position our divs on the page relative to their parent elements using absolute positioning! The "sibling" absolutely positioned divs ignore each other, so they can overlap. We will be using absolute positioning for most of our art!

Relative positioning: We can position our divs on the page relative to that div's default position using relative positioning. Remember, divs by default will stack on top of one another!

Demo

As we just saw, we can easily create squares with css, just by setting the width, height, and background-color attributes. To make that square into a circle, just add a border-radius of 50%! That will round the corners of the shape perfectly. Triangles, and other shapes get a little bit more tricky: I use Clippy and to visually edit those shapes using clip paths!

Demo

Follow along!

Completed Project

Those of us whose work is to write software are incredibly lucky. Building software is a guiltless pleasure because we get to use our creative energy to get things done. We have arranged our lives to have it both ways; we can enjoy the pure act of writing code in sure knowledge that the code we write has use. We produce things that matter. We are modern craftspeople, building structures that make up present-day reality, and no less than bricklayers or bridge builders, we take justifiable pride in our accomplishments.

This all programmers share, from the most enthusiastic newbie to the apparently jaded elder, whether working at the lightest weight Internet startup or the most staid, long-entrenched enterprise. We want to do our best work. We want our work to have meaning. We want to have fun along the way.

Twitter

LinkedIn

Website

GitHub