Lauren Pittenger
I'm a front end web designer
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.
