Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A Single Div: A Learning Experiment

103 views

Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

A Single Div: A Learning Experiment

  1. 1. A single div: a learning experiment <div></div>
  2. 2. <div></div> A single div. Seriously.
  3. 3. a.singlediv.com by Lynn Fisher
  4. 4. a.singlediv.com by Lynn Fisher
  5. 5. a.singlediv.com by Lynn Fisher
  6. 6. See the Pen by Lauren Pittenger ( ) on . One Div Owl @lepittenger CodePen
  7. 7. Lesson #1 I do not know the syntax for box-shadow by heart
  8. 8. box-shadow: ??; box-shadow: horizontal vertical blur spread color;
  9. 9. Lesson #2 Know the basics
  10. 10. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen
  11. 11. Lesson #3 Looking it up is resourceful, not cheating
  12. 12. Lesson #4 Learn what to ask (Google)
  13. 13. Lesson #5 How to make a single div owl (100 lessons in 1)
  14. 14. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen div
  15. 15. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen div:before
  16. 16. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen The basic body
  17. 17. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen The beak
  18. 18. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen The beak
  19. 19. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen Layered linear gradient backgrounds
  20. 20. The eyes
  21. 21. Element Layers div:before content box shadow (first on top, last on bottom) div background images background color
  22. 22. Further Exploration Shorthand background property to keep owl's body background color grey? Add feet to the :after element?
  23. 23. References Single Div Drawings with CSS MDN linear-gradient() a.singlediv.com
  24. 24. Thank You! Lauren Pittenger designer & developer laurenpittenger.com @laurenpittenger

×