css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

This is just an experiment! There are certainly better ways to show an image of a MacBook, but none as fun as this :)

Comments

  1. Brilliant! Excellent work!

  2. Wow. Just wow.

  3. Haha, thank you, @Chris Mounsey :)

  4. Damn, nice Joshua!

  5. This is exquisite.

  6. Daaaaaaaanng! Saweet!

  7. :D thanks, @Keith Wyland!

  8. Woah.. That's impressive. I'd like to learn your methodology! Can you show us how?

  9. @sirjonathan Thank you! When I get a chance, I'll write up a blog post on how I did this, and post it to my site: http://joshnh.com

  10. Oh come on Josh, this is goddamn amazing ! When I do things, you do it with only one single element. Always smarter ! :P

  11. @Hugo Giraudel I appreciate the kind words, although I do have to disagree :p Your work is freaking awesome, and inspires me to push myself!

  12. Thats really cool. Bravo!

  13. Wow this is freaking awesome!! Good job man!!

  14. <i>cred</i>ble

  15. Totally Awesome. It's even possible to add some text to the bottom of the display to mimic the non retina MBPs. http://codepen.io/FWeinb/pen/dEnbz

  16. wow cool cool!

  17. Thank you all very much!

  18. Impressive work, @Fabrice Weinberg!

  19. very nice work! very impressive!

  20. Very good! Inspiring!

  21. Really nice work!

  22. 62,5k views and 115 likes in few hours, pretty nice Josh. :P

  23. Thanks, guys!

    @Hugo Giraudel It's crazy!

  24. I can see more and more of this kind of thing happening in the future. Looks great!

  25. Unbelievable man!

  26. Thanks for the kind words!

  27. Craziness! Thanks for finding that, @Chris Coyier.

  28. Great work, really like it

  29. This is legit. Great work. Really clean in aesthetics and code. Love it dude!

  30. WOW. Just: W⋅O⋅W.

  31. Could you make me an iMac? XD Seriously this is quite impressive!

  32. Almost 100k views and 200 likes. Pretty impressive Mr. Hibbert, pretty impressive. :P

  33. Great work ...! i just add iMac on this family http://codepen.io/10tribu/pen/Kfplx (without footer at this moment)

  34. @Hugo Giraudel Just ticked over, crazy!

  35. congratz on 100k+ views....u rock!

  36. woah! nice high score.

  37. This is absolutely amazing. I just started using Code Pen and holy shit. I've been missing a lot lol.

  38. @mehmetbolak Thanks! Feel free to play around with it and experiment :)

  39. Impressive. True work of art!

  40. Impressive! Simply Wow!

  41. Holy schnikies! I can't believe I just barely discovered this. Usually these 'pure css' images and logos are just gigantic lines of css, but this is so simple! Thanks!

  42. No worries, Patrick. I'm glad you like it!

  43. By the way, you can watch a walkthrough of me creating it here: http://joshnh.com/pfp6

  44. Incredible! Can you speak to the creation process here? How long did it take and what's your process for constructing something like this?

  45. From memory, it took about an hour and a half to get it just as I wanted it. You can see my process in the link directly above your comment. That wasn't the exact process I followed, but it's pretty close.

  46. Reaaaly neat design. Congrats @joshnh

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...