15 Incredible Apple Webdesign Style Coding Tutorials
Dainis Graveris
Apple style is very popular trend in our days – their design and style is really unique, clean and always good-looking. No wonder there are many designers trying to understand that style, why it works and how. There also a bunch of advanced coding tutorials available out there. Since I am Apple website style fan myself, I did research and showcased several amazing coding tutorials I found in the Internet.
I thought I will find more, but I guess Photoshop Apple tutorials are a lot more popular now than coding tutorials. But I hope you will enjoy this article as well – it’s short, but really quality one!
1. A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
Here you’ll be making an Apple-like slideshow gallery, similar to the one they use on their website to showcase their products. It will be entirely front-end based, no PHP or databases required.
2. Apple style Accordion Menu
This tutorial will walk through how to create your own simple plugin, and then replicate the Apple downloads drawers using the very excellent Accordion plugin.
3. How to: Recreate apple.com menubar
Apple.com menubar is really an exemple in terms of clean, semantic code and very cool design. In this tutorial, you will recreate Apple’s website navigation bar and study the techniques used.
4. Leopard Desktop with jQuery using jqDock
In this tutorial you’ll learn how to use jQuery to create a completely coded Dashboard, just like Leopard! This can be handy in hiding a whole lot of gadgets or widgets you don’t have space for!
5. Create apple.com-like breadcrumb using simple CSS
In this great tutorial you will recreate http://store.apple.com/ type menu navigation.
6. Create an Apple Inspired Flash Preloader
In this tutorial you’ll create an Apple inspired preloader MovieClip and lrearn how to display some loading information. All this using Flash and ActionScript 3.0.
7. Create an apple style menu and improve it via jQuery
In this tutorial you will create Apple-flavored Leopard-text-indent style from Photoshop to coding it with jQuery.
8. A fancy Apple.com-style search suggestion
In this tutorial author will be trying to recreate the effect from that website by creating a fancy apple.com-style search suggestion.
9. The iPhone unlock screen in xHTML, CSS and jQuery
10. How To: Recreate the Apple Product Slider with JQuery
Stylishly capitalize on limited space with a side scrolling image gallery, similar to the one that Apple uses to show off their products.
11. Fixed Floating Elements
Learn how to create floating comment form like apple shopping basket.
12. WordPress Sidebar Turned Apple-Flashy Using jQuery UI
13. Slider Gallery like on Apple website
14. Apple’s Navigation bar using only CSS
15. Free Apple Style Template
For Further Reading:
Did you enjoy this article and found it useful?
Get even more from us:
Chuck
Posted 20 days ago 24Hi,
Tak a look at the IMac page on the apple website on an iPad http://www.apple.com/imac/ . It has this image scroller that allows you to drag it left and right and certain separate elements move at slightly different rates to create a 3D like effect. I was just wondering if anyone had a clue how they did that.
Nirav Dave
Posted 46 days ago 23hi,
Good Collections of Tutorial…..i like it…..keep it up……..
Edinburgh Van Rental
Posted 67 days ago 22I just wanted to say thanks for these tutorials. Especially the slideshow gallery at the top of the page. It really is beautiful.
Florian Wenzel
Posted 97 days ago 21The Apple like Breadcrumb inspires me a lot, thanks for the nice Tutorials!
Pedro
Posted 132 days ago 20Brilliant tuts! I’d love to access the:
3. How to: Recreate apple.com menubar
Anyone knows how i can get this tutorial info?
Thanks & cheers
Pedro
Johny
Posted 181 days ago 19very nice collection Dainis ! After some googling i found another apple style tutorial explaining how to clone Apple Itunes slider using jQuery .I think you should add it to your list .
http://youhack.me/2011/08/11/create-an-itunes-like-banner-rotatorslideshow-with-jquery/
P.S : I’m subscribing to your RSS :)
Benedetto Tessitore
Posted 259 days ago 18Very good your tutorials, thanks.
Ben
midjin purba
Posted 619 days ago 17Apple is always good and inovatif products, well done.
.-= midjin purba´s last blog ..Do-it-Yourself: Home Improvement Projects =-.
Reginald Santos
Posted 628 days ago 16This is awesome! Mac FTW!
Duvvar Design
Posted 733 days ago 15very love apple
this is thank you.. :)
Antique Salvage
Posted 780 days ago 14I just wanted to thank you for all that useful information. I am trying to do all the things that your tutorials show how to do. I am especially interested in the flash.
seutje
Posted 780 days ago 13lovely sheep stuff, everyone hop on that bandwagon and ditch all creativity and originality! if ur lucky, u can get sued by Stevey himself for breaking some retarded patent he got his greedy lil hands on \o/
choo-choo, all aboard!
Ajay
Posted 781 days ago 12Nice Post
.-= Ajay´s last blog ..27 Best Photoshop Web Layout Tutorials =-.
mupet
Posted 781 days ago 11Great lists, i like apple style, this tutorials is pretty good…
.-= mupet´s last blog ..JuiceKit – SDK for building Information Experience applications =-.
Judd Dunagan
Posted 781 days ago 10Nice Post. Going to tweet it.
cchana
Posted 782 days ago 9The free template is a great resource! Thanks for sharing!
Paul @ HeadwayTips
Posted 782 days ago 8Great post – and useful to see these all in one place.
Thanks for your good work.
Paul.
.-= Paul @ HeadwayTips´s last blog ..Planning Your Site Pages =-.
Blogger Den
Posted 782 days ago 7These really are some great tutorials. Not that I’m a huge fan of Apple, these still bring a lot to the table and I have to admit that I’m very impressed!
.-= Blogger Den´s last blog ..List of Ways to Build Links & Promote Your Website =-.
Benjamin Rama
Posted 782 days ago 6good stuff gotta start learning some code some day soon Im looking firward to what new good things you come up with in 20 10 Dainis
.-= Benjamin Rama´s last blog ..A tutorial published on My Ink Blog =-.
Steve Martin
Posted 783 days ago 5These style coding tutorials are really great… Thanks for sharing them….
Igor Petrushenko
Posted 783 days ago 4I’m so happy to found this blog post!
We will definitely use some styles on http://www.mytaskhelper.com
Especially I like Mac OS X like menu and sidebars!
Cheers,
Igor
.-= Igor Petrushenko´s last blog ..Go away Excel, come together My Task Helper =-.
Martin
Posted 783 days ago 3A great article, Dainis, and thanks for including Tutorialzine!
.-= Martin´s last blog ..Animated Sharing Bar With jQuery & CSS =-.
Indrek
Posted 783 days ago 2Thanks for this list. Some tutorials seem pretty good. Going to check them out now.
.-= Indrek´s last blog ..Backing Up Your Ubuntu With a Custom Script =-.
Reza
Posted 783 days ago 1Really great stuff. Thanks for sharing.
.-= Reza´s last blog ..Free Vector Graphic and illustration Resources [ZLWOlist] =-.