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

    jQuery Multi Purpose Media Boxes – Responsive Grid

    September 27, 2013 | CSS2 / CSS3.0, Gallery, Plugins, Premium, Responsive
    jQuery Multi Purpose Media Boxes - Responsive Grid

    This is a HTML | CSS | JQuery Fully Responsive Portfolio in a pinterest style with a lightbox. It will adapt to the width of its container so you can put it anywhere and you can put anything inside the boxes. Also you don’t have to load all the images at once (for performance purposes) so you can specify the number of images to load when it first load and the number of images to load when you click the “load more images” button.
    The navigation filter bar is generated automatically from the categories you specify to each image.

    Features:

    • Fully responsive grid and lightbox
    • Lazy Load Feature
    • The Lightbox Support images and iframes of any dimensions and it will keep the right proportions
    • The filter navigation bar is generated automatically from the categories you specify to each thumbnail
    • Set the number of images to load at start and when you click the “load more images” button
    • Support thumbnails for the grid only to the images you want to improve performance
    • Fully Responsive Grid and Lightbox
    • Full width, the grid will adapt to the 100% of its container if you set the width of each column to ‘auto’
    • You can specify a static width for each column or specify number of columns
    • When specifying the number of columns you can set the minimum width for each column
    • CSS3 Effects
    • Direction aware hover effect
    • Lightbox with slideshow (play, pause, auto-play)
    • Easy implementation
    • Compatible with Twitter Bootstrap
    Read More Demo

    Create a Pentagon Hover Effect with CSS3 and jQuery

    September 27, 2013 | Animation, CSS2 / CSS3.0
    Create a Pentagon Hover Effect with CSS3 and jQuery

    This is a new series that will focus on cool web elements on the web. My goal is to try and replicate these sleek elements using a combination of HTML, Javascript and CSS3 and hopefully teach something along the way. It’s a portfolio site that implements a cool pentagon hover effect for displaying his work. It smoothly meshes together a rotate effect with a slight nudge right to the image along with a colorization of the image. Note: This is using CSS3 Transitions which is still not completely standard and browser compatibility may be limited.

     

    Read More Demo

    Gridforms : Data entry can be beautiful with jQuery & CSS

    September 26, 2013 | CSS2 / CSS3.0, Forms, Responsive
    Gridforms : Data entry can be beautiful

    Grid forms are dense forms designed for use in applications that require lots of data to be entered regularly. A tiny Javascript/CSS framework that helps you make forms on grids with ease.

    An effort to make beautiful forms for web applications that make data entry less painful. Grid forms is a front-end library (Just CSS at the moment) which handles the boiler plate necessary to build grid based forms.

    Read More Demo

    Fancy Timeline Transition with CSS3

    September 24, 2013 | Animation, CSS2 / CSS3.0
    Fancy Timeline Transition with CSS3

    This is a port of the Google+ iPad app timeline purely done with CSS3.

    Read More Demo

    Regal Media Gallery with jQuery & CSS3

    September 23, 2013 | CSS2 / CSS3.0, Gallery, Plugins, Premium
    Regal Media Gallery with jQuery & CSS3

    A complete media gallery, with both, images and video. It obtains automatically the image thumbnail for videos, has a nice metro taste user interface. 2 categories levels for organize images and video, 2 views types, mosaic and column view. Include CSS3 animations, drag and drop functionality, theme picker, zoom and has a responsive design.

    Read More Demo

    Creative Loading Effects with CSS3 & JavaScript

    September 19, 2013 | Animation, Core Java Script, CSS2 / CSS3.0
    Creative Loading Effects with CSS3 & JavaScript

    Today we’d like to show you some ideas for creative loading effects. Nowadays, many different page loading animations are used in websites; just think of the subtle red loading bar seen on YouTube. When loading something on a page, be it images or the next content, we don’t have to be restricted to a tiny loading indicator but we can get creative and big. So the idea is to indicate that something is happening in a stylish way without creating too much distraction for the user. There might be actions where this might not be adequate, but in some situations it might be quite fitting and amplifying for the overall design.

    Read More Demo

    CodingJack’s jQuery Percentage Preloader

    September 18, 2013 | Animation, CSS2 / CSS3.0, Plugins, Premium
    CodingJack's jQuery Percentage Preloader

    In the days of Flash we had lots of beautiful percentage-based preloaders. But when websites starting switching over to HTML/CSS/JavaScript, they’ve become almost extinct. Percentage Preloader isn’t ground-breaking technology. Instead, it’s a a clever script that when used correctly, is a fresh alternative to the typical infinite-based preloaders we’re so used to seeing these days. Percentage Preloader is what developers typically call a “bulk loader”. If you only have a one or two assets you need to preload, Percentage Preloader is not for you. But when used with a large number of assets (5+), Percentage Preloader works great at creating the illusion of progress.

    Features:

    • Dark and Light Color Schemes
    • 8 Pre-Built Preloaders
    • Designed with CSS making them easy to edit and retina-ready.
    • Preload all the images and iframes on your web page by adding a simple data-attribute to your images.
    Read More Demo

    Facebook Style Profile Info Tooltip using jQuery & CSS

    September 17, 2013 | CSS2 / CSS3.0, Web
    Facebook Style Profile Info Tooltip using jQuery & CSS

    Here I had explained a very basic version of facebook profile tooltip with all features they have asked.You can learn how to design a facebook style profile tooltip with cover page,profile picture, name, headline, add as friend & send message button..

    You can use this script in your web & social networking projects with little customization.

    Read More Demo

    Animated Buttons using jQuery & CSS3 Transitions and Transforms

    September 16, 2013 | Animation, CSS2 / CSS3.0
    Animated Buttons using jQuery & CSS3 Transitions and Transforms

    As CSS3 is gradually more supported over popular browsers, CSS3 Buttons become great looking replacements for image and script heavy buttons. These buttons use CSS3 transitions and transforms to animate morphing icons to represent different functions. This is a simple demonstration of 5 buttons representing functions like Demo, Download, Digg, Email, and RSS. I may make more if the response is very positive about these buttons.

    Read More Demo

    Form Character Limit Animation using jQuery and CSS

    September 14, 2013 | CSS2 / CSS3.0, Forms
    Form Character Limit Animation using jQuery and CSS

    I was recently playing around with form validation and using css to animate cool things, but then I stumbled across character limit. You can easily use jQuery to access parameters like an input field’s character limit and current character limit. So I tried creating a simple animation that showed as you were typing in a field how many characters you had left. I opted for a simple design where there is just a grey bar underneath the input field and it fills up as you type in characters and changes colors as you get closer to the limit.

    Read More Demo