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

    Accordion Slider – Responsive jQuery WordPress plugin

    Accordion Slider - Responsive jQuery WordPress plugin

    Accordion Slider is a fully responsive and touch-enabled WordPress plugin that combines the functionality of an accordion with that of a slider.

    • Fully Responsive – automatic or custom responsiveness.
    • Touch-enabled – touch-swipe and tap on mobile screens, mouse drag on desktops.
    • Dynamic Content – load images and content from posts, galleries and Flickr.
    • Automatic Updates -update the accordion directly from the Dashboard.
    • Pagination -add as many panels as you want without worrying about screen space.
    • Smooth animations – uses CSS3 transitions and RequestAnimationFrame.
    • Retina-ready – specify a retina version for each image.

    Minimal Form Interface with CSS3

    Minimal Form Interface with CSS3

    A very simplistic form interface that shows only one text input at a time and reveals the next input with a subtle transition. The concept is based on the form at the bottom of the PageLanes website.

    Today we’d like share a very simplistic form interface with you. You’ve probably seen this kind of single input view form in several modern websites. We spotted one in the end of the PageLanes website and thought that this is a really nice and user-friendly concept for a form.

    Fluid Menu to Overlay Content CSS3 Animations

    Fluid Menu to Overlay Content CSS3 Animations

    I would like to share with you a personal experience I had while trying to build advanced visual animations with CSS keyframes. The topic we’re going to address is animating several HTML elements simultaneously and taking advantage of keyframe flexibility. To explain this subject, we will create a simple fluid menu based on four squares. Clicking on one of them will display an overlay showing related content, closing the overlay will reverse the process showing the default menu. All delays will be managed directly with CSS — no javascript timeout() here.

    jQuery Responsive Tabs Plugin

    jQuery Responsive Tabs Plugin

    Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.

    Features:

    • Tabs transform to accordion based on breakpoint
    • Uses javascript / jQuery for the technical tab switching (class based)
    • Uses CSS for the desktop/tablet/mobile view
    • Has callback events for the tab events
    • Tabs can be opened with URL hashes
    • Tabs can auto rotate
    • Tabs can be collapsed (optional)
    • Tabs can start collapsed based on the view (optional)
    • Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)
    • Multiple device support (Web, Tablet, Mobile, etc)

    CSS3 3D Grid Effect

    CSS3 3D Grid Effect

    Today we’d like to share a little animation concept with you. It’s the recreation of an effect we spotted in this fantastic prototype app by Marcus Eckert. The idea is to rotate a grid item in 3D, expand it into fullscreen and reveal some content. For our attempt to imitate the app behavior, we created two demos. In the first one we rotate the grid item vertically and in the second one horizontally.

    Smart Forms with jQuery Html5 & CSS3

    Smart Forms with jQuery Html5 & CSS3

    Smart Forms is a responsive professional Form Framework / pack with a clean consistent Form UI. The framework includes a variety of form Widgets such as Datepickers, Timepickers, Monthpickers, Colorpickers, Numeric Steppers, UI Sliders, Google maps, toggle switches validation, masking among other features.

    Features:

    • Multiple form inputs
    • File inputs / uploaders
    • CSS3 checkboxes + Radios
    • CSS3 toggle switches
    • CSS3 review & rating
    • Tooltips + vector icons
    • Notification alerts
    • CSS3 multi shape buttons
    • Animated progress bars
    • Simple pricing tables
    • Ajax form processing
    • Input masking
    • PHP CAPTCHA with refresh support
    • 40+ starter templates included
    • Date & time picker widgets

    bootFolio – jQuery Most Lightweight Portfolio Filtering

    bootFolio - jQuery Most Lightweight Portfolio Filtering

    bootFolio is the most lightweight (1.59KB) portfolio filtering jQuery script with css3 animation. it is highly optimize for bootstrap, and very easy to use.

    Features:

    • World most lightweight script for portfolio filtering (1.59KB)
    • Pure CSS3 transition, transform and animation
    • PrettyPhoto integrations
    • Very easy to use
    • Highly optimize for/with Bootstrap
    • Responsive/fluid/elastic supported

    jQuery Animations : CSS3 animation framework

    jQuery Animations : CSS3 animation framework

    A CSS3 animation framework based on jQuery providing an easy way to develop cross browser CSS3 animations.

    For the user, it could be easy to use jQuery method to perform and combine the animations.

    Responsive Full Width Tabs with CSS & JavaScript

    Responsive Full Width Tabs with CSS & JavaScript

    A full width tab component with some example media queries for adjusting the icons of the tabs and the content layout. The main idea is to show only icons for the mobile view and allow the text to appear when there’s enough space. The content columns and the containing media boxes have three different layouts.

    jQuery AnimateDialog : jQuery plugin with css3 animation

    jQuery AnimateDialog : jQuery plugin with css3 animation

    This is a jQuery plugin for css3 animation.This plugin allows you to show any element with css3 animation effect.