8-code-snippets-that-pay-homage-to-apple-devices

As much as we associate Apple with its handheld devices these days, their history is filled with a great depth of other compelling products. Desktops, laptops, even printers and monitors.

And, just like the ubiquitous iPhone (or even the iPod), they often were ahead of their time and quite prescient. Just think – PCs would probably still be simple beige boxes if Apple hadn’t shaken things up.

Today, we’re going to celebrate some of Apple’s greatest hits – including that phone in your pocket. Here is a collection of code snippets that recreate the look and/or experience of their products.

The Web Designer Toolbox

Unlimited Downloads: 1,000,000 Web Templates, Themes, Plugins, Design Assets, and much more!

Happy Mac

For every Mac owner, this happy little fellow is a good sign. It means that the device’s boot sequence has successfully begun and that you’ll be creating cool stuff in no time. Here, the icon is recreated and animated with CSS.

See the Pen


External Monitor | #dailycssimages
by Athoug

Boot Your iMac

While the modern iMac offers a sleek aesthetic, the old school versions were of a different sort. Part of that, of course, was the CRT monitor. But they still held a certain charm, like this classic G3 version. What makes this faithful rendition even better is that you can click the power button to “boot up”.

See the Pen


iMac G3
by Jon Kantner

Inventing the Wheel

The iPod wasn’t the first MP3 music player – but it was the one that took the world by storm. The extra storage was great (the first models came in 5 or 10 GB capacities), but it was the UI that really made the device a hit. Not to mention that, when paired with iTunes software, the device ultimately changed the music industry. This iPod Classic will help you relive the start of the revolution.

See the Pen


CSS iPod Classic
by Daniel Gasson

Retro Desktop

If you grew up in the 1980s or early 90s, you undoubtedly had one of these beasts in school – or something like it. The old desktops featured massive keyboards and weren’t exactly portable. Yet, for many, this type of computer was among the first we’d ever used.

See the Pen


Old Apple Computer
by Cozax

Book It

Heading to a design conference? Then you’ll likely see a number of various MacBook models throughout. Their sleek industrial design is well-regarded by us creative types. As further proof, it’s often used in mockups, such as this HTML and CSS snippet.

See the Pen


Demo: Responsive MacBook retina mockup
by Henri Peetsmann

Pro Tools

The Mac Pro is a seriously beautiful workstation. Over the years, it has pushed desktop design to new heights of form and function. The iteration shown here sports a unique case that lifts right off, providing 360° access to internal components. If you’re curious as to how it opens, well, there’s a pen for that too.

See the Pen


Pure CSS Apple Mac Pro
by Filip Vitas

Watch Out

Debuting to much fanfare in 2015, the Apple Watch has evolved into everything 1960s-era spy movies predicted a smart watch would be – and more. It displays messages, monitors your activity and heart rate, along with a myriad of other functions. And, oh yeah, it plays music. This snippet demonstrates the watch’s activity rings feature.

See the Pen


Apple Watch Pure CSS
by Raja Raghav

The Phone That Changed Everything

The iPhone was, of course, the device that truly revolutionized the smartphone. It raised the expectations of what a phone can and should do. As new models come out, we keep thinking, what will they do next? And it always seems that the product delivers another game-changing feature. Here, we see an iPhone X, complete with the infamous “notch”.

See the Pen Pull to refresh – iPhone X by Kirill Kiyutin

Charting Apple’s Journey

While some of the most popular and successful Apple products are represented above, it’s really just a small portion of the company’s history. Products such as the Newton, Cube, iBook, Lisa and so many others are also important parts of the company’s journey – they’re just not necessarily immortalized in code.

If you’re interested in some of those other devices, apple-history.com is a great place to spend some time. And, if you’d like to see more code Apple-related snippets, check out our CodePen collection.

176 comments

  1. I really like your blog.. very nice colors
    & theme. Did you design this website yourself or did you hire someone to do it for you?
    Plz reply as I’m looking to design my own blog and would like to find out where u got this from.

    appreciate it

  2. Hmm it seems like your website ate my first comment (it
    was super long) so I guess I’ll just sum it up what
    I had written and say, I’m thoroughly enjoying your blog.
    I as well am an aspiring blog blogger but I’m still new to the whole thing.

    Do you have any tips and hints for rookie blog writers?
    I’d definitely appreciate it.

  3. My developer is trying to persuade me to move to
    .net from PHP. I have always disliked the idea because of
    the costs. But he’s tryiong none the less. I’ve been using WordPress on numerous websites for about a year and am nervous about switching to another platform.
    I have heard excellent things about blogengine.net.
    Is there a way I can transfer all my wordpress content into it?
    Any help would be really appreciated!

  4. Hmm is anyone else having problems with the images on this blog loading?
    I’m trying to determine if its a problem on my end or if it’s the blog.
    Any feedback would be greatly appreciated.

  5. Greetings, I think your site could possibly be having web browser compatibility problems.
    Whenever I look at your web site in Safari,
    it looks fine however when opening in Internet Explorer, it’s got some overlapping issues.
    I merely wanted to give you a quick heads up!
    Other than that, wonderful website!

  6. Today, while I was at work, my cousin stole my iphone
    and tested to see if it can survive a twenty five foot drop,
    just so she can be a youtube sensation. My iPad is now broken and she has 83 views.
    I know this is entirely off topic but I had to share it with someone!

  7. Today, I went to the beach with my kids. I found a sea
    shell and gave it to my 4 year old daughter and said
    “You can hear the ocean if you put this to your ear.” She placed the shell to her ear and screamed.

    There was a hermit crab inside and it pinched her ear.
    She never wants to go back! LoL I know this is completely off topic but
    I had to tell someone!

  8. Having read this I thought it was really enlightening.
    I appreciate you finding the time and effort to put this content together.
    I once again find myself personally spending a lot of time both reading and commenting.
    But so what, it was still worth it!

  9. My brother suggested I might like this web site.
    He was totally right. This post actually made my day.
    You can not imagine just how much time I had spent for this information!
    Thanks!

  10. Hello there! I could have sworn I’ve been to this site
    before but after reading through some of the post I realized it’s new to
    me. Anyhow, I’m definitely happy I found it and I’ll be book-marking and checking back frequently!

  11. This design is steller! You certainly know how to keep a reader
    entertained. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Fantastic job.
    I really loved what you had to say, and more than that, how you presented it.
    Too cool!

  12. Heya! I’m at work surfing around your blog from my new apple iphone!

    Just wanted to say I love reading through your blog and look forward to
    all your posts! Keep up the outstanding work!

  13. hi!,I like your writing so so much! proportion we keep up
    a correspondence extra about your post on AOL?

    I require an expert on this house to resolve my
    problem. May be that’s you! Taking a look ahead
    to look you.

  14. Fine way of describing, and fastidious piece of writing
    to get facts on the topic of my presentation subject matter, which i am going to deliver in college.

  15. I do consider all the ideas you’ve introduced in your post.
    They’re really convincing and can certainly work. Nonetheless, the
    posts are very brief for beginners. Could you please lengthen them a little from
    next time? Thank you for the post.

  16. Hi are using WordPress for your site platform? I’m new to the blog world but I’m
    trying to get started and create my own. Do you need
    any coding expertise to make your own blog? Any help would be really appreciated!

  17. Thank you for another informative site. Where else could I get that
    kind of info written in such a perfect approach?
    I’ve a venture that I am simply now operating on, and I’ve been at the look out for
    such information.

  18. Wow that was odd. I just wrote an incredibly long comment but after I clicked
    submit my comment didn’t appear. Grrrr… well I’m not writing all
    that over again. Anyhow, just wanted to say wonderful blog!

  19. Hmm is anyone else having problems with the pictures on this blog
    loading? I’m trying to find out if its a problem on my
    end or if it’s the blog. Any suggestions would be greatly appreciated.

  20. I don’t even know the way I stopped up right here, but
    I thought this post used to be good. I do not know who you might be however certainly you’re going to a well-known blogger
    in case you are not already. Cheers!

  21. Thank you for some other informative blog. Where else may
    I get that type of information written in such an ideal
    manner? I’ve a challenge that I’m just now running on, and I have
    been on the look out for such information.

  22. After looking at a few of the articles on your web site, I really
    appreciate your technique of blogging. I bookmarked it to my bookmark
    website list and will be checking back soon. Take a look at my
    web site as well and let me know how you feel.

  23. hi!,I love your writing so much! share we be in contact
    more approximately your post on AOL? I require a specialist in this area to resolve
    my problem. May be that’s you! Taking a look ahead to look you.

  24. Simply want to say your article is as amazing.
    The clearness in your post is simply cool and i can assume
    you’re an expert on this subject. Fine with your permission let me to grab your
    RSS feed to keep up to date with forthcoming post. Thanks a million and please continue the enjoyable work.

  25. What’s up i am kavin, its my first time to commenting anyplace, when i read this paragraph i thought i could also create comment due
    to this sensible paragraph.

  26. Whats up very cool blog!! Man .. Excellent .. Superb ..
    I’ll bookmark your blog and take the feeds also? I’m satisfied
    to find a lot of helpful information right here
    within the post, we’d like develop more techniques on this regard, thank you for sharing.
    . . . . .

  27. Hi, i read your blog from time to time and i own a similar one and
    i was just curious if you get a lot of spam responses? If so
    how do you stop it, any plugin or anything you can advise?

    I get so much lately it’s driving me insane so any help is very
    much appreciated.

  28. Definitely consider that that you said. Your favorite reason seemed to be at the net the
    easiest thing to be mindful of. I say to you, I certainly get irked at the same time as folks consider concerns that they just do not know about.
    You managed to hit the nail upon the highest and defined out the whole thing with no need
    side-effects , other folks can take a signal.
    Will probably be back to get more. Thank you

  29. Thanks for one’s marvelous posting! I really enjoyed reading it, you
    happen to be a great author. I will make certain to bookmark your blog and will often come back someday.
    I want to encourage yourself to continue your great work, have a nice evening!

  30. Hi there i am kavin, its my first time to commenting
    anyplace, when i read this post i thought i could also create comment due to this good paragraph.

  31. Attractive component of content. I simply stumbled upon your site and
    in accession capital to assert that I get in fact enjoyed account your weblog
    posts. Anyway I’ll be subscribing on your feeds or even I success you get admission to persistently
    quickly.

  32. Aw, this was an extremely good post. Taking a few minutes and
    actual effort to make a great article… but what can I say… I hesitate a lot and don’t manage to get anything done.

  33. constantly i used to read smaller content which as well clear their
    motive, and that is also happening with this article which I am reading at this place.

  34. Hello my loved one! I want to say that this post is awesome, nice written and include almost all important
    infos. I’d like to peer more posts like this .

  35. Thanks for a marvelous posting! I definitely enjoyed
    reading it, you might be a great author.I will be sure to bookmark
    your blog and will often come back down the road.
    I want to encourage you to continue your great writing,
    have a nice holiday weekend!

  36. Thanks for a marvelous posting! I quite enjoyed reading it, you will be a great author.I will be sure
    to bookmark your blog and definitely will come back later on. I want to encourage you to definitely continue your great job, have a nice day!

  37. I have been exploring for a little bit for any high quality articles or weblog posts on this sort of area .
    Exploring in Yahoo I finally stumbled upon this site.
    Reading this info So i’m glad to show that
    I’ve an incredibly just right uncanny feeling I discovered exactly what I needed.
    I most indubitably will make sure to do not fail to remember this
    website and provides it a look regularly.

  38. Pretty nice post. I just stumbled upon your blog and wished
    to say that I’ve really enjoyed surfing around your blog posts.
    After all I’ll be subscribing to your rss feed and I hope you write again very soon!

  39. I read this paragraph fully concerning the resemblance of most up-to-date and previous technologies, it’s
    remarkable article.

  40. I know this web site provides quality based content and additional
    data, is there any other website which presents these data in quality?

  41. I’ve learn a few just right stuff here. Definitely worth bookmarking
    for revisiting. I surprise how so much effort you place to create any such fantastic
    informative website.

  42. Pretty nice post. I simply stumbled upon your weblog and wished to mention that I’ve truly
    loved surfing around your blog posts. After all I’ll be subscribing for your rss feed
    and I am hoping you write again soon!

  43. Today, I went to the beach with my children. I found a
    sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.”
    She put the shell to her ear and screamed. There was a hermit crab
    inside and it pinched her ear. She never wants to go back!
    LoL I know this is completely off topic but I had to tell someone!

  44. May I just say what a relief to discover somebody that actually knows what they’re discussing on the internet.
    You certainly know how to bring an issue to light and
    make it important. A lot more people ought
    to look at this and understand this side of the story.
    I was surprised that you are not more popular since
    you most certainly possess the gift.

  45. It’s perfect time to make some plans for the longer term and it
    is time to be happy. I have read this publish and if I could I wish to recommend you some fascinating
    issues or tips. Maybe you could write next articles regarding this article.
    I desire to learn even more things approximately it!

  46. Thanks for the good writeup. It in truth was a entertainment account it.
    Glance advanced to far brought agreeable from you! By the way,
    how can we be in contact?

  47. Hi there! This blog post could not be written any better!
    Looking through this article reminds me of my previous roommate!
    He always kept preaching about this. I am going
    to forward this information to him. Pretty sure he’ll have
    a good read. Thank you for sharing!

  48. I’m really inspired with your writing skills as smartly as with the
    structure for your blog. Is that this a paid topic or did you customize it
    your self? Anyway keep up the excellent quality
    writing, it is uncommon to look a great weblog like this
    one these days..

  49. It’s truly very complex in this full of activity life to
    listen news on Television, so I only use the web for that reason,
    and take the hottest information.

  50. Greetings! I’ve been following your website for some time now and
    finally got the bravery to go ahead and give
    you a shout out from Huffman Tx! Just wanted to mention keep up
    the good work!

  51. Howdy are using WordPress for your site platform?
    I’m new to the blog world but I’m trying to get started and create my own. Do you need any
    html coding expertise to make your own blog? Any help would be greatly appreciated!

  52. Hi there, this weekend is nice designed for me, as this point
    in time i am reading this impressive informative piece of writing here
    at my home.

  53. Definitely imagine that that you stated.
    Your favorite justification appeared to be at the web the easiest thing to
    keep in mind of. I say to you, I definitely get annoyed even as people consider concerns that they plainly do not understand about.
    You managed to hit the nail upon the top as smartly as defined out
    the entire thing without having side-effects , other people could
    take a signal. Will probably be back to get more. Thank you

  54. you are really a excellent webmaster. The web site loading speed is amazing.

    It seems that you are doing any unique trick.

    In addition, The contents are masterwork. you’ve done a
    wonderful activity in this matter!

  55. Hey! I understand this is sort of off-topic but I had
    to ask. Does building a well-established blog like yours take a massive amount work?
    I am completely new to writing a blog but I do write in my
    journal daily. I’d like to start a blog so I can easily share
    my own experience and feelings online. Please let me know
    if you have any ideas or tips for brand new aspiring bloggers.
    Thankyou!

  56. Howdy! This is my first comment here so I just wanted to give a quick shout out
    and say I genuinely enjoy reading your articles.
    Can you recommend any other blogs/websites/forums that go over the same topics?

    Appreciate it!

  57. Hi there! Someone in my Myspace group shared this site with
    us so I came to look it over. I’m definitely enjoying the
    information. I’m bookmarking and will be tweeting this to
    my followers! Terrific blog and amazing style and design.

  58. Wow, incredible weblog structure! How lengthy have you been running a blog
    for? you made blogging glance easy. The whole glance of your web site is magnificent, as neatly as the
    content material!

  59. When I originally commented I clicked the “Notify me when new comments are added” checkbox
    and now each time a comment is added I get several e-mails
    with the same comment. Is there any way you can remove me from that service?
    Thanks!

  60. Hey! I just wanted to ask if you ever have any issues with
    hackers? My last blog (wordpress) was hacked and I ended
    up losing months of hard work due to no back up. Do you have any methods to protect against
    hackers?

  61. Excellent post. Keep writing such kind of information on your page.
    Im really impressed by your site.
    Hi there, You’ve done a great job. I will definitely digg it and in my view
    recommend to my friends. I am sure they’ll be benefited from this web site.

  62. I do not know if it’s just me or if perhaps everybody else
    experiencing issues with your website. It appears like some of the written text on your posts
    are running off the screen. Can someone
    else please comment and let me know if this is happening
    to them as well? This could be a problem with my browser because
    I’ve had this happen before. Thanks

  63. Hey there! Someone in my Facebook group shared this site with us
    so I came to check it out. I’m definitely enjoying the information. I’m book-marking and will be tweeting this to my
    followers! Terrific blog and brilliant design.

  64. My brother suggested I might like this blog. He was once entirely
    right. This submit actually made my day. You can not
    believe simply how so much time I had spent for this information! Thanks!

  65. Appreciating the hard work you put into your website and detailed information you provide.
    It’s awesome to come across a blog every once in a while that isn’t the same outdated rehashed material.
    Fantastic read! I’ve bookmarked your site and I’m including your RSS feeds to my
    Google account.

  66. I don’t know whether it’s just me or if perhaps everyone else encountering problems with your blog.
    It seems like some of the written text in your content are running off the screen. Can someone
    else please provide feedback and let me know
    if this is happening to them as well? This may be a issue with my internet browser because I’ve
    had this happen before. Appreciate it

  67. The other day, while I was at work, my sister stole my apple ipad
    and tested to see if it can survive a 40 foot drop,
    just so she can be a youtube sensation. My iPad is now destroyed and she has
    83 views. I know this is completely off topic but I had to
    share it with someone!

  68. I do accept as true with all of the concepts you’ve offered to your post.
    They are really convincing and can definitely work. Nonetheless, the posts are
    too brief for newbies. May you please lengthen them a little from next
    time? Thank you for the post.

  69. Howdy! This post could not be written any better! Reading through
    this post reminds me of my old room mate! He always kept talking about this.
    I will forward this write-up to him. Fairly certain he will have a good read.

    Many thanks for sharing!

  70. Very nice post. I just stumbled upon your blog and wanted to say that I have
    truly enjoyed browsing your blog posts. In any case I’ll be subscribing to your rss feed and I hope you write again soon!

  71. It is appropriate time to make some plans for the future and it’s time to be happy.
    I have learn this post and if I could I wish to recommend you few attention-grabbing issues or advice.
    Perhaps you can write subsequent articles relating
    to this article. I wish to learn even more issues approximately it!

  72. Hi, I do think this is an excellent website. I stumbledupon it
    😉 I will revisit once again since I book-marked it.
    Money and freedom is the greatest way to change, may you be rich and
    continue to help other people.

  73. Great weblog here! Also your website a lot up very fast! What web host are you the use of?
    Can I get your affiliate hyperlink for your host?
    I desire my site loaded up as quickly as yours lol

  74. You actually make it seem so easy with your presentation but
    I find this matter to be actually something which I think I would never understand.
    It seems too complex and very broad for me. I’m looking forward for your next post, I will try to get the hang of it!

  75. I was curious if you ever considered changing the layout of
    your blog? Its very well written; I love what youve got to say.

    But maybe you could a little more in the way of content so people
    could connect with it better. Youve got an awful lot
    of text for only having one or two pictures.

    Maybe you could space it out better?

  76. Simply desire to say your article is as amazing. The clarity in your post is just great and i could assume
    you are an expert on this subject. Fine with your permission let me to grab your feed to keep up to date with forthcoming post.
    Thanks a million and please keep up the rewarding work.

  77. I used to be recommended this web site through my cousin. I am not
    certain whether or not this submit is written through him as nobody else understand such
    particular approximately my trouble. You are amazing!

    Thanks!

  78. I think what you typed made a bunch of sense. But, what about this?

    suppose you added a little content? I am not saying your content isn’t
    solid, however suppose you added something to maybe get folk’s attention? I
    mean 8 Code Snippets That Pay Homage to Apple Devices – Pavvy Designs is kinda vanilla.

    You could peek at Yahoo’s home page and note how they create article
    titles to get viewers to open the links. You might try adding a video or a pic or two
    to grab people excited about everything’ve written.
    Just my opinion, it would bring your posts a little livelier.

Leave a Reply

Your email address will not be published.