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

A single div: a learning experiment

By Lauren Pittenger

A single div: a learning experiment

Building something that already exists is a great way to gain new skills and refine old skills. When I attempted to recreate Lynn Fisher’s Single Div project last year, I learned two things: 1) having a solid foundation of the basics is invaluable and 2) it’s totally fine if you have to look something up. Presented to the WordPress DC Meetup Group, June 2016.

  • 1,443
Loading comments...

More from Lauren Pittenger