25 jQuery and CSS3 Tutorials to Help You Build Apple-Like Designs
Know why the Windy City hosts approximately 40 million visitors a year using this infographic.
Lately we talked a lot about HTML5 and the new revolution that comes with it, but we forgot on mentioning jQuery, an essential element that bonds with HTML5 and brings us so much joy and beauty in our daily web experiences. jQuery (the write less, do more JavaScript library) is responsible for those fancy sliders, the animated menus and pretty much every cool motion-friendly element that a web page has while keeping things clean and light-weight.
Combining all of these brilliant techniques with CSS3 makes things even more interesting and if we add some of that unique Apple flavor to the design, we obtain a marvelous result making everybody happy and at the same time embracing the future.
1. Create iPhone Unlock Screen
Helps you create a nice iPhone desktop along with embedding the “Slide to Unlock” menu which works perfectly fine. This tutorial combines XHTML, CSS and a bit of jQuery to give the amazing iPhone touch and design.
2. The New Apple Slideshow Gallery
You know that Apple has had tons of sliders available on the Apple.com website and all of them brought great designs and innovation in the industry. In this tutorial, the guys at Tutorialzine managed to recreate one of the latest designs and explained it to you step by step in a nice jQuery tutorial.
3. Create iPhone Retina Effect
Even when it comes to magnifying content, Apple manages to arouse our interest and to be honest is a pretty cool effect that you get on Safari. This tutorial shows you how to do that exactly using jQuery and some CSS in XHTML.
4. Create Dock Like on Leopard
I’m sure that this tutorial will make happy many of you because I’ve seen people looking for the cool dock and how to add it on Windows desktops, mobile phones and even on websites. Now you can embed it with ease in your website and you can also add some other great functions to it too.
5. Recreate The Mac book Menu-bar
You know that menu-bar available on top of your Macbook and also on Apple.com? Well, now you can create that and use it on your website along with it’s great Apple design.
6. Breadcrumbs Like Apple.com
Breadcrumbs are elements that make navigation on a site much more easy and fun, and as you probably know Apple has one of those too. In fact, even Devstand has one of them. In this tutorial you will learn how to build a replica of the one available on Apple.com .
7. Apple’s OS Menu
If you are familiar with Mac OS, then you will know how this jQuery plug-in looks like. Basically, what jqDock does is to increase the icons size on rollover just like the native dock available on Mac.
8. iPhone-Like Toggle Buttons
You know that on and off icon switcher available on iDevice menus? Well, this iToggle transforms that menu into a web-based application and let’s you embed it in whatever application you wish along with the nice smooth Apple design.
9. iPhone – iPad Scrolling Effect
You know that touch and drag motion available on iPad scrolling effect? Well, this is exactly what this tutorial helps you to do, but this time in a web interface by clicking and dragging.
10. Complete jQuery UI for iPhone
This is a Google Code project designed to help you rebuild the iPhone and iPad user-interface along with their functions in a web-based environment. The project contains detailed info about jQuery, download page and Wikis to help you go through every step with ease.
11. Build iPhone’s Springboard
A great tutorial brought to you by CSS-Tricks website to help you build a replica of the iPhone Springboard containing natural effects and click-able icons
12. iPad-Themed jQuery Slider
A nice looking and filled with effects jQuery slider integrated within the iPad smooth look just like a frame.
13. Apple Login Form With 3D Transformation
Just a simple login form containing the popular shiny Apple-Like background. Keep in mind that the form doesn’t contain any additional PHP code so it does nothing. The purpose of this tutorial is to teach you how to make the design only. What’s even cooler at this form is that when you click on “Forgot?”, the panel spins and gives you the password recovery options.
14. iPhone’s Contact Book
Is an exact replica of the iPhone Contact Book. This even comes with a Top indicator which changes character letter while scrolling (Just like the iPhone) based on whatever person you want to “call”.
15. Create iPhone-Like Passwords Fields
You know that magnifier when you type passwords, the magnifier which shows you just the last letter in your password? Well, that is exactly what this tutorial show’s you how to make + a button which allows you to see the entire password.
16. Build Shiny Knobs Control Using jQuery
Yet another brilliant tutorial from Tutorialzine! This time we talk about the specific shiny buttons with controllers.
17. Fancy Apple-Style Slide Navigation
This menu is based on the original Apple.com menu, but unlike that one, this menu comes with some cool animations too. The menu will show a slide-out image while rolling over an item in the list with slide-in and masking after rolling out.
18. Recreate Mac’s Leopard Desktop
We talked about the cool jqDock with magnifying icons on rollover, but this time we have some more interesting features along with windows and gadgets which can be easily moved based on preference.
19. Slick Content Slider
A fancy elegant slider for content that comes with a sliding bar so that you can choose how fast you switch between products or elements of the site.
20. Make an Apple-Like Splash Screen
Apple has always got an interesting way to feature their products making you focus on what really matters. This tutorial helps you make the exact same thing by offering a intro with fading text before the actual show.
21. Search Suggestion Like on Apple.com
Just like Google, Bing and many other major search engines, the Apple website comes with a search suggestion tools which helps you find things more easily. This jQuery tutorial helps you create a replica of that search-suggestion.
22. Downloads Menu Effect
Inspired by the Apple.com Download section. You can see that when you roll over a main category, the menu expands and unveils submenus.
23. Apple-Inspired Flash Preloader
The attention to details is what makes things great, right? Well, even if most people don’t actually care about customizing and improving the preloader looks, Apple does and you can use that too.
24. Floating Elements
Fixed elements are of great use especially when you launch a new product or you have a piece of content which needs maximum audience. This makes elements stay where you place them even if people scroll down through content.
25. iPod-Like Drilldown Menu
A nice user friendly way to browse through deep hierarchy menus. This helps users to focus on whatever they search for and access it fast just like on iPod devices.
26. Tipue Drop
This is a menu created by the guys at Tipue. The search menu is pretty similar to the one available on Apple.com and you can also download it for free.
There’s a better search suggestion menu at http://www.tipue.com/drop
Indeed, it looks pretty good! Thanks for sharing with us, Davie!