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

145 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
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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

×