Apple is well-known for his or her unimaginable design prowess and easy-to-use merchandise. Their know-how is a designer’s greatest good friend, so it’s no shock that we regularly comply with of their footsteps.
It’s additionally why you will discover so many re-creations of Apple’s model on the internet. Use the code snippets on this assortment for each inspiration and to additional your studying.
See the Pen Apple menu redesign by Daniel Gooß (@daniel_gooss) on CodePen.
The Apple.com menu is well-known by even the youngest net designers. It’s been round for years and has all the time had such a novel model.
This snippet takes the Apple navigation menu and restyles it utilizing CSS3.
The design is usually the identical, but it surely consists of some totally different hover options and a customized search menu. However since it is a demo, the hyperlinks don’t truly work. You’d should do some enhancing on this one to make it totally purposeful.
Messages Ready Animation
See the Pen Apple Messages “Waiting” Animation by Maxwell Antonucci (@max1128) on CodePen.
Anybody who’s used the Apple messaging app must be aware of the speech bubble icon. It pops up at any time when somebody is typing and it’s received a reasonably slick animation.
Developer Maxwell Antonucci rebuilt this animation in full with simply pure HTML and CSS. You possibly can see the ultimate consequence on this pen.
Notice that this does use Pug for HTML compiling and Sass as an alternative of CSS. However you possibly can all the time compile down for those who can’t learn these frameworks.
Both manner, it is a sensible snippet for studying how you can design animated graphics utilizing CSS.
Apple-Model Cell Menu
See the Pen Apple model cellular menu by Andy Leverenz (@justalever) on CodePen.
Past the primary desktop navigation is Apple’s cellular responsive menu.
This makes use of the everyday hamburger icon and it’s discovered on most all gadgets. If you wish to re-create this in HTML5, take a look at this free snippet written by Andy Leverenz.
If you happen to click on the hamburger icon you get a neat little animation impact, plus the menu truly slides down onto the web page. How cool is that!
iOS iMessage in HTML5
See the Pen iOS9 iMessage Responsive HTML5 by Jojo Jonah outdated (@jojojonahold) on CodePen.
All the JS code runs on jQuery – so it’s tremendous straightforward to edit. To not point out that the ultimate demo is so darn smooth and actually does really feel like the true iMessage app.
Whereas I can’t think about that this might be helpful outdoors of a follow venture, it’s nonetheless enjoyable to play with.
MacOS + Browser
See the Pen MacOS + Browser by Liam (@Lierrmm) on CodePen.
Talking of enjoyable follow tasks: get a load of this one replicating a full MacOS dashboard in your browser.
You possibly can hover the dock icons to get that conventional Apple animation, and even click on the Chrome app icon to open up a mock browser window.
That is positively a candy venture that you simply’ll actually admire in full view.
Apple Watch Radial Chart
See the Pen Apple Watch Radial Chart by Mark (@xna2) on CodePen.
Apple’s smartwatch broke new floor within the tech area. It additionally created an entire new interface for customers to study.
If you happen to just like the Apple Watch animations, then take a look at this snippet on CodePen. It incorporates a customized animated watch face with the radial chart design.
These are pretty frequent options with many Watch apps, however you by no means see them within the browser. Effectively, till now.
Apple Model Toggle
See the Pen Apple Model Toggle by Adrien Bachmann (@AdrienBachmann) on CodePen.
Ah, the basic on/off change. This primary gained recognition because of iOS and it actually caught round because of Apple’s authentic design.
To not point out that this snippet is clear and really does match the Apple-style of animation. You possibly can change the scale, coloration and animation model with ease.
It’s a superb solution to convey some Apple design into your individual net venture.
Pure CSS Apple Keyboard
See the Pen Re: Apple Keyboard in pure CSS. by Joey Anuff (@januff) on CodePen.
Whereas this snippet will not be as helpful on an actual web site, it’s definitely a enjoyable venture to review.
Developer Joey Anuff created a full CSS-only keyboard modeled after the Apple keyboard.
This was designed as a part of a CSS coding problem and I’ve to say that Joey hit this one out of the park.
Search Packing containers
See the Pen Search Field impressed by apple by M. Mulia Maulana (@molenmaulana) on CodePen.
We’ve all seen the Apple search field on their foremost web site and within the cellular App Retailer. It’s received a standard theme with rounded corners and a single magnifying glass icon.
This snippet on CodePen recreated the Apple search bar in full.
You’ll discover that there’s truly a pair variations right here: a lightweight one and a darkish one. These stand out on their very own and you need to use them to mix into virtually any web site.
Historical past of Apple.com’s Navbar
See the Pen The Historical past of Apple.com’s Nav Bar in CSS by DBM (@dbm) on CodePen.
This final one is kind of a doozy and a enjoyable journey down reminiscence lane.
Check out this pen and scroll by a few of the designs. You’ll discover an enormous compilation of each Apple navigation menu courting again to the late 90s.
So many designs, so many loopy gradients. All from one tech firm that has left fairly a mark on the design area.