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.
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.
Related Topics
Top