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

    Universal Responsive Mega Menu with jQuery & CSS3

    June 19, 2013 | CSS2 / CSS3.0, Menus, Premium, Responsive
    Universal Responsive Mega Menu with jQuery & CSS3

    In this a author put together a flexible mega menu system that can hold 12 sizes of drop downs, unlimited fly-out elements combined with a jQuery script to enhance the whole system.It can be used as a sticky footer (with mega “drop-ups”) using the exact same markup as the “standard” mega menu. You can switch between those 2 variants just by changing a single class.

    Features:

    • Header and Footer Mega Menus
    • Fully Responsive Menu
    • Retina Ready Graphics
    • Flexible 12-Columns Grid
    • Styled Typography and Elements
    • Simple Working Contact Form
    • Clean and Professional Design
    • Touch-Screen Devices Friendly
    • Cross-Browser Support
    Read More Demo

    jQuery Responsive Megamenu with CSS3

    June 16, 2013 | CSS2 / CSS3.0, Menus, Premium, Responsive
    jQuery Responsive Megamenu with CSS3

    Responsive Megamenu is a menu component based in CSS and Javascript code. It can be used like a dropdown navigation, megamenu navigation or both. It’s has a responsive and fluid layout.

    Features:

    • 11 Styles
    • Javascript/CSS3 effects
    • Grid system
    • Responsive layout
    • Fluid layout
    • Collapsible
    • Major browsers compatible
    Read More Demo

    How to Make a Digital Clock with jQuery and CSS3

    June 15, 2013 | CSS2 / CSS3.0, Plugins
    How to Make a Digital Clock with jQuery and CSS3

    It all started last week when I saw this pretty dribbble shot. I immediately felt the urge to convert it into a working clock and share it with Tutorialzine’s readers. If you’d like to learn how I made it, read on!

    To make the clock work, we will have to use jQuery to generate the markup for each of the digits, and set a timer to update the classes every second. To make our lives easier, we will use the moment.js library to compensate for the lacking JavaScript native date and time functions.

    Read More Demo

    Creative Button Styles with JavaScript & CSS3

    June 14, 2013 | Core Java Script, CSS2 / CSS3.0, Forms
    Creative Button Styles with JavaScript & CSS3

    Today we would like to give you some button inspiration. This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons we use a bit of JavaScript to add/remove effect classes.

    Read More Demo

    ZoomBox 2 – The Photographer’s Premium Lightbox in jQuery & CSS3

    June 14, 2013 | CSS2 / CSS3.0, HTML5, Plugins, Popup Window, Premium
    ZoomBox 2 - The Photographer's Premium Lightbox in jQuery & CSS3

    ZoomBox 2 – The Photographer’s Lightbox ! What makes ZoomBox unique to the other lightbox scripts ? In short – quality, user-friendliness, design and social media connectivity. Take a look at the demos and be convinced.

    Features:

    • HTML5 technology – this gallery uses the latest html5 tehniques ( like Histroy API ) to deliver a never seen before experience to your clients
    • fully responsive – looks great from mobile to HD
    • touch optimized – touch devices are not forgotten
    • two skins – two full skins to fit every brand
    • CSS3 technology – this player uses cutting-edge css3 definitions
    • Retina-ready – graphics have double resolution for smooth retina viewing
    • easy install – purchase, download the zip, read the docs
    • iPhone / iPad optimized – this gallery has been optimized for Apple touch devices
    • Android optimized – this component has been tested on Android 4.0 and works awesome
    • truly social – Zoombox 2 is truly social. It features the Facebook Like widget and Facebook Chat so your fans can comment on your art. And because deeplinking is done right in ZoomBox 2, each photo has it’s own likes and comments, even if on the same page. Wow!
    Read More Demo

    Creating Multi Level Dropdown Menu CSS & jQuery

    June 13, 2013 | CSS2 / CSS3.0, Menus
    Creating Multi Level Dropdown Menu CSS & jQuery

    I’ve been playing with a layout that needed an good looking dropdown menu, so I’ve decided to create one myself, and also created this tutorial, hopefully it will prove to be useful to those who needs similar drop down menu. We will be creating 3 level sub menus in pure CSS, it should work without any JavaScript, and at the end we will add jQuery for that sliding effect.

    Read More Demo

    jQuery Panzoom : Plugin for panning and zooming elements using CSS3

    June 11, 2013 | CSS2 / CSS3.0, Plugins, Zoom
    jQuery Panzoom : Plugin for panning and zooming elements using CSS3

    Panzoom is a progressive plugin to create panning and zooming functionality for an element. Panzoom supports the same browsers as jQuery 2.0 and can be used with jQuery 1.9.0+ or jQuery 2.0+. Rather than setting width and height on an image tag, Panzoom uses CSS transforms and matrix functions to take advantage of hardware/GPU acceleration in the browser, which means the element can be anything: an image, a video, an iframe, a canvas, text, WHATEVER.

    Panzoom includes support for touch gestures on iOS and Android and even supports pinch gestures for zooming. It is perfectly suited for both mobile and desktop browsers. You’ll be amazed at how well this performs on your mobile device.

    Read More Demo

    iMapper : jQuery/HTML5/CSS3 Image Mapper

    June 10, 2013 | CSS2 / CSS3.0, HTML5, Plugins, Premium, Responsive
    iMapper : jQuery/HTML5/CSS3 Image Mapper

    iMapper – jQuery/HTML5/CSS3 Image Mapper is a simple, yet powerful plugin that lets you select an image of your choice and pin stuff on it. It offers several embedded pins which offer special functionality, as well as the ability to import your own pins with the basic functionality. It is very intuitive and easy to use, and it will take but moments to set up your image with pins and customize the content connected to each of these pins.

    iMapper is a perfect solution if you want to make your contact page a bit more dynamic. It will fit perfectly no matter what your profession is. It can easily be adapted to a health image mapper, product image mapper, contact image mapper etc.

    Read More Demo

    Blades 3D : CSS3 Responsive & Retina Ready Banner Rotator

    June 9, 2013 | CSS2 / CSS3.0, Premium, Responsive, Slider
    Blades 3D : CSS3 Responsive & Retina Ready Banner Rotator

    Blades 3D is a responsive and retina ready with CSS3 3D Transforms and CSS3 Transitions.

    Features:

    • Responsive (optional)
    • Retina Ready (optional)
    • Choose to use autoplay and set autoplay delay
    • Automatically randomize the slide order
    • Choose to turn off 3D flip beaviour and switch to “classic” mode
    • Choose from one of 6 different flip rotations or cycle through them all
    • Set “break-apart” thumb spacing
    • Set the number of grid columns and rows
    • Touch-swipe for mobile devices
    • Use as many slogans that will fit
    • Slogans support multiple lines and hyperlinks
    • Use more than one banner on the same page
    • jQuery free (no worrying about jQuery conflicts or having to update to the latest jQuery)
    • Custom settings can be passed through either JavaScript or HTML attributes.
    Read More Demo

    Swipebox : A touchable jQuery lightbox

    June 9, 2013 | CSS2 / CSS3.0, Plugins, Popup Window, Responsive
    Swipebox : A touchable jQuery lightbox

    Swipebox is a jQuery “lightbox” plugin for desktop, mobile and tablet.

    Features:

    • Swipe gestures for mobile
    • Keyboard Navigation for desktop
    • CSS transitions with jQuery fallback
    • Retina support for UI icons
    • Easy CSS customization
    Read More Demo