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

    imJQMosaic : jQuery plugin creates Mosaic pattern using an image

    July 22, 2012 | CSS2 / CSS3.0, HTML5, Image Effects, Plugins
    imJQMosaic : jQuery plugin creates mosaic pattern using an image

    imJQMosaic is a simple jQuery plugin that creates mosaic pattern using an image.

    This is a pure JavaScript based jQuery plugin. Apart of just creating the mosaic pattern on an image, it also facilitates the user to put menus on top of the mosaic tile(s). Hence, it can be beautifully used as navigation menu. It can also serve as a substitute to the popular Flash based navigations on the home pages of a website or application which unfortunately don’t work on mobile phones not supporting Flash content.

    This plugin is based on the technique of CSS sprites and also uses some of the new features introduced in CSS3. The plugin requires latest browsers that support HTML5 and CSS3. In absence of adequate browser, the plugin gracefully degrades and still works! Ideal behavior of this plugin can be viewed in Safari 4 or Firefox 3.5. But it works with Chrome and IE 8 also.

    Read More Demo

    3D Flipping Circle with CSS3 and jQuery

    July 21, 2012 | Animation, CSS2 / CSS3.0, Gallery
    3D Flipping Circle with CSS3 and jQuery

    In this tutorial we will create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.

    Today I would like to show you how to create a little component with a realistic touch. The idea is based on the sweet paper effect found in the video of the Google Developer Stories. Maybe you have created these kind of paper effects when you were a kid; basically something opens or rotates when pulling or pushing some handle.

    We’ll create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.

    Read More Demo

    iosSlider – Touch Enabled jQuery Horizontal Slider Plugin

    July 20, 2012 | CSS2 / CSS3.0, Plugins, Responsive, Slider
    iosSlider – Touch Enabled jQuery Horizontal Slider Plugin

    iosSlider is a jQuery plugin which allows you to integrate a customizable, cross-browser content slider into your web presence. Designed for use as a content slider, carousel, scrolling website banner, or image gallery.

    Features :

    • Hardware accelerated : using CSS3 for supported iOS, Android and WebKit browsers.
    • Responsive support : to work with the most dynamic desktop and mobile sites.
    • Tons of API callbacks : Tons of API callbacks.
    • Auto-sliding : Set your slider to automatically transition and pause on hover.
    • FF/Safari/Chrome/IE7+ : Full modern browser support for desktop.

     

    Read More Demo

    Portfolio Flipping Slider Using jQuery & CSS3

    July 19, 2012 | Animation, CSS2 / CSS3.0, Slider
    Portfolio Flipping Slider Using jQuery & CSS3

    There are many ways on displaying our portfolio, one of them is using grid style with slider effect for pagination. In this tutorial I’m going to share about how to displaying our portfolio grid with flipping slider effect for pagination using jQuery & CSS3 Transform.

    The slider will change our portfolio images when it’s flipping, this flipping effect is triggered by user click on the pagination. So when user click a page each of our portfolio images will flipping 360 degree and when its animation near end the image will changed with new image.

    We will create four flipping effects that will be used for animation, there are : horizontal left direction, horizontal right direction, vertical top direction and vertical bottom direction. These effects will be randomly choosen when displaying the image.

    Read More Demo

    jQuery Sort and Order Portfolio Plugin

    July 18, 2012 | Animation, CSS2 / CSS3.0, Plugins, Premium
    jQuery Sort and Order Portfolio Plugin

    jQuery Sort and Order Portfolio Plugin has a following features :

    • Extendable filter and order buttons.
    • Customize CSS3 driven animation, graceful degradation.
    • About 30 kinds animation transition style, different in easeIn and easeOut.
    • Optional reverse order, you can set the order button support it or not.
    Read More Demo

    Building Persistent Sticky Notes with Local Storage in jQuery

    July 18, 2012 | CSS2 / CSS3.0, HTML5, jSON, Web
    Building Persistent Sticky Notes with Local Storage in jQuery

    HTML5 local storage is like cookies on steroids; it’s incredibly simple to use and yet still so powerful. In this tutorial, I’ll show you how to create “sticky notes” functionality, that allows your users to take persistent notes while browsing your site with jQuery.

    Read More Demo

    jQuery/CSS Vertical Admin Navigation

    July 16, 2012 | CSS2 / CSS3.0, Menus, Premium
    jQuery/CSS Vertical Admin Navigation

    Ultra modern and stylish vertical navigation using css and jQuery which would be ideal for your next admin panel and would looks great in an iPad application.

    The navigation uses a jQuery flyout menu to display child items with a cool looking apple-styled textured background.This vertical navigation menu comes in a choice of four colour including lime, blue, pink and orange.

    Read More Demo

    Content Timeline – jQuery/HTML5/CSS3 plugin

    July 13, 2012 | CSS2 / CSS3.0, HTML5, Premium, Slider
    Content Timeline - jQuery/HTML5/CSS3 plugin

    Content timeline is powerful and lightweight jQuery/HTML5/CSS3 plugin, best for displaying date organized content. It is fully customizable, and easily implementable with any js script, video, flesh etc. Well structured code, and wide ranged API functions make it simple to get started and flexible for customization.

    Features:

    • 11 settings for customizing
    • Keyboard binded
    • 5 class events
    • Included easing effects
    • 7 embedded script control methods
    • Intuitive design
    • Fully flexible
    • Fully interactive timeline
    Read More Demo

    BetweenJS API : JS tweening engine

    July 12, 2012 | Animation, Core Java Script, CSS2 / CSS3.0
    BetweenJS API : JS tweening engine

    BetweenJS is Tweening Engine for JS.Highly inspired from BetweenAS3.Creates a Tween and apply it with an immediate effect, accurate for setting desired values in the time-range of the tween.Different type of tweens available are  regular tween, bezier tween,  time-unrelated tween,  Physical tween,  Reversed tween,  repeatable tween,  delayed tween, sliced tween,  time-streched tween, ActionTween.

    Read More Demo

    Image Tagging Tutorial Using jQuery and CSS

    July 10, 2012 | CSS2 / CSS3.0, Web
    Image Tagging Tutorial Using jQuery and CSS

    There is a popular saying that a picture is worth a thousand words. Images are a great way of catching our attention instantly. But sometimes its necessary to tag or link specific parts of images to provide information. Popular social media giants like Facebook and Google Plus use image tagging to identify the people and places in images.

    In this tutorial I am going to show you how to create a simple image tagging system using jQuery and CSS.

    Read More Demo