Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo

jQuery plugin: Easy List Splitter

jQuery plugin: Easy List Splitter

The plugin will get your list, wrap it into a container div, generate as many lists as the number of columns you require and evenly split the list items into the different list elements. If the list items are not enough to evenly fill in all the columns, the plugin will hide the columns in excess (this might happen only if you’re ordering your list items vertically as per default).

jQuery Horizontal Accordions plugin: Easy Accordion

jQuery Horizontal Accordions

Easy Accordion is a highly flexible jQuery plugin for creating horizontal accordions quickly.It generates the accordion from definition lists (dts, so it is SEO friendly) and has support for multiple instances to be ran on the same web page.The plugin can slide any content like images, lists, Flash, etc. and its look can be totally customized via CSS.

Creating a polaroid photo viewer with CSS3 and jQuery

Creating a polaroid photo viewer with CSS3 and jQuery

By combining the CSS3 Box Shadowand Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s rotated to the left or the right (random).

jQuery Roundrr – How To Create Circular Image Galleries With jQuery

How To Create Circular Image Galleries With jQuery

I’m going to introduce you to some of the concepts involved in getting the coordinates we need to plot our image galleries around a shape and in part 2 I’ll introduce you to jQuery Roundrr plugin I wrote that will allow you to easily create interactive event-based galleries using jQuery and a little CSS.

jQuery UI CoverFlow 2.0

jQuery UI CoverFlow 2.0

I would like to show you how to create and use a jQuery UI CoverFlow component powered by $.widget and CSS3 transforms. It’s highly extensible, supports click, keyboard and mousewheel interaction.The iTunes CoverFlow effect is one of my favorite user-interface patterns – it’s excellent for navigating around large collections of images (or data represented by images) and I thought it would be of great benefit to put out an updated version of this component out there.

Pull Out Content Panel with jQuery

Pull Out Content Panel with jQuery

We will create a content panel that slides out at a predefined scroll position. It will reveal a teaser with related content and it can be expanded to full page size to show more. A custom slider allows to scroll through many items in the panel.Depending on how many items can fit to the user’s screen, we will adapt the item container in order make the maximum number of items fit, centering it horizontally.

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

We’ll be creating a bar that pops up at the top of a page, and stays above the content (similar to ‘hellobar’). The popup bar was only tested in Chrome and Safari and may not work in other browsers. The bar can be used to display information, for example your latest blog post, to the user.

The way the bar pops out at the top makes sure it’ll be seen. And after the visitor has seen the information, he/she has the option to hide the bar.

jQuery iTunes Like Slide Show Gallery

JQuery iTunes Like Slide Show Gallery

This example is not really the same like iTunes gallery like in the image left, but at least the basic behavior almost the same, I have played with JQuery UI Slider and Rotate3Di plugin.Actually I modified thejQuery UI slider scroll pane example.

How to Create a jQuery Confirm Dialog Replacement

How to Create a jQuery Confirm Dialog Replacement

We are building a cross-browser, custom confirm dialog in the form of an easy to use jQuery plugin. You can choose the text, buttons, and actions that will be executed when they are clicked.

How To Create a Stylish Content Slider using CSS3 & jQuery

How To Create a Stylish Content Slider using CSS3 & jQuery

Content sliders are very popular because they work and usually don’t hinder usability and in many cases can even improve the user experience. Today we’ll learn how to create a stylish content slider using CSS3 and some jQuery magic.