10 Sleek Apple-Style Code Projects From CodePen

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/v91bae7rM8Y/

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

See the Pen Apple menu redesign by Daniel Gooß (@daniel_gooss) on CodePen.

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

See the Pen Apple Messages “Waiting” Animation by Maxwell Antonucci (@max1128) on CodePen.

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

See the Pen Apple style mobile menu by Andy Leverenz (@justalever) on CodePen.

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

See the Pen iOS9 iMessage Responsive HTML5 by Jojo Jonah old (@jojojonahold) on CodePen.

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

See the Pen MacOS + Browser by Liam (@Lierrmm) on CodePen.

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

See the Pen Apple Watch Radial Chart by Mark (@xna2) on CodePen.

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

See the Pen Apple Style Toggle by Adrien Bachmann (@AdrienBachmann) on CodePen.

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

See the Pen Re: Apple Keyboard in pure CSS. by Joey Anuff (@januff) on CodePen.

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

See the Pen Search Box inspired by apple by M. Mulia Maulana (@molenmaulana) on CodePen.

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

See the Pen The History of Apple.com’s Nav Bar in CSS by DBM (@dbm) on CodePen.

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.