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

    An HTML5 Slideshow w/ Canvas & jQuery

    An HTML5 Slideshow w/ Canvas & jQuery

    You’ve probably heard a lot about the new HTML5 canvas element. As the name implies, this is a special element that allows us to create and modify graphics. In addition, we can also use it like any other element on the page – apply jQuery animations on it, listen for events and integrate it deeply into our layouts.

    All uses of canvas you’ve come so far are probably limited to games and other proof of concept demos. Today, however, we are doing something practical – we are making a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.

    With JavaScript, we are going to apply a special filter to every image in the slideshow. We will create a new version of the images, with higher contrast and more vivid colors, and store it in a canvas elements.

    Coding a Guided Registration Form with jQuery

    Coding a Guided Registration Form with jQuery

    Techniques for building a usable registration form can be a major factor towards bringing in new users. When you’ve got an overly complicated form it can scare away so many first time visitors. But a great technique for keeping these people around is coding form hints into the layout.

    In this tutorial I want to demonstrate how we can build such an interface with CSS3 and jQuery. We can embed hidden form tips which only display when the user has focused on a particular field. These hints can be used to denote syntax, such as the required length of usernames or passwords. But it’s a great usability tactic which livens.

    cssFx : Inserts vendor prefixes for CSS3 properties

    CssFx : Insert verdor prefixes for css3 properties

    cssFx is a standalone polyfill that inserts the vendor-specific CSS3 properties necessary for old and new browsers. This saves you tons of time, maintenance, and bandwidth!

    Supported features :

    Box shadows, border radius, multiple columns, border image, RGBA, transforms, keyframes, transitions (and properties inside transitions), flexible box, gradients, and a ton of other useful things (like opacity, ellipsis, and inline-block).

    Magnifying glass for image zoom using jQuery and CSS3

    Magnifying glass for image zoom using jQuery and CSS3

    Learn to make a realistic magnifying glass using Jquery and CSS3. Hover above the image to see the action.

    The code uses CSS3 box-shadow and border-radius properties to create the magnifying glass. Jquery is used to position it at the cursor coordinates and change the background position accordingly.

    Moving the cursor away from the image gently fades out the magnifying glass bringing the image back to the default state.

    How to grab Dribbble feed with jQuery and CSS3

    How to grab Dribbble feed with jQuery and CSS3

    As a web developer, third party API integration is something you will have to face. Especially with the current trend, we have facebook, twitter, flickr etc. Today, we are going to look at dribbble’s API. Dribbble is a place to show off your design, it’s based on invitation basis, therefore, most designs are of high quality.Dribbble API documentation is pretty neat and straight forward, it’s still in Beta stage at the moment, but it’s pretty stable and easy to use.

    However, we will not retrieve it directly from Javascript, we call it using PHP to solve AJAX cross domain issue. I wrote a simple PHP proxy to retrieve the JSON data from dribbble. It’s not the best PHP script (it’s very rough!), but it will do the job just fine. You can enhance the PHP from here such as adding cache control to reduce number of call to dribbble, and perhaps, make it a little bit more secure.

    Pull Off Awesome Scroll Effects With Stroll.js

    Pull Off Awesome Scroll Effects With Stroll.js

    Stroll.js is a super easy to implement library that makes applying mind-boggling scroll effects a breeze. All you have to do is paste in a couple of brief lines of JavaScript, the rest is all handled with HTML and CSS. Keep reading and I’ll show you how it works.

    Stroll.js is a neat little JavaScript library that brings a bunch of eye-catching animations to the scroll action on list items. The idea is that you have a group of items in a scrollable list and you use Stroll.js to make browsing that list more interesting.

    CSS 3D Image Gallery with JavaScript

    CSS 3D Image Gallery with JavaScript

    In this experiment we will create a little gallery using CSS 3D transforms and an advanced javascript with jQuery framework.

    Swatch Book with CSS3 and jQuery

    Swatch Book with CSS3 and jQuery

    A tutorial about how to create a swatch book like component that let’s you open and rotate the single swatches revealing some details. We will be using CSS transforms and transitions and create a simple jQuery plugin.

    Today’s tutorial is about creating an animated swatch book using CSS rotation transforms and JavaScript. The idea is to show a swatch book like structure and make the single swatches or “sheets” clickable. When clicking on a swatch, we’ll rotate the other swatches in order to reveal the selected one.

    Notification bubble with CSS3 keyframe animation & jQuery

    Notification bubble with CSS3 keyframe animation & jQuery

    I had to emphasize somehow a dynamic notification bubble. Basically, every time the notification value changes, a visual effect was needed in order to get user’s attention. So I made that using CSS3 keyframe animation.I think this is a simple and practical example on how to use a CSS3 animation to enhance user experience. Further, you can experiment with the bezier curve values and come up with some other cool effects.

    Horizontal bar graph with CSS3 and jQuery

    Horizontal bar graph with CSS3 and jQuery

    Today we’ll create an animated, horizontal bar graph using jQuery, CSS3 properties (such as: gradients, border-radius, rgba) and CSS3 transitions.