Total Followers 132,503
I’m sure that at one point or another you were designing a website and thought it could use a little something extra. That bit of something that adds extra functionality or enhances what it already has, making it not only easier for the user to receive the information they seek, but also present it in a neat package.
In no particular order, I give you a handpicked collection of jQuery plugins and some CSS3 tricks to top it off. Surely, with these in your designer arsenal, your creations will stand out more than ever before.
Excellent when using enlarged text for emphasis along with visual content.
A very elegant way of displaying items with the possibility of quickly previewing the content.
Suggestion: use with other resizing elements so that the user can see them rearrange.
Expanding tool tips with a smooth animation, revealing extra content only when the user wants it.
Suggestion: use with images that display several products (e.g. furniture) or when explaining the highlights of a design in your portfolio.
Organise and reorder items to make it easier to find exactly what you need. Click once and just watch everything slide into place.
A little old, but still awesome. It adds a simple and appealing way of translating a website or just parts of it.
Interactive map with the possibility of expanding for other uses. Includes the world map, US, Europe and Germany.
An interesting effect that can be added to make text elements more eye-catching. Basically, it shows random characters as it reveals the actual text.
Suggestion: use sparingly so as not to make everything confusing.
Display pictures in a simple grid that shuffles the elements in a Rubik’s cube fashion.
Although the title says “sponsor wall flip”, that’s just one of the many uses for this plugin. Show visual elements and put bite-sized information on the back.
Note: contains a little PHP.
Add a colourful and modern clock to your design or perhaps even adapt it into a countdown for when launching a new website!
MopTip2 is a plugin that lets you add customizable tooltips to various elements. The tooltips can close automatically or be manually closed and they may also display images.
Another tooltip plugin with the added bonus of being able to use virtually any CSS styles and transform them into whatever you may want.
Timelnr is a stylish timeline gallery with the option of placing it horizontally or vertically, and having it play automatically.
By just marking certain elements in the HTML, this plugin will automatically create a navigation menu for you, acting like small bookmarks placed neatly on the side of the window.
Ever thought PowerPoint or Keynote presentations were cumbersome? Then look no further! With Deck you can create online HTML presentations with a multitude of uses, perhaps enhancing an e-learning product.
Enhance your content by letting users see the finer details with this Retina-like plugin.
Simple and effective, pageSlide reveals information by pushing the entire page to the side, thus not disrupting the positions of other elements.
Suggestion: it could be used to hide a vertical navigation, leaving room for full-page content.
A simple and sleek gallery with strip transitions and several formats.
A more interesting slideshow which pieces together the slides and pans through them with a slightly elastic effect.
Suggestion: given the effect, the slides could actually be parts of one big image for something more special.
Similar to the Retina plugin, jqZoom can be customized in more ways and has more zooming options, such as drag-zoom or through simple mouse-over.
Add a little creativity to your tag cloud by turning it into a tag sphere! Just click and drag to rotate it and use the mouse wheel to zoom in and out. The plugin simply transforms all divs that have the class “tags” and contain an unordered list with links inside.
Suggestion: since all it needs is a div, why not be creative and apply it to a navigation?
JEffects is a plugin containing more effects that can be applied to various elements within your website. For instance, it can be applied to input fields to create a very pleasant effect.
Note: not free.
PhotoShelf is an elegant gallery that allows you to scroll through a collection of images and zoom in on portions of the selected image. It can also add separators in the stack to organise your items.
Note: not free.
A double accordion, if you will. It smoothly expands to an easier to read width and makes room for subcategories, also displayed inside an accordion.
A very interesting plugin that lets you display the latest tweets about a certain topic inside a resizeable tooltip.
Everything you wanted to know about CSS3, plus some tutorials on how to create some nifty enhancements.
Note: some tutorials contain some JavaScript.
As the title implies, this simple but versatile effect is made with pure CSS transitions, taking advantage of anchors.
Create an OS X dock with CSS3 properties, including reflections to make your design stand out.
Learn how to hide and display elements according to the size of the screen. A step towards responsive web design.
With just one line of code you can split a text container into columns, lending itself nicely to dynamic content.
Get The Only Freelancer crash course you will ever need to read!
Costin is a passionate multimedia designer focused on graphics, video and web. Coming from the often stressful Bucharest and currently living in Denmark, right now he is probably lost in thought, pondering absurd but creative ideas.
Thursday, March 1st, 2012 13:47
Cool as hell! Will be using many of these for future projects. Thank you.
Sunday, February 26th, 2012 18:41
No doubt one of the best collections I have ever seen! Bookmarked!
Thank you for sharing!
Saturday, February 25th, 2012 14:09
really awasome. thanks a lot.
Friday, December 30th, 2011 05:35
nice tutorial.. thanks…. veri much
Thursday, December 1st, 2011 08:57
Wow, all the plugin are so perfect.Thanks for sharing.
Thursday, December 1st, 2011 04:11
Wow this is so awesome…….
Thanks for posting guys
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!
![Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]](http://www.1stwebdesigner.com/wp-content/uploads/2013/03/preview-small-webdesignvideocoursepart3.jpg "Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]")
![Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2]](http://www.1stwebdesigner.com/wp-content/uploads/2013/03/preview-small-basicwebdesignvideocoursepart2.jpg "Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2]")
Phillip
Thursday, December 1st, 2011 04:11
Wow this is so awesome…….
Thanks for posting guys
Dave
Friday, December 2nd, 2011 01:30
I’m loving the OSX dock, will definitely make use of that
akif
Thursday, December 1st, 2011 08:57
Wow, all the plugin are so perfect.Thanks for sharing.
Lauren
Friday, December 30th, 2011 05:35
nice tutorial.. thanks…. veri much
mahmood
Saturday, February 25th, 2012 14:09
really awasome. thanks a lot.
Harry
Thursday, March 1st, 2012 13:47
Cool as hell! Will be using many of these for future projects. Thank you.
Tylor
Sunday, February 26th, 2012 18:41
No doubt one of the best collections I have ever seen! Bookmarked!
Thank you for sharing!