Total Followers 132,503
Remember back when if you wanted to add interactivity to your site to improve the UX aspect to make it more appealing to visitors, you had to immediately go to a flash outlet? Well that sure does seem like a long time ago now, surprisingly so because it was just a few short years ago. The decline of Flash use for these instances can be credited to advances in web technologies such as HTML5, CSS3, and jQuery. These advancements have made the use of Flash in most cases an outdated and inefficient method of tackling interactivity in a website. That is why in this article, we’re going to take a look at HTML5, CSS3, and jQuery tutorials, techniques, and resources that can replace aspects of a website where the use of Flash was the dominant and most practical option.
This is a cool tutorial that teaches you how to turn your ordinary check boxes into something stylish, and quite fun to use.
This is a great tutorial by the people at Nettuts+ about how you can get the most out of HTML5 for your fomrs.
jQuery Impromtu is a great replacement for alerts, prompts, and confirmations that users will enjoy and not find annoying in the slightest.
Simple Modal is a flexible modal dialog framework which provides a great interface for development, allowing for some really nice looking forms too.
jQuery Simple Model
This multi-column drop down layout is great for giving users a detailed tree of options to select from.
mcDropdown
jQ Transform is a great tool for adding some style to your forms, giving them cool skin elements.
jqTransform
Niceforms by Embematiq is a cool jQuery plug-in that allows you to turn your boring forms into something cool with one of their designed themes, or with your own custom made one.
Emblematiq Niceforms
Uniform masks your standard forms with custom skins and works in perfect sync with your real form elements, ensuring great accessibility and compatibility.
Uniform
This is a great tutorial to learn how to have image buttons inside of your input fields.
Images As Apart of Input Fields
This is a great WP plug-in that gives you a contact form that slides conveniently from the side of the page, and then back once it is no longer of use.
DynamicWP Contact Form
jQuery Highlight is a great jQuery feature that gives your active input fields a highlight over them, as we know some users need all the extra guidance they can get.
jQuery Highlight
jQuery inline form Validation is a cool hassle free form validation option that takes away the mess that is usually associated with this form feature.
jQuery inline from Validation
This jQuery powered navigation menu is very reminiscent of what was usually done in flash, and moves so smoothly you might think it was. It is fully browser compatible, and even maintains functionality if Javascript is turned off.
jQuery White Smoke Menu
This jQuery menu plug-in is a great option to look into when aiming to build a complex multilevel tree menu with some style and great functionality.
mb.Menu
Coda Slider is a very versatile and feature full panel slider. It comes as is very well suitable for your panel slider needs, and there have been great advancesin how to better it.
Coda Slider
This is by far the best tabs and/or panel navigation jQuery plug-in when level of how extensibility is concerned.
ID Tabs
This is a cool tutorial that teaches you how to make a jQuery powered menu with the sub entries sliding out horizontally.
Horizontal Sliding Menu
This collapsible bread crumb menu that collapses based on the the amount and length of the elements in the set.
jBreadCrumb
FLOWERNAV is a cool animated navigation plug-in that, well gives a flower effect to your link.
FLOWERNAV
This is an easy to follow jQuery accordion style navigation menu tutorial.
Accordion Style Menu
Slide Note is a great plugin for giving your visitors a little hint, or note about something on your website.
Slide Note
Page peel is a simple to use jQuery plug-in that is great when you want to advertise something in a cool way.
jQuery Page Peel
InfiniScroll is a cool plug-in that allows for an never ending scrollable section. This is great for websites that have sections with long lists.
jQuery InfiniScroll
SliderNav is a jQuery plug-in that allows you to incorporate dynamic vertically sliding content to your website.
SliderNav
Tipped is a cool plug-in that easily allows you to add tips to your website’s content, there are also cool skins to choose from.
Tipped
Supersized is a jQuery plug-in that allows you to have a image slideshow as your website’s background.
Imagin8 is not just another jQuery image slider. This one allows for you to direct a path folder, so ALL THE IMAGES DON’T HAVE TO BE IN YOU HTML! Just label your first image as 1.jpg for example, and the following the numerically after that, and they will be automatically added to your slideshow. Great for clients.
Imagin8
Lettering is a jQuery plug-in that allows you to have complete control of every letter, opening for great creative web typography experimenting.
jQuery Lettering
Stylesheet Switcher is a jQuery plug-in that lets you set links within your page to change to different stylesheets.
jQuery Stylesheet Switcher
Flip is a jQuery plug-in that lets you flip your web elements in one of four directions.
Flip
Get The Only Freelancer crash course you will ever need to read!
Jamal is a young freelance web designer, web developer, writer, and blogger based in Atlanta, Ga. His work can be found at his online identity Five Alarm Interactive(FAI). He is a college student and philosophical poet by day, and passionate professional by night. You can keep up with him on Twitter @5alarmint.
Tuesday, November 15th, 2011 22:17
you have solved my many problems, keep on updating more effects thank you this stuff…
Saturday, November 12th, 2011 06:18
Thank you for such a wonderful post! Very useful. You rock!
Friday, November 11th, 2011 17:55
Thank you for this amazing list. I have noticed many people are using jQuery and HTML5 plus CSS3, so this way I can take a better look and learn some more. If we’re not keeping up with the progress, we’ll be left behind ;)
Saturday, November 12th, 2011 21:14
Wow, thank you for thinking my list is amazing. Truly flattered and appreciate that Dojo :). Yeah its been a slow moving train seemingly forever now, but it gained a lot of steam last year. Gotta keep up to keep working, but isn’t that why you gotta love our field? :)
Friday, November 11th, 2011 17:19
Great list of jquery add ons. I love the form ones as that is usually such a hard part of the site to really make look nice and modern.
Friday, November 11th, 2011 19:26
Fab post Jamal, I know a lot of people think it’s too soon to jump on the HTML5/CSS3 train, but I personally couldn’t wait to get started with it. jQuery is the thing I’m focusing on at the moment though – I love how user-friendly it is. Thanks for the links, I’ve bookmarked this post for future reference!
Saturday, November 12th, 2011 21:13
Thanks for liking my post Jenni :). As soon as I found a way for older IE browsers to accept HTML5 tags, last year or so I think, I moved right into HTML5 and CSS3. I love jQuery too, and much prefer coding in it than Actionscript.
Friday, November 11th, 2011 17:09
Great article man! I am also a web designer based in the US. I absolutely agree that flash is on a fast decline, and its scary that I even considered to start learning it! But with the awesome jQuery and HTML5, these options are better. I am really fascinated by the user models that jQuery can do. Got to look more into that.
Saturday, November 12th, 2011 21:18
You should, they offer great possibilities. Flash is only essential to know in certain instances, for the most part in web design/development when regarding UX its not so important.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Samuel
Friday, November 11th, 2011 17:09
Great article man! I am also a web designer based in the US. I absolutely agree that flash is on a fast decline, and its scary that I even considered to start learning it! But with the awesome jQuery and HTML5, these options are better. I am really fascinated by the user models that jQuery can do. Got to look more into that.
Jamal
Saturday, November 12th, 2011 21:18
You should, they offer great possibilities. Flash is only essential to know in certain instances, for the most part in web design/development when regarding UX its not so important.
Donny
Friday, November 11th, 2011 17:55
Thank you for this amazing list. I have noticed many people are using jQuery and HTML5 plus CSS3, so this way I can take a better look and learn some more. If we’re not keeping up with the progress, we’ll be left behind ;)
Jamal
Saturday, November 12th, 2011 21:14
Wow, thank you for thinking my list is amazing. Truly flattered and appreciate that Dojo :). Yeah its been a slow moving train seemingly forever now, but it gained a lot of steam last year. Gotta keep up to keep working, but isn’t that why you gotta love our field? :)
Kerr Hutchinson
Friday, November 11th, 2011 17:19
Great list of jquery add ons. I love the form ones as that is usually such a hard part of the site to really make look nice and modern.
Jenni
Friday, November 11th, 2011 19:26
Fab post Jamal, I know a lot of people think it’s too soon to jump on the HTML5/CSS3 train, but I personally couldn’t wait to get started with it. jQuery is the thing I’m focusing on at the moment though – I love how user-friendly it is. Thanks for the links, I’ve bookmarked this post for future reference!
Jamal
Saturday, November 12th, 2011 21:13
Thanks for liking my post Jenni :). As soon as I found a way for older IE browsers to accept HTML5 tags, last year or so I think, I moved right into HTML5 and CSS3. I love jQuery too, and much prefer coding in it than Actionscript.
Chavon
Saturday, November 12th, 2011 06:18
Thank you for such a wonderful post! Very useful. You rock!
vikrant
Tuesday, November 15th, 2011 22:17
you have solved my many problems, keep on updating more effects thank you this stuff…