Mouthwatering Collection Of jQuery Plugins And CSS3 Tricks

Posted in Coding, HTML & CSS, JS & AJAX, Plugins2 years ago • Written by 7 Comments

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.
01-fly-out-menu

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.
02-grid-portfolio

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.
03-slide-out-contextual-tips

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.
04-quicksand-reorder-and-filter

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.
05-sunday-morning-translation

6. jVectorMap

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

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.
07-shuffle-letters-effect

8. Mosaiqy – picture shuffle

Display pictures in a simple grid that shuffles the elements in a Rubik’s cube fashion.
08-mosaiqy-picture-shuffle

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.
09-sponsor-wall-flip

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!
10-colorful-jquery-clock

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.
11-mop-tip-2

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.
12-grumble-tooltip

13. jQuery Timelnr

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

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.
14-flexible-nav

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.
15-deck-presentations

16. Apple-like Retina effect

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

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.
17-jquery-page-slide

18. jqFancyTransitions

A simple and sleek gallery with strip transitions and several formats.
18-jquery-fancy-transitions

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.
19-panning-slideshow

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.
20-jquery-jqzoom

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?
21-jquery-3D-tag-cloud

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.
22-jquery-jeffects

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.
23-jquery-photo-shelf

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.
24-jquery-info-grid

25. Latest tweets tooltip

A very interesting plugin that lets you display the latest tweets about a certain topic inside a resizeable tooltip.
25-jquery-tweet-feed

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.
CSS-01-transitions-transforms-animations

2. Pure CSS Accordion

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

3. OS X dock

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

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.

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

8 Written Articles

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.

7 Comments Best Comments First
  • mahmood

    Saturday, February 25th, 2012 14:09

    5

    really awasome. thanks a lot.

    +1
  • Dave

    Friday, December 2nd, 2011 01:30

    3

    I’m loving the OSX dock, will definitely make use of that

    0
  • akif

    Thursday, December 1st, 2011 08:57

    2

    Wow, all the plugin are so perfect.Thanks for sharing.

    0
  • Lauren

    Friday, December 30th, 2011 05:35

    4

    nice tutorial.. thanks…. veri much

    0
  • Phillip

    Thursday, December 1st, 2011 04:11

    1

    Wow this is so awesome…….

    Thanks for posting guys

    0
  • Harry

    Thursday, March 1st, 2012 13:47

    7

    Cool as hell! Will be using many of these for future projects. Thank you.

    0
  • Tylor

    Sunday, February 26th, 2012 18:41

    6

    No doubt one of the best collections I have ever seen! Bookmarked!
    Thank you for sharing!

    0
  • Harry

    Thursday, March 1st, 2012 13:47

    7

    Cool as hell! Will be using many of these for future projects. Thank you.

    0
  • Tylor

    Sunday, February 26th, 2012 18:41

    6

    No doubt one of the best collections I have ever seen! Bookmarked!
    Thank you for sharing!

    0
  • mahmood

    Saturday, February 25th, 2012 14:09

    5

    really awasome. thanks a lot.

    +1
  • Lauren

    Friday, December 30th, 2011 05:35

    4

    nice tutorial.. thanks…. veri much

    0
  • Dave

    Friday, December 2nd, 2011 01:30

    3

    I’m loving the OSX dock, will definitely make use of that

    0
  • akif

    Thursday, December 1st, 2011 08:57

    2

    Wow, all the plugin are so perfect.Thanks for sharing.

    0
  • Phillip

    Thursday, December 1st, 2011 04:11

    1

    Wow this is so awesome…….

    Thanks for posting guys

    0

Comments are closed.

54.227.141.230 - unknown - unknown - US