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

    Droptiles : Metro style dashboard in jQuery, HTML5 & CSS3

    January 10, 2013 | CSS2 / CSS3.0, Drag & Drop, HTML5, Layout, Plugins, Responsive
    Droptiles : Metro style dashboard in jQuery, HTML5 & CSS3

    Droptiles is an Open Source Windows 8 Start like Metro style Web 2.0 Dashboard. It builds the experience using Tiles. Tiles are mini apps that can fetch data from external sources. Clicking on a tile launches the full app. Apps can be from any existing website to customized website specifically built to fit the Dashboard experience. Droptiles is built almost entirely of HTML, Javascript and CSS and thus highly portable to any platform.But with very little change you can port it to PHP, Ruby, JSP or any other platform.

    Features:

    • Metro style user interface. CSS framework to build metro style websites, inspired by metroui.org.ua.
    • Drag & Drop tiles to personalize the experience.
    • Live tiles: Tiles are mini-apps, loading data from variety of sources.
    • Quick and easy App framework. Try the Flickr and News Reader app.
    • Client side object model and data binding for easy MVVM implementation.
    • Server side platform neutral implementation. Can be ported to PHP, JSP easily.
    Read More Demo

    3D Book Showcase with jQuery & CSS3

    January 10, 2013 | CSS2 / CSS3.0, Plugins
    3D Book Showcase with jQuery & CSS3

    Today we want to share an experimental book showcase concept with you. The idea is to make books look more realistic by using 3D transforms and apply some fun effects to them, like rotating, flipping and opening. This might be an interesting concept for online book stores as it adds some interactivity the user might find entertaining. The idea is taken from Lift Interactive (scroll down to see the book style).

    Read More Demo

    Vague.js : jQuery Blur any kind of Html Element

    January 10, 2013 | CSS2 / CSS3.0, Image Effects, Plugins, SVG Tutorial, Web
    Vague.js : jQuery Blur any kind of Html Element

    Vague.js is an experimental script that allows you to blur any kind of html element thanks to the SVG filters. This script is crossbrowser and it was tested on:

    • Firefox 10 +
    • Chrome 18 +
    • Safari 6.0 +
    • IE 7 +
    Read More Demo

    MelonHTML5 : Royal Preloader with jQuery

    January 9, 2013 | Animation, CSS2 / CSS3.0, HTML5, Plugins, Premium
    MelonHTML5 : Royal Preloader with jQuery

    Royal Preloader allows you to easily setup website images preloading in a loading screen and display the entire website instantly when it finishes. It comes with 8 pre-designed loaders and is super easy to install. All web browsers and mobile devices are fully supported. And all options can be customized via API.

    Features:

    • Preloading Website Images
    • 8 Pre-Designed Loaders
    • Display Loading Details
    • Fully Customizable
    • Easy to Install
    • CSS3 animations + Fallback for IE
    • Mobile Device Support
    Read More Demo

    Liquid Slider : jQuery Html5 Responsive Content Slider

    January 7, 2013 | CSS2 / CSS3.0, HTML5, Slider, Tabs
    Liquid Slider : jQuery Html5 Responsive Content Slider

    The Liquid Slider is a fully responsive, html5 content slider, which means it will work on your desktop as well as your mobile device. It’s fully adaptable to changing widths and orientation, so ahead and resize your browser to see it in action.

    Read More Demo

    Creating a CSS3 Responsive Menu with jQuery

    January 5, 2013 | CSS2 / CSS3.0, Menus, Responsive
    Creating a CSS3 Responsive Menu with jQuery

    This tutorial aims to provide step by step instructions to enable you to create a responsive navigation menu that adapts to varying screen sizes, with the help of CSS media queries.

    I adopted the Mobile First approach to designing the menu. In essence, this approach adopts a strategy of designing for mobile devices first, then working your way up to larger ones, such as desktop monitors. The base design is developed for the popular dimensions of mobile devices – 320 x 480. I then utilised media queries, primarily for scaling up to larger screen sizes, but also as an effective tool for enhancing the design.

    Read More Demo

    Etalage : jQuery Image Zooming plugin

    January 4, 2013 | CSS2 / CSS3.0, Image Effects, Plugins, Premium, Zoom
    Etalage : jQuery Image Zooming plugin

    A ready to use jQuery image zooming plugin to present your images in the highest detail without leaving the page.Simply link to the JavaScript and CSS files and apply it to your HTML element like other jQuery plugins. Customize the settings and CSS to match your style and purpose.

    Features:

    • Customizable by CSS and plugin options
    • Precise positioning of all elements based on your image dimensions and CSS
    • The small thumbnails are automatically generated, sized and positioned
    • Low resolution preview (enlarged thumbnail) while downloading the zoomed image (except in IE)
    • Optional easing of the zoomed image movements
    • Optional autoplay
    • Optional descriptions/captions
    • Unlimited number of images
    • Align Etalage left/right, with the zoom area on the opposite side
    • Small thumbnails can be positioned below or on the left/right (vertically)
    • Multiple instances per page possible
    • Right-to-left language support
    • Optional external controls for previous/next/specific image
    • Advanced: customizable callback functions
    • Works in all common browsers (and IE6 )
    • Includes an “absolute basic” and 6 more example files to get you started
    Read More Demo

    Create a Simple Multi-Item Slider in jQuery & CSS3

    January 3, 2013 | Animation, CSS2 / CSS3.0, Slider
    Create a Simple Multi-Item Slider in jQuery & CSS3

    In today’s tutorial we want to show you how to create a simple item slider with CSS animations and some jQuery. The idea was inspired by the Aplle product slider where several little items fly in with a bouncing animation. We wanted to translate this concept to a modern-looking alternative for a minimal online store design where the items represent different categories. Categories as use-case fit quite well because of the limited nature of this type of slider. For more items to be shown, this is certainly a far-from-optimal solution. If the amount of items is limited this might give an interesting little touch to the experience.

    Read More Demo

    jQuery powered HTML5 navigation menu

    January 3, 2013 | CSS2 / CSS3.0, HTML5, Menus
    jQuery powered HTML5 navigation menu

    This is a simple HTML5 and jQuery powered navigation menu. It uses some simple CSS3 for some minor presentational enchancement (like border-radius and text-shadow).

    The purpose behind it’s creation was to provide a semantic and easily implemented way of creating simple good-looking site navigation. In that spirit, it’s usage is incredibly simple.

    Read More Demo