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.
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.
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”.
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.
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.
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.
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.
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.
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”.
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.
- 13 Incredible Code Snippets Inspired by Music
- 8 Snippets That Demonstrate the Repelling Effect in Web Design
- Code as an Ode to Hackers
- 10 Examples of High-End Artwork Recreated with Code
- Keeping Time: A Collection of Clock and Timer Code Snippets
- Bringing the Curtain Effect to Your Website with These Snippets
- 8 Fascinating CSS & JS UI Concepts for eCommerce Websites