Apple is well-known for their incredible design prowess and easy-to-use products. Their technology is a designer’s best friend, so it’s no surprise that we often follow in their footsteps.
It’s also why you can find so many re-creations of Apple’s style on the web. Use the code snippets in this collection for both inspiration and to further your learning.
Menu Redesign
The Apple.com menu is well known by even the youngest web designers. It’s been around for years and has always had such a unique style.
This snippet takes the Apple navigation menu and restyles it using CSS3.
The design is mostly the same, but it includes some different hover features and a custom search menu. But since this is a demo, the links don’t actually work. You’d have to do some editing on this one to make it fully functional.
Messages Waiting Animation
Anyone who’s used the Apple messaging app should be familiar with the speech bubble icon. It pops up whenever someone is typing and it’s got a pretty slick animation.
Developer Maxwell Antonucci rebuilt this animation in full with just pure HTML and CSS. You can see the final result in this pen.
Note that this does use Pug for HTML compiling and Sass instead of CSS. But you can always compile down if you can’t read those frameworks.
Either way, this is a brilliant snippet for learning how to design animated graphics using CSS.
Apple-Style Mobile Menu
Beyond the main desktop navigation is Apple’s mobile responsive menu.
This uses the typical hamburger icon and it’s found on most all devices. If you want to re-create this in HTML5, have a look at this free snippet written by Andy Leverenz.
If you click the hamburger icon you get a neat little animation effect, plus the menu actually slides down onto the page. How cool is that!
iOS iMessage in HTML5
Earlier I mentioned the speech bubble animation from Apple’s messenger app. But with this snippet you can actually build the entire iMessage mobile app using HTML5 and some raw JavaScript.
All of the JS code runs on jQuery – so it’s super easy to edit. Not to mention that the final demo is so darn sleek and really does feel like the real iMessage app.
While I can’t imagine that this would be useful outside of a practice project, it’s still fun to play with.
MacOS + Browser
Speaking of fun practice projects: get a load of this one replicating a full MacOS dashboard in your browser.
You can hover the dock icons to get that traditional Apple animation, or even click the Chrome app icon to open up a mock browser window.
And somehow this pen only uses 55 lines of JavaScript to get it all working.
This is definitely a sweet project that you’ll really appreciate in full view.
Apple Watch Radial Chart
Apple’s smartwatch broke new ground in the tech space. It also created a whole new interface for consumers to learn.
If you like the Apple Watch animations, then have a look at this snippet on CodePen. It features a custom animated watch face with the radial chart design.
These are fairly common features with many Watch apps, but you never see them in the browser. Well, until now.
Apple Style Toggle
Ah, the classic on/off switch. This first gained popularity thanks to iOS and it really stuck around thanks to Apple’s original design.
In this pen by Adrien Bachmann, you’ll find a basic switch design with HTML/CSS code. It runs completely free of any JavaScript, which is a huge accomplishment by itself.
Not to mention that this snippet is clean and truly does match the Apple-style of animation. You can change the size, color and animation style with ease.
It’s a brilliant way to bring some Apple design into your own web project.
Pure CSS Apple Keyboard
While this snippet may not be as useful on a real website, it’s certainly a fun project to study.
Developer Joey Anuff created a full CSS-only keyboard modeled after the Apple keyboard.
It does use some JavaScript to support click events dynamically. So you could delete the JS and still have the exact same keyboard in your browser.
This was designed as part of a CSS coding challenge and I have to say that Joey hit this one out of the park.
Search Boxes
We’ve all seen the Apple search box on their main website and in the mobile App Store. It’s got a common theme with rounded corners and a single magnifying glass icon.
This snippet on CodePen recreated the Apple search bar in full.
You’ll notice that there’s actually a couple variations here: a light one and a dark one. These stand out on their own and you can use them to blend into practically any website.
History of Apple.com’s Navbar
This last one is quite a doozy and a fun trip down memory lane.
Take a look at this pen and scroll through some of the designs. You’ll find a huge compilation of every Apple navigation menu dating back to the late 90s.
So many designs, so many crazy gradients. All from one tech company that has left quite a mark on the design space.
This post may contain affiliate links. See our disclosure about affiliate links here.
