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

    TabSelect jQuery Plugin

    May 20, 2012 | CSS2 / CSS3.0, Forms, Plugins
    TabSelect jQuery Plugin

    A plugin to select one or more array or form entries visually, for example to filter a list or replace a multiselect form element.If you toggle an option, the text changes automatically, in other words, you can use that text field in a form to submit the selection. In such a case you would of course hide the text field first.

    You’re completely free to style your elements. Default setting for the tabs is a span element, but you can change that in the settings (check the plugin source, the default settings are right at the top).

    Read More Demo

    Apple Navigation with CSS3 and jQuery

    May 19, 2012 | CSS2 / CSS3.0, Menus
    Apple Navigation with CSS3 and jQuery

    Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation. It’s a staple of the apple website and today I wanted to take a crack at recreating the Apple navigation using CSS3 techniques.

    I wanted to keep it very light weight and semantic. Using an unordered list is fairly standard for a navigation system and I’m not really breaking new ground here.

    Read More Demo

    Custom HTML5 video player with jQuery and CSS3

    May 19, 2012 | CSS2 / CSS3.0, HTML5, SVG Tutorial, Video & Audio
    Custom HTML5 video player with jQuery and CSS3

    We want to create a video player that looks consistent across browsers. Each browser however provides its own different look and feel for the player, from the minimal approach of Firefox and Chrome, to the more shiny controls of Opera and Safari (see Figure 1 for the controls in each browser). If we want our controls to look the same across all browsers, and integrate with our own design, we’ll have to create our own controls from scratch.

    All media elements in HTML5 support the media elements API, which we can access using JavaScript and use to easily wire up functions such as play, pause, etc. to any buttons we create. Because the native video player plays nicely with other open web technologies, we can create our controls using HTML, CSS, SVG or whatever else we like.

    Read More Demo

    Sprite3D.js : JavaScript library for manipulating CSS 3D transforms

    May 17, 2012 | Animation, Core Java Script, CSS2 / CSS3.0
    Sprite3D.js : JavaScript library for manipulating CSS 3D transforms

    Sprite3D.js makes it easy to manipulate HTML elements through CSS 3D transforms using a ActionScript-like syntax and hierarchy, and a bunch of chainable accessor methods.

    A Sprite3D object is a simple wrapper around a DOM element providing helper functions and properties. You can conveniently use CSS styling to determine the aspect of you element, and CSS transitions to animate your stuff.

    In many cases, 3D transforms are GPU-accelerated, giving you an incredible performance boost.

    Read More Demo

    Presenteer.js : jQuery HTML5 Presentation Tool

    May 14, 2012 | CSS2 / CSS3.0, HTML5, Plugins, Slider
    Presenteer.js : jQuery HTML5 Presentation Tool

    Presenteer.js is a flexible HTML5 presentation tool that uses CSS3 transforms and transitions to make smooth HTML presentations.Works on Chrome, Firefox, Opera, Android, iPhone and IE9.It uses canvas, where canvas is a selector or jQuery element of the canvas on which the presentation is placed. It is this canvas that will be repositioned with CSS3 transform to slide a certain element into view.

    Read More Demo

    How to Create Tabs in HTML Using jQuery

    May 11, 2012 | CSS2 / CSS3.0, Tabs
    How to Create Tabs in HTML Using jQuery

    HTML based tabs are widely used as a part of the modern ux practices as it’s the most convenient way of presenting data and users can easily browse through larger sum of data without leaving the page or waiting for any postbacks.

    Say goodbye to those long pages and implement HTML tabs today to improce your website’s user experience.

    I will be using jQuery to create the HTML Tabs today, don’t worry it won’t be a killer. I’ll guide you through every step and I’m confident that by the time you’re done with this tutorial you’ll agree to the fact how easy it is to create tabs with just a few lines of jQuery’s magical code.

    Read More Demo

    Real Shadow – jQuery Plugin that casts photorealistic shadows

    May 2, 2012 | CSS2 / CSS3.0, Plugins
    Real Shadow - jQuery Plugin that casts photorealistic shadows

    Real Shadow is a simple-yet-effective jQuery plugin for creating realistic shadow effects for any HTML element.

    With a simple function, it works by targeting any number of elements and manipulating the value of box-shadow CSS property for the elements in accordance with the mouse position.So, the shadow’s location and size is determined by the element’s distance to the mouse pointer which ends up in a cool effect.

    Read More Demo

    jQuery Top Black Menu Bar of Google Search with Demo

    April 25, 2012 | CSS2 / CSS3.0, Menus
    jQuery Top Black Menu Bar of Google Search with Demo

    Google has come up with a new look with the launch of Google Plus and one of the prominent changes we can observe is the black menu bar found on the top of Google Search Page and every other Google product like Google Plus(obviously),  Google reader, etc. Almost every Google product by now has been integrated with the top black menu bar.

    I thought it would be a great idea to make a tutorial on how to create this black menu bar using simple jQuery and CSS.

    Some of the features we are going to cover in this tutorial of making Top Menu Bar found in Google products is :

    • Creating the red ribbon like effect for the current page
    • creating the drop down menu when more button is clicked
    • keeping the bar fixed even when the rest of the page is scrolled
    • Styling the elements of the menu exactly to those found on Google
    Read More Demo

    Interactive menu with CSS3 & jQuery

    April 24, 2012 | CSS2 / CSS3.0, Menus
    Interactive menu with CSS3 & jQuery Demo

    In this article you’ll learn how to create an interactive menu using CSS3 goodness and jQuery’s power.The idea behind this example was to have some nicely arranged blocks and once you click on one of them, the block will start showing its hidden content starting at its current position.

    Besides being a menu, this example can also serve as a perfect single page website. For example, just think that a block can be named “Contact” and could contain a nice contact form.

    Read More Demo

    How to Create a Walking Navigation in jQuery with Demo

    April 18, 2012 | CSS2 / CSS3.0, Menus
    How to Create a Walking Navigation in jQuery with Demo

    On a single page website with fixed position navigation, it will be nice to tell user on what section they are reading at. In this tutorial I am going to share how to create a walking navigation, on the other words, auto focus navigation based on user scrolling, by taking advantage of both jQuery and CSS animation.

    Read More Demo