8 Code Snippets that Pay Homage to Apple Devices

speckyboy.com speckyboy.com3 years ago in #Outside Love571

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…

Like to keep reading?

This article first appeared on speckyboy.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply