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

Architect Lite : Front-End HTML Builder

Architect Lite : Front-End HTML Builder

Architect Lite is a javascript application that allows users to build custom HTML designs via drag and drop with no coding knowledge. It is perfect for bundling with your template on themeforest or integrating into your existing projects.

cForm : jQuery CSS-styleable Form Element

cForm : jQuery CSS-styleable Form Element

jQuery cForm replaces your standard, ugly form-elements with nice and clean non-form html code which can be styled via CSS.The original elements are retained (just hidden), so you won´t loose any form-element related functionality.
You can add custom HTML templates for all supported form elements and use CSS to style them. Or you just use the default templates and style them with the included CSS or SCSS file.

Zenith : Responsive Slider jQuery Plugin

Zenith : Responsive Slider jQuery Plugin

Zenith is responsive slider jquery plugin that comes in 4 basic layouts and 7 transition animation available . 4-th layout, or slider layout, has some variations of it’s own, producing 3 more pre-defined sub-layouts and unlimited possibilities of styling, editing and creating some of your own variations. You can edit some HTML, and add that markup by passing it’s elements classes or id’s to the options when initializing zenith.

Zenith differs from other responsive slider jquery plugins in dozen ways. It’s unique layouts for showcasing highlights will enhance your product, or app presentation. You can style almost every part by passing your own custom CSS directly into options, without even touching the main style.

jQuery Slide and Swipe Menu

jQuery Slide and Swipe Menu

A sliding swipe menu that works with touchSwipe library.This plugin uses CSS3 transform property to move the navigation. That’s why it works smoothly.

Dynamic Max Height plugin for jQuery

Dynamic Max Height plugin for jQuery

This is a jQuery plugin to dynamically check a layer height and compare it to a custom height value. If layer height is higher than that custom value (data-maxheight), a “show more” button and a bottom gradient will appear.

It works with CSS3 transition to get a smooth animation.

Bootstrap Vertical Menu

Bootstrap Vertical Menu

A vertical menu for desktop web apps, using bootstrap.

Animated Page Transition with CSS3 & Ajax

Animated Page Transition with CSS3 & Ajax

An ajax powered page transition, with a slide-in content animation triggered by a side tabbed navigation.

We’ve been experimenting lately with a CSS powered animation that replaces the refresh of the web page while the content is updated using ajax. Today’s nugget is based on the same idea, but with a different execution: this time a simple hover effect turns into a loading bar, that finally expands with new content!

GGpopover.js : A jQuery Popover plugin

GGpopover.js : A jQuery Popover plugin

ggpopover.js – It’s a simple jQuery popover plugin extended from Twitter Bootstrap’s popover plugin that supports 4 positions, title background color, title font color, title border color, content background color, content text color, arrow color without using images.

  • 4 Positions: top, right, bottom and left.
  • Unlimited title background colors.
  • Unlimited title font colors.
  • Unlimited content background colors.
  • Unlimited content text colors.

Playful Interaction for Draggable Elements

Playful Interaction for Draggable Elements

A little playful interaction idea where we add some bounciness to a draggable element and animate it depending on its position.We wanted to create a playful dragging interaction that will morph and animate an element depending on its position. If dropped before the bounds we will snap the element back with an elastic effect. We also add some bounciness to inner elements so that everything gets an even more organic feel.

Flat slider : Visual styler for jQuery UI slider

Flat slider : Visual styler for jQuery UI slider

Flat slider is an online tool that allows you to turn the jQuery UI slider into a beautiful flat slider. You can change the color and size of the slider line, handles and range. The tool generates the CSS as you make your changes, so that you can easily copy and paste it into your website stylesheets.