a single div: a learning experiment
TRANSCRIPT
A single div: alearning experiment
<div></div>
<div></div>
A single div. Seriously.
See the Pen by LaurenPittenger ( ) on .
One Div Owl@lepittenger CodePen
Lesson #1I do not know the syntax for box-shadow by heart
box-shadow: ??;
box-shadow: horizontal vertical blur spread color;
Lesson #2Know the basics
See the Pen by Lauren Pittenger ( ) on . One Div Owl @lepittenger CodePen
Lesson #3Looking it up is
resourceful, not cheating
Lesson #4Learn what to ask (Google)
Lesson #5How to make a single div owl
(100 lessons in 1)
See the Pen by Lauren Pittenger ( ) on . One Div Owl @lepittenger CodePen
div
See the Pen by Lauren Pittenger ( ) on . One Div Owl @lepittenger CodePen
div:before
See the Pen by Lauren Pittenger ( ) on . One Div Owl @lepittenger CodePen
The basic body
See the Pen by Lauren Pittenger ( ) on . One Div Owl @lepittenger CodePen
The beak
See the Pen by Lauren Pittenger ( ) on . One Div Owl @lepittenger CodePen
The beak
See the Pen by Lauren Pittenger ( ) on . One Div Owl @lepittenger CodePen
Layered linear gradient backgrounds
The eyes
Element Layersdiv:before
contentbox shadow(first on top, last on bottom)
divbackground imagesbackground color
Further ExplorationShorthand background property to keepowl's body background color grey?Add feet to the :after element?
ReferencesSingle Div Drawings with CSSMDN linear-gradient()a.singlediv.com
Thank You!Lauren Pittenger
designer & developer
laurenpittenger.com@laurenpittenger