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

    jQuery Fly Side Menu

    jQuery Fly Side Menu

    Fly Side Menu is a script that will recreate the impressive animation you see on Airbnb’s new iOS7 app using jQuery and CSS3. In additional to that, I’ve also added a few more options for you guys to play around with.

    Responsive CSS3 Data Grids

    Responsive CSS3 Data Grids

    Responsive CSS3 Data Grids are used to present typical tabular data. Their advantages over the standard table are expandable rows in a form of drop down accordion sections, ability to highlight individual rows, hover states, table cell and headings tooltips. In addition the table is fully responsive and adapts well to the resolution of different mobile devices like iPad or iPhone by grouping the data into rows. Additional drop down panel allows to show / hide selected columns for easier data comparison.

    Features:

    • Pure CSS3 + HTML,
    • Responsive Layout,
    • IE8 JS Fallback,
    • Expandable Rows,
    • Ability To Expand Multiple Rows At Once,
    • Ability To Expand Only One Row At Once,
    • Ability To Expand Selected Rows By Default At Startup,
    • Ability to Highlight Single Table Row,
    • Hover States,
    • Columns Filtering,
    • CSS3 Tooltips,
    • 4 Predefined Color Skins

    Image Caption Hover Animation with CSS3 Transitions & Transforms

    Image Caption Hover Animation with CSS3 Transitions & Transforms

    This is an example of caption animation while hovering on images, using CSS3 transitions and transform rules. There is no Javascript used so it will work on modern browsers where CSS3 animations are supported. Please check the sourcecode of demo page to understand how the animation is working.

    Wonderful CSS3 Flat Menu

    Wonderful CSS3 Flat Menu
    • Pure CSS3
    • Full responsive
    • Clean flat design
    • Multilevel dropdown menu
    • 17 Preset color schemes
    • Multi-column content
    • Left or right item alignment
    • Fullwidth dropdown
    • Font Awesome icons
    • Well documented

    Loading Animation using CSS3 Keyframe Animation

    Loading Animation using CSS3 Keyframe Animation

    CSS3 Keyframes are great for creating anything from complex, multi-step animations to simple looping animations. Loading animations are a necessity for demonstrating to the user that they need to wait while also being easy on the eyes. A cool loading animation could keep a user interested. This loading animation is inspired by the Xbox loading animation.

    CSS3 Animated Opening Type

    CSS3 Animated Opening Type

    A tutorial on how to create an interesting animated 3D opening type effect with pseudo-elements, CSS transforms and transitions. The idea is based on Edenspiekermann’s Open Type project and it’s a very creative way to display and play with letters.

    Background Cover : CSS3 BackgroundSize Cover Polyfill in jQuery

    Background Cover : CSS3 BackgroundSize Cover Polyfill in jQuery

    Simple Polyfill for CSS3 backgroundSize: cover in jQuery.backgroundcover will not test your browser’s capability for backgroundSize:cover`, hence it is recommended to use a library like Modernizr.

    Smoothbox : A simple, lightweight, and responsive jQuery lightbox

    Smoothbox : A simple, lightweight, and responsive jQuery lightbox

    A lightweight, responsive, & simple jQuery lightbox alternative.

    Features:

    • Lightweight [1.7Kb]
    • Preloads images
    • Built in gallery for multiple items
    • CSS3 transitions for smoother effects
    • Responsive image sizes

    Slideme! : A powerful jQuery slideshow

    Slideme! : A powerful jQuery slideshow

    A responsive, css3, compatible (works fine even with IE7), customizable, easy to install (and use), multi-instance, fullscreen, cool, powerful slideshow plug-in for jQuery.Slideme is a fully customisable slideshow, with many different kinds of transition effects, paginations and callbacks.