CSS

Art Week 1

Announcements

Welcome to IDS-101-13: Thinking Machines!
We learned a wee bit of .md.
We learned a smidgen of html
Time for a tad of CSS.
- Calvin's Stylin' Sheets
- Also called, Cascading Style Sheets
CSS is a way to make HTML pretty.
Or just to make pretty, in general.

Citation Needed

I am hopelessly derivative.
Today's lecture by Yosra Emad.
Here is the original

Our goal

Cute ghost.

Process

Sketching
- Basic Sketch
- Splitting the sketch into layers
Code
- HTML
- Positioning
- Responsiveness
- CSS

Sketching

I'd usually pop open good ole paint here.
Love me some paint.
Shout out paint.
Paint and I go way back.
Oh look a whiteboard.

Splitting your Sketch into layers

I happened to yolo this lil spooker in a few stages
Those stages are layers.
Like in a terrestrial planet, or a particulary good meme.

I named by layers: self, peepers, snoot, wagglers, and feets. I missed the sides. Whoops.

The Yorsa Method

Planning how your HTML div tags will be structured to fit your needs for this CSS art.
The root div is called "canva"
A "circle" layer behind the main CSS art to make it pop.
Any two layers that are next to each other (not stacked on top of each other)
- Separate them by adding each one in its own "bubble"
  - Look at self and feets; they are next to each other; they don't overlap.)
If something is too simple to have its own layer, don't name it.
- See the peepers layer, there is a pupil inside the peepers that isn't considered separately.

HTML

Layers are <div>'s
"div" is just what web designers use for everything, possible for a reason (I bet the reason is "because").
Like lists or lambdas, we can put divs inside of other divs.
Here's what it looks like:
"self" and "feets" are adjacent (equally indented).
"self" and "feets" are on top of "circle", the background.

FULL HTML

Positioning

To make good CSS art, you must understand positioning very well.
The rule in CSS art is simple.
We will use a variety of tactics in CSS to position our feets and wagglers in appropriately cute locales.

Step One: *

* refers to everything.
We want all our HTML art to have no margins or stretching
To do just what we write down (it's easier)
This isn't necessarily true by default, so we do: * { margin: 0; padding: 0; }
This is called a "rule", and now all HTML things will have no margins.
Easy is good thumbs emoji.

Canva

We make the "slate" we draw on, the canvas, named "canva"
We pick a background color.
We make 100% of the size of the window height and width.
I don't know what flex does, it's confusing.
We center everything, and make positioning relative to this div.
The . before canva means "this is somethings name"

.canva {
  background: #f7f5ff;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

Circle

(in a Lil Nas X voice) we got a circle in the back
70% of the SMALLER of the height and width
Some other color idk change it I won't stop you.
I don't know what flex does, it's confusing.
We center everything, and make positioning relative to this div.

.circle {
  width: 70vmin;
  height: 70vmin;
  background: #e8e0ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

Ghost

The ghost gets an outline
30% of the SMALLER of the height and width
"border-radius" curves the outside, to make a smooth lil spooker
Then there's no bottom border (will be feets there) and a color

.ghost {
  position: relative;
  border: 0.5vmin solid black;
  width: 30vmin;
  height: 30vmin;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom: 0;
  box-sizing: border-box;
  background: #FFDCDF;
}

Ghost

For example, here it is without border-radius

.ghost {
  position: relative;
  border: 0.5vmin solid black;
  width: 30vmin;
  height: 30vmin;
  border-bottom: 0;
  box-sizing: border-box;
  background: #FFDCDF;
}

Feets

We have both feets, the collection of feet, and the individual feet, the divs inside of feets.
"Every feet is a member of the collective feets"
Feets are just as wide (30%) as the ghost
And then individual feet are 1/4 of that width
They have the same outline as ghost, and are rounded - but on the bottom.
Recall there are 4 feet inside feets - so we'll see 4 rounded bottoms.

.feets {
  display: flex;
  width: 30vmin;
}

.feets div {
  width: 7.5vmin;
  height: 6vmin;
  border: 0.5vmin solid black;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top: 0;
  background: #FFDCDF;
}

Peepers

The peepers are just two circles at a certain location.
They are divs with a border radius (round)
They are 5% tall and dark in color.
We place them at an offset from the top and left.

.peepers {
  position: absolute;
  width: 5vmin;
  height: 5vmin;
  background: #000;
  border-radius: 50%;
  top: 13vmin;
  left: 5vmin;
  box-shadow: 14vmin 0;
}

Peepers

Here we use the advanced technique (I learned it just).
Before - this allows us to apply two styles to one thing.
(There is also after, if we need).
We add no text - the content.
We keep everything in the same place, but add whites to the eyes
The whites are half the size of the full eye (2.5%)
They're in a fixed position - you can play around with that.

.peepers:before{
  content: "";
  position: absolute;
  background: white;
  width: 2.5vmin;
  height: 2.5vmin;
  border-radius: 50%;
  left: 2vmin;
  box-shadow: 14vmin 0 white;
}

Snoot

The snoot, also known as the booplesnoot, is an inverted half circle outline.
We make something of size 4% by 2%
We give it a black outline.
We curve it by 4% - otherwise we get smooshed circle (loud booing)

.snoot {
  position: absolute;
  width: 4vmin;
  height: 2vmin;
  border: 0.7vmin solid black;
  border-bottom-left-radius: 4vmin;
  border-bottom-right-radius: 4vmin;
  border-top: 0;
  top: 16vmin;
  left: 12vmin;
}

Wagglers

For a bit of personality, I add wagglers: things that waggle
I'm a known finger waggler, so these are hands I guess.
Wagglers are like snoots but longer

.left-waggler, .right-waggler {
  position: absolute;
  width: 4vmin;
  height: 4vmin;
  border: 0.5vmin solid black;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top: 0;
}

Wagglers

Critically the left and right wagglers are in different locations
We turn them both inwards 45 degrees
We place them in fixed positions on the screen -
Both are 22% of the way down, but are either 6% or 18% "over" from the left

.left-waggler {
  top: 22vmin;
  left: 6vmin;
  transform: rotate(-45deg)
}
.right-waggler{
  top: 22vmin;
  left: 18vmin;
  transform: rotate(45deg)
}

FIN

Well I had a blast, I got to:
- Place fun shapes on a screen
- Use pretty colors
- Use words to describe what each feature is called.
- Be precise and iterative - I can make no mistakes!
- Following along with someone else's artist process.

Big thank you to Yosra!

NEXT TIME

We're going to a musuem.
Be ready for visual critique.
Be ready to have fun.