A single div: a learning experiment

@laurenpittenger

<div></div>

@laurenpittenger

<div></div>

A single div. Seriously.

by Lynn Fisher

by Lynn Fisher

by Lynn Fisher

@laurenpittenger

See the Pen One Div Owl by Lauren Pittenger ( @lepittenger) on CodePen.

Lesson #1

I do not know the syntax 
for box-shadow by heart

@laurenpittenger

@laurenpittenger

See the Pen One Div Owl by Lauren Pittenger ( @lepittenger) on CodePen.

box-shadow: ??;

box-shadow: horizontal vertical blur spread color; 

Lesson #2

Know the basics

@laurenpittenger

@laurenpittenger

See the Pen One Div Owl by Lauren Pittenger ( @lepittenger) on CodePen.

Lesson #3

Looking it up is 
resourceful, not cheating

@laurenpittenger

Lesson #4

Learn what to ask (Google)

@laurenpittenger

Lesson #5

How to make a single div owl

@laurenpittenger

(100 lessons in 1)

@laurenpittenger

See the Pen One Div Owl by Lauren Pittenger ( @lepittenger) on CodePen.

div

@laurenpittenger

See the Pen One Div Owl by Lauren Pittenger ( @lepittenger) on CodePen.

div:before

@laurenpittenger

See the Pen One Div Owl by Lauren Pittenger ( @lepittenger) on CodePen.

The basic body

@laurenpittenger

See the Pen One Div Owl by Lauren Pittenger ( @lepittenger) on CodePen.

The beak

@laurenpittenger

See the Pen One Div Owl by Lauren Pittenger ( @lepittenger) on CodePen.

The beak

@laurenpittenger

See the Pen One Div Owl by Lauren Pittenger ( @lepittenger) on CodePen.

Layered linear gradient backgrounds

@laurenpittenger

See the Pen One Div Owl by Lauren Pittenger ( @lepittenger) on CodePen.

The eyes

Element Layers

  • div:before
    • content
    • box shadow
      (first on top, last on bottom)
  • div
    • background images
    • background color

Further Exploration

  • Shorthand background property to keep
    owl's body background color grey?
  • Add feet to the :after element?

References

Thank You!

Lauren Pittenger

designer & developer

laurenpittenger.com

@laurenpittenger

Made with Slides.com