Best jQuery HTML5 Plugins & Tutorials with Demo

Creating a CSS3 Generator with CSS3, HTML5 and jQuery

Creating a CSS3 Generator with CSS3, HTML5 and jQuery

Many of you have probably already seen some of those CSS3 generators that have been poppin’ up? Have you perhaps been wondering how they’re made? Wonder no more, that’s what we’ll be creating today, using CSS3, HTML5 and jQuery.

The CSS3 generator we will be creating is Webkit only, so make sure you open up the demo in a Webkit browser like Safari or Chrome.

BeautyTips a jQuery tooltips plugin

BeautyTips a jQuery tooltips plugin

BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec to dynamically draw tooltips associated with a html element on the page. The thing I like best about BeautyTips is it’s limmitless ways to configure the look and feel and event triggering behavior. For example, with BeautyTips it would be relatively easy to match the tooltips used on popular websites like Netflix, Google Maps, Hulu, or Facebook.

HTML5 Grayscale Image Hover with jQuery

HTML5 Grayscale Image Hover with jQuery

With HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. Use HTML5 & jQuery to dynamically clone color images into grayscale

How to Add Audio and Video on your Website using jPlayer plugin (jQuery)

How to Add Audio and Video on your Website using jPlayer plugin (jQuery)

Today we continue jQuery lessons, and will talk about adding customizable player for audio or video files to our website. This new plugin (jPlayer) pretty well: allow us play media files, pause, change volume, it even have all necessary controls (which you can see in any media player). Also it allow us to change all its styles (all styles of interface loceted in single css file). More, it support HTML5 and able to work quite in all possible browsers. Here are supported formats of media files: mp3, ogg, m4a, m4v, ogv, wav etc.

How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery

In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us.

Create a Posticks (Sticky Notes) app with HTML5, CSS3 and jQuery

While I was on vacation in Dominican Republic, I had some free time to work in a small application that creates Posticks notes, or sticky notes, in the browsers and save it in the localStorage of the browser. If you want to know what I am talking about you can visit the demo.

jQuery File Upload Plugin With Drag ‘n’ Drop Support

jQuery File Upload is a plugin for the popular JavaScript framework that helps handling file uploads.

The plugin is based on open standards like HTML5-JavaScript and doesn’t use Flash. For legacy browsers it falls back to an Ajaxed-like iframe-PHP solution.

Shutter Effect Portfolio with jQuery and Canvas

In today’s tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.

Subway Map Visualization jQuery Plugin

This plugin renders unordered lists into a subway map similar in style to the London Underground map. It emphasizes a clean, aesthetic look with curves and proper placement of markers for stations and interchanges. Without any illustration tools, you can quickly go from HTML markup to a complete map visualization of information in a short amount of time. The rendering uses the HTML5 element and works with any browser that supports this element.

OIPlayer jQuery plugin

OIPlayer jQuery plugin

OIPlayer inits and controls the video- or audioplayer made by modern browsers with the html5 video- or audiotag. It was developed for the Open Images Platform. It features a fallback mechanism and enables the use of three players in a generic way. It sifts through the sources inside the media tag to find a suitable player, replaces the mediatag with itself and enables some generic controls. Is supports the html5 media-tag itself, the Java applet Cortado for the ogg media format (ogv, oga) for browsers that have Java but don’t support the html5 media-tags and a Flash player, in this case FlowPlayer for (mp4, h.264, flv).