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

    Mobile App Design/Dev: Building Navigation with jQuery

    June 29, 2012 | Ajax, CSS2 / CSS3.0, HTML5, jQuery Mobile, Menus
    Mobile App Design/Dev: Building Navigation with jQuery

    Smartphones are now equipped with some very efficient web browsers. JavaScript is more powerful than ever before, and can be extended with the help of code libraries such as jQuery. When you add in the latest HTML5/CSS3 specs, it’s possible to build very snappy mobile web apps with some basic frontend code.

    In this tutorial I’ll show how you can build a mobile-based website/webapp. We’ll use CSS3 media queries for targeting specific devices and screen resolutions. Plus a bit of jQuery helps to animate the menu and load external page content using Ajax calls. Even better, the layout can even expand to display properly in regular desktop browsers such as Chrome or Firefox.

    Read More Demo

    Responsive 3D Panel Layout in jQuery & CSS3

    June 28, 2012 | CSS2 / CSS3.0, Plugins, Responsive
    Responsive 3D Panel Layout in jQuery & CSS3

    Today we want to share a creative grid layout with you. The layout will contain slides where each one consists of up to four panels. When navigating through them, we’ll animate some separation lines (the “grid”), adjusting the size of the next slide’s panels. The panels will appear with a 3D effect which we will define for each panel.

    Please notice that this is very experimental. It will only work as intended in browsers that support the new CSS properties used here. It was tested in the latest versions of Safari, Chrome, Safari Mobile and Firefox (not as smooth though).

    Read More Demo

    How to Create an Video Player in jQuery, HTML5 & CSS3

    June 28, 2012 | CSS2 / CSS3.0, HTML5, Video & Audio
    How to Create an Video Player in jQuery, HTML5 & CSS3

    In this tutorial we will code an Video Player from Impressionist UI by Vladimir Kudinov. We will code it with CSS3 for the styling and the “MediaElement.js” for the functionality. MediaElement.js is a HTML5 audio and video player that also works for older browsers using Flash and Silverlight to mimic the HTML5 MediaElement API.

    Read More Demo

    Awesome jQuery Mobile Image Gallery Web App

    June 27, 2012 | CSS2 / CSS3.0, jQuery Mobile, PHP
    Awesome jQuery Mobile Image Gallery Web App

    With more and more users browsing the web with a mobile device, it’s time to begin with mobile web development. In this tutorial we are going to develop a simple mobile image gallery using the amazing jQTouch jQuery plugin for mobile web development. jQTouch is a jQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, iPod Touch, G1, and Pre.

    Our little application is going to show some albums in a list view which will reveal a wall of thumbnails once it’s clicked. When a thumbnail is clicked, we get to the full image view where we can navigate through all the photos by either clicking on the navigation buttons or swiping over the image.we will be using PHP to automatically generate albums with PHP from the folder structure.

    Read More Demo

    zoom.js : JS API for Zooming in on Specific Points

    June 23, 2012 | Core Java Script, CSS2 / CSS3.0, Zoom
    zoom.js : JS API for zooming in on specific points

    zoom.js is a small proof of concept JavaScript library for zooming in on DOM elements or points in a document. It uses CSS3 transitions and 2D transforms (scaling, translation, transform origin) on the <body> element to achieve animated magnification.

    Read More Demo

    Simple Drop Down Menu with jQuery and CSS

    June 21, 2012 | CSS2 / CSS3.0, Menus
    Simple Drop Down Menu with jQuery and CSS

    This post is very basic level jQuery and CSS implementation. I want to explain how to design simple drop down menu  with CSS, HTML and jQuery. This system helps you to minimise the menus list. Just take a quick look at this post very few lines of code, use it and enrich your web projects.

    Read More Demo

    Responsly.js : A set of CSS3 responsible widgets for jQuery

    June 20, 2012 | CSS2 / CSS3.0, Plugins, Responsive, Web
    Responsly.js : A set of CSS3 responsible widgets for jQuery

    Dead simple responsive widgets, written using CSS3 transformations and available as a jQuery Plugin. Currently a sideshow and accordion are available, more to come!.Responsive designs are cool! Not only do they allow you to reach mobile and tablet users with minimal effort, they also make your context scale up for desktop users with larger screens.
    Features

    • Works from large monitors to laptops, to tablets to mobiles.
    • Pure CSS styling
    • CSS3 based transitions (hardware accelerated where possible).
    • Animations work on all modern browsers including mobile, (IE degrades gracefully by losing transitions).
    • Minimal dependence on jQuery for convenience ( can substitute Zepto, or pure JavaScript).
    • Simple lightweight design, adds little to your download size
    • Compartmentalized, so use only what you want
    • Best used with a responsive CSS framework like 1140px or 320plus
    • Can be heavily customized by editing CSS
    Read More Demo

    3D Thumbnail Hover Effects with CSS3 and jQuery

    June 19, 2012 | CSS2 / CSS3.0, Gallery
    3D Thumbnail Hover Effects with CSS3 and jQuery

    Today we want to show you how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effect that you can find on the page of the Google SketchUp Showcase.

    In our examples, we’ll use thumbails that will reveal some more information on hover. We will create a structure with jQuery that will allow making the image appear as folded or bended when we hover over it. For the hover effects we will use CSS 3D transforms.

    Read More Demo

    How To Create The Google Circles Effect With CSS & jQuery

    June 19, 2012 | Animation, CSS2 / CSS3.0
    How To Create The Google Circles Effect With CSS & jQuery

    This tutorial teaches you how to create a circle just like the one Google Circles use. As many of you might have already seen, one of the coolest features from Google’s new social project is the way you can easily add users to different circles to keep your social connections more organized.

    This tutorial will only cover how to create the actual circle and have it grow when your mouse goes over it. You will not learn how to do the little profile images that appear around the circle, though if there is enough demand for me, I can work on that in the near future.

    Read More Demo

    Building a List/Grid View Switcher with jQuery

    June 18, 2012 | CSS2 / CSS3.0, Web
    Building a List/Grid View Switcher with jQuery

    A fairly common web interface feature is the dynamic view switcher. On product pages or blog archives you’ll sometimes find buttons to change the layout from display lists to smaller grids. In this tutorial I’ve built a simpler example using basic CSS and some jQuery commands.

    I’ll be using interface elements from the Zephirro E-Commerce UI Set which include buttons and thumbnail photos. Feel free to demo the code yourself and try out a similar experience on your own website. This is a tricky effect to nail down, but when done properly your users will love the unique experience.

    This tutorial should give you a strong introduction to manipulating your page layouts with jQuery. Even the simple action of mixing up classes & IDs can boldly enhance the user experience.

    Read More Demo