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

    Slimmage : Sane & Simple Responsive Images

    July 10, 2013 | Core Java Script, CSS2 / CSS3.0, Image Effects
    Slimmage : Sane & Simple Responsive Images

    Your wait for a sane, easily managed path to responsive images has now ended.With Slimmage, CSS controls which image size is downloaded, not HTML

    Features:

    • Media queries, breakpoints, nested percentages, & max-width work as expected.
    • Works on > 99% of browsers. 3KB minified vanilla js, 1.5KB compressed.
    • Cookie-free; works on first page load. Works with CDNs.
    • Fully accessible; degrades gracefully without javascript
    • Massive bandwidth reduction. No duplicate requests. Can auto-enable WebP and adjust compression based on pixel density
    • Works with any RIAPI-compliant backend. ImageResizer is preferred.
    Read More Demo

    Vertical Responsive Navigation with jQuery & CSS3

    July 8, 2013 | CSS2 / CSS3.0, Menus, Premium, Responsive
    Vertical Responsive Navigation with jQuery & CSS3

    Vertical Responsive Navigation is a navigation component based in CSS and Javascript code. It’s responsive navigation, collapsible on mobile devices, has two themes and 12 preset colors.

    Features:

    • Light and Dark themes
    • 12 preset colors
    • Responsive
    • Collapsible
    • Major Browsers Compatible
    • 361 icons available
    Read More Demo

    Scroll Activated Fixed Header Animations with jQuery & CSS3

    July 7, 2013 | Animation, CSS2 / CSS3.0, Menus
    Scroll Activated Fixed Header Animations with jQuery & CSS3

    It’s become somewhat of a trend in web design to have a header that attaches to the top of the page as the user scrolls in order to provide the user with navigation or something along those lines. When the header attaches to the screen, we can use this point to create some pretty cool effects. In this tutorial we’re going to be looking at animations that activate as the user scrolls down.

    Read More Demo

    Create a Minimal Coming Soon Page using HTML5 and CSS3

    July 6, 2013 | CSS2 / CSS3.0, HTML5, Plugins, Web
    Create a Minimal Coming Soon Page using HTML5 and CSS3

    In this tutorial we are going to create a Coming Soon page using HTML5 and CSS3 with a minimalist style and light colors. We will use the minimal Coming Soon page designed in Photoshop by Stelian a few days ago. For the countdown timer we will use jQuery and the jQuery countdown plugin from tutorialzine.com. Of course we will customize it a bit to match our design.

    Read More Demo

    Flippant.js : JavaScript & CSS3 library for flipping things over

    July 4, 2013 | Animation, Core Java Script, CSS2 / CSS3.0, Popup Window
    Flippant.js : JavaScript & CSS3 library for flipping things over

    Flippant.js is a mini javascript and CSS3 library that lets you flip things over. It has zero dependencies, is easily customized, and exports a single function: flip.

    Read More Demo

    Loading Effects for Grid Items with CSS Animations & JavaScript

    July 3, 2013 | Animation, Core Java Script, CSS2 / CSS3.0, Responsive
    Loading Effects for Grid Items with CSS Animations & JavaScript

    Today we’d like to share some loading effects for grid items with you. The idea is to show items in a grid with an animation once they are in the viewport. The possibilities are infinite and we’d like to give you some inspiration. Some of the effects are from the awesome CSS3 scroll effects by Hakim El Hattab and the idea is inspired by the tile animation seen in the Google Plus app.

    Since Masonry is a popular library for laying out grids, we thought it might be a good idea to use it in this demo. If you’d like to use something else or no library at all, you’ll have to remove the initialization from the script and adjust the selectors etc. That should be pretty straightforward.

    Read More Demo

    Blueprint : Responsive Icon Grid with CSS3

    July 2, 2013 | Animation, CSS2 / CSS3.0, Responsive
    Blueprint : Responsive Icon Grid with CSS3

    A responsive grid of anchors with icons, text and some example hover transitions.A grid of icons and text that adjusts its number of columns depending on the screen size as shown in some media queries. Some example effects are used for animating the elements on hover.

    Read More Demo

    Blueprint : View Mode Switch with CSS3 & JavaScript

    July 2, 2013 | Core Java Script, CSS2 / CSS3.0, Layout, Responsive
    Blueprint : View Mode Switch with CSS3 & JavaScript

    A layout switch with two viewing modes: grid and list. The layout is defined by a view class that gets applied to the main wrapper. Some example media queries show how to make things responsive.

    Read More Demo

    Shuffle : jQuery Categorize, sort, and filter a responsive grid of items

    July 1, 2013 | Animation, CSS2 / CSS3.0, Gallery, Plugins
    Shuffle : jQuery Categorize, sort, and filter a responsive grid of items

    jQuery Shuffle Plugin categorize, sort, and filter a responsive grid of items.

    Features:

    • Uses CSS Transitions!
    • Responsive
    • Filter items by groups
    • Items can have multiple groups
    • Sort elements
    • Advanced filtering method (like searching)
    Read More Demo

    Dasky : jQuery Timeline Slider

    June 30, 2013 | CSS2 / CSS3.0, Plugins, Premium, Responsive, Slider
    Dasky : jQuery Timeline Slider

    Dasky is a jQuery timeline slider,you can use it to show you products’s chagelog/loadmark, or loadmark of you team/life. And others what you want. It based on the power of css transforms and will fallback in old browsers who do not support it.

    Features:

    • Fluid layout
    • Fullscreen or not
    • Auto play
    • Mousewheel control
    • Keybords control
    • Major browsers compatible and fallback to old browsers
    Read More Demo