Mouthwatering Collection Of jQuery Plugins And CSS3 Tricks

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.

jQuery

1. Fly-out menu

Excellent when using enlarged text for emphasis along with visual content.

2. Grid portfolio

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.

3. Slide out contextual tips

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.

4. Quicksand – reorder and filter

Organise and reorder items to make it easier to find exactly what you need. Click once and just watch everything slide into place.

5. Sunday morning – translation plugin

A little old, but still awesome. It adds a simple and appealing way of translating a website or just parts of it.

6. jVectorMap

Interactive map with the possibility of expanding for other uses. Includes the world map, US, Europe and Germany.

7. Shuffle letters effect

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.

8. Mosaiqy – picture shuffle

Display pictures in a simple grid that shuffles the elements in a Rubik’s cube fashion.

9. Sponsor wall flip

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.

10. Colourful jQuery clock

Add a colourful and modern clock to your design or perhaps even adapt it into a countdown for when launching a new website!

11. MopTip2

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.

12. Grumble

Another tooltip plugin with the added bonus of being able to use virtually any CSS styles and transform them into whatever you may want.

13. jQuery Timelnr

Timelnr is a stylish timeline gallery with the option of placing it horizontally or vertically, and having it play automatically.

14. Flexible nav

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.

15. Deck – HTML presentations

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.

16. Apple-like Retina effect

Enhance your content by letting users see the finer details with this Retina-like plugin.

17. jQuery pageSlide

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.

18. jqFancyTransitions

A simple and sleek gallery with strip transitions and several formats.

19. Panning slideshow

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.

20. jqZoom

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.

21. 3D tag cloud

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?

22. JEffects

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.

23. PhotoShelf

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.

24. Grid accordion

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.

25. Latest tweets tooltip

A very interesting plugin that lets you display the latest tweets about a certain topic inside a resizeable tooltip.

Bonus: a few CSS tricks

1. CSS3 Transitions, Transforms and Animations

Everything you wanted to know about CSS3, plus some tutorials on how to create some nifty enhancements.
Note: some tutorials contain some JavaScript.

2. Pure CSS Accordion

As the title implies, this simple but versatile effect is made with pure CSS transitions, taking advantage of anchors.

3. OS X dock

Create an OS X dock with CSS3 properties, including reflections to make your design stand out.

4. CSS media query

Learn how to hide and display elements according to the size of the screen. A step towards responsive web design.

5. CSS3 multi column

With just one line of code you can split a text container into columns, lending itself nicely to dynamic content.