a single div: a learning experiment
TRANSCRIPT
![Page 1: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/1.jpg)
A single div: alearning experiment
<div></div>
![Page 2: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/2.jpg)
<div></div>
A single div. Seriously.
![Page 6: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/6.jpg)
See the Pen by LaurenPittenger ( ) on .
One Div Owl@lepittenger CodePen
![Page 7: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/7.jpg)
Lesson #1I do not know the syntax for box-shadow by heart
![Page 8: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/8.jpg)
box-shadow: ??;
box-shadow: horizontal vertical blur spread color;
![Page 9: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/9.jpg)
Lesson #2Know the basics
![Page 10: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/10.jpg)
See the Pen by Lauren Pittenger ( ) on . One Div Owl @lepittenger CodePen
![Page 11: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/11.jpg)
Lesson #3Looking it up is
resourceful, not cheating
![Page 12: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/12.jpg)
Lesson #4Learn what to ask (Google)
![Page 13: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/13.jpg)
Lesson #5How to make a single div owl
(100 lessons in 1)
![Page 14: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/14.jpg)
See the Pen by Lauren Pittenger ( ) on . One Div Owl @lepittenger CodePen
div
![Page 15: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/15.jpg)
See the Pen by Lauren Pittenger ( ) on . One Div Owl @lepittenger CodePen
div:before
![Page 16: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/16.jpg)
See the Pen by Lauren Pittenger ( ) on . One Div Owl @lepittenger CodePen
The basic body
![Page 17: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/17.jpg)
See the Pen by Lauren Pittenger ( ) on . One Div Owl @lepittenger CodePen
The beak
![Page 18: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/18.jpg)
See the Pen by Lauren Pittenger ( ) on . One Div Owl @lepittenger CodePen
The beak
![Page 19: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/19.jpg)
See the Pen by Lauren Pittenger ( ) on . One Div Owl @lepittenger CodePen
Layered linear gradient backgrounds
![Page 20: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/20.jpg)
The eyes
![Page 21: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/21.jpg)
Element Layersdiv:before
contentbox shadow(first on top, last on bottom)
divbackground imagesbackground color
![Page 22: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/22.jpg)
Further ExplorationShorthand background property to keepowl's body background color grey?Add feet to the :after element?
![Page 23: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/23.jpg)
ReferencesSingle Div Drawings with CSSMDN linear-gradient()a.singlediv.com
![Page 24: A Single Div: A Learning Experiment](https://reader031.vdocuments.net/reader031/viewer/2022030318/5a653aae7f8b9a5b558b573b/html5/thumbnails/24.jpg)
Thank You!Lauren Pittenger
designer & developer
laurenpittenger.com@laurenpittenger