🖼 Art!

Coding Camp

Prof. Calvin

👋 Introduction

Goals

Create a webpage
Make it well-formed
Make it stylish
Make it graphical
Make it interactive

Today

Backgrounds!
Radii!
Positioning!

👻 Spooky

What?

Yosra Emad, cool CSS artist/coder made this:

How?

Yosra:
- Creates HTML elements for each “part” of the art.
- Uses CSS styling to change colors and borders.
- We will do the same!

Why?

It’s cute!

💀 Skeleton

What?

First, make the skeleton of the structure by looking for layers from back to front.
We notice, for example, there could be a back-most circle element forming the body.
Use the <div> element - a very general “division” of website content.
- We will use no content at all - only style the <div>

How?

Yosra recommends, and I follow, as:

spooky.html

<div id="base">
  <div id="background">
    <div id="spookster">
      <div id="peepers"></div>
      <!-- Short for booplesnoot -->
      <div id="snoot"></div>
      <div id="left-waggler"></div>
      <div id="right-waggler"></div>
    </div>
    <div id="feets">
      <div id="feet"></div>
      <div id="feet"></div>
      <div id="feet"></div>
      <div id="feet"></div>
    </div>
  </div>
</div>

Citation needed

Booplesnoot and other part names are a throwback to a legendary meme of a bunny.

Why?

By default, HTML styles enclosed elements on top of enclosing elements.
So we can place, e.g., eyes on a smiley face like so:

smiley.html

<div id="face">
    <div id="left-eye"></div>
    <div id="right-eye"></div>
    <div id="mouth"></div>
</div>

🪜 Steps to Spook

Step 0 🏁

Recall we will be working with spooky.html
Recall we need to link our CSS stylesheet in the header

spooky.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div id="base">
            <div id="background">
                <div id="spookster">
                    <div id="peepers"></div>
        ...

Step 1 1️⃣

We will remove all margins and stretching.
- Once you have done more CSS, take this out and see what happens.
We use the special * asterisk to apply the style to all elements.

styles.css

/* This is a CSS Comment */
/* Like <!-- --> HTML comments */

/* Remove margins and stretching */
* {
  margin: 0;
  padding: 0;
}

Step 2 ⬜

Style base.
This background color
100% visible height vh and width vw
Flex means “not inline text”
- We aren’t using text!
We center everything relative to this div

styles.css

/* Old */
* {
  margin: 0;
  padding: 0;
}

/* New! */
#base {
  background: white;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

Step 3 🟣

The circle behind the spookster.
70% of the SMALLER of the height and width
Border radius is neat - we’ll demo it.
#e8e0ff is this color
And again center everything.

styles.css

/* Only showing new stuff... */
#background {
  width: 70vmin;
  height: 70vmin;
  background: #e8e0ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

Aside: Border Radius

We can clip the borders of elements with backgrounds to be round instead of square with a radius.

<div style="background:red;border-radius:0%;text-align:center">Text</div>

Text

<div style="background:red;border-radius:10%;text-align:center">Text</div>

Text

<div style="background:red;border-radius:25%;text-align:center">Text</div>

Text

<div style="background:red;border-radius:50%;text-align:center">Text</div>

Text

Step 4 🧢

The spookster herself.
30% of the SMALLER of the height and width
Border radius but only on top!
Black border but not one the bottom!
#e8e0ff is this color

styles.css

/* Only showing new stuff... */
#spookster {
  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: #ffdcff;
}

👀 Visually

It will mostly look like this:

Aside: Border Radius

Here it is without the border radius set.

Step 5 🐾

We create a <div> to hold for 4 feet and also those 4 feet
Each foot is 1/4 of ghost width.
Rounded and outlined on the bottom.
There are four of these!
Black border except top!
#e8e0ff is this color

styles.css

/* Only showing new stuff... */
#feets {
  display: flex;
  width: 30vmin;
}

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

👀 Visually

It will mostly look like this:

Aside: Partial Borders

If we don’t set border-top: 0:

Step 6 👁️

Peepers are just two circles at a fixed location.
5% (1/6 of ghost) radius
A lot down (13%) and a little bit to the left (5%)
Then add a shadow (the other eye) 14% to the right.
Phew!

styles.css

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

👀 Visually

It will mostly look like this:

Step \(n\) 🎨

I’ll simply provide the rest for you to play with!
You can scroll!

styles.css

/* the :before allows */
/* 2 styles to one div */

/* Whites of the eyes */
#peepers:before{
  content: "";
  position: absolute;
  background: white;
  width: 2.5vmin;
  height: 2.5vmin;
  border-radius: 50%;
  left: 2vmin;
  box-shadow: 14vmin 0 white;
}

#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;
}

/* Both wagglers (hands) have */
/* much in common */
#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;
}

/* But are in different */ 
/* 1. locations and */
/* 2. orientations */
#left-waggler {
  top: 22vmin;
  left: 6vmin;
  transform: rotate(-45deg)
}
#right-waggler{
  top: 22vmin;
  left: 18vmin;
  transform: rotate(45deg)
}

Try it out all at once or piece-by-piece!

👀 Visually

Demo Repo

Check it out here:
- Page
- Repo

Today

Backgrounds!
Radii!
Positioning!