Create CSS 3D Transform Card Flip Gallery with jQuery

    Create CSS 3D Transform Card Flip Gallery with jQuery

    In this tutorial, we are going to apply card flip effect to a set of thumbnail gallery. We just want to demonstrate one of the simple way to use it. One thing though, CSS 3D transform is not a mature standard yet and only modern browsers are supporting it. As a result, to make this demo usable, we will make it degrade gracefully and replace it with scroll up effect.

    Showcase Product Feature in 3D Style with jQuery & CSS3

    http://www.webstuffshare.com/2012/06/showcase-product-feature-in-3d-style/

    Focus on showcasing our product features can be a good choice for attracting user on landing pages. By showcasing in 3D style also a good choice, in this tutorial I am going to share how to showcase our product feature in 3D style using CSS3 3D Transform and jQuery.

    The showcase will be displaying product image and tagline. The tagline will be positioned in the middle of product image, so there will be product image in two positions, left and right of the tagline. These images will be rotated in 3D around y-axis with angle of rotation -35 degree for the left image and 35 degree value for the right, the image will be rotated.

    Elegant Accordion with jQuery and CSS3

    Elegant Accordion with jQuery and CSS3

    jQuery Elegant Accordion plugin has following features :

    • Auto-rotate through all the slides with extra options
      • Pause on hover
      • Stop rotation on click of a slide
      • Option to stop rotation at the end of the slides
    • Options for setting delay, animation speed and easing
    • Ability to set active slide onload using hashes (index.html#panel1-3)
    • Works with multiple instances on the page
    • Ability to specify width of active slide while automatically adjusting inactive slides

    imJQMosaic : jQuery plugin creates Mosaic pattern using an image

    imJQMosaic : jQuery plugin creates mosaic pattern using an image

    imJQMosaic is a simple jQuery plugin that creates mosaic pattern using an image.

    This is a pure JavaScript based jQuery plugin. Apart of just creating the mosaic pattern on an image, it also facilitates the user to put menus on top of the mosaic tile(s). Hence, it can be beautifully used as navigation menu. It can also serve as a substitute to the popular Flash based navigations on the home pages of a website or application which unfortunately don’t work on mobile phones not supporting Flash content.

    This plugin is based on the technique of CSS sprites and also uses some of the new features introduced in CSS3. The plugin requires latest browsers that support HTML5 and CSS3. In absence of adequate browser, the plugin gracefully degrades and still works! Ideal behavior of this plugin can be viewed in Safari 4 or Firefox 3.5. But it works with Chrome and IE 8 also.

    pShadow – a jQuery extension for gorgeous drop shadows

    pShadow – a jQuery extension for gorgeous drop shadows

    pShadow, short for ‘paper shadow’, is a jQuery extension that adds realistic drop shadows to HTML elements, which works in Internet Explorer (IE8, IE7, IE6 with some clever trickery), Firefox, Chrome, Safari, Opera, and any other modern browser you care to mention.  It’s free to download and use, and you can see an example on the demo page.

    We all know that modern browsers (apart from IE anyway) support the lovely CSS3 box-shadow property.  But there are times when we need to cater for IE too, and sometimes a simple box-shadow just doesn’t cut the mustard.  The pShadow jQuery extension does what all great performers do – it masters the art of illusion.

    The shadow itself is actually a .png image, carefully designed to sit on the bottom edge of an element and give impression of depth and shadow, as if the element was a piece of paper sitting on your screen.  No shadows are needed on the other edges, because the bottom shadow does all the work for you.  Your eyes do the rest and turn it into a 3-dimensional object.

    FrameWarp : jQuery plugin for displaying pages in a neat overlay

    FrameWarp : jQuery plugin for displaying pages in a neat overlay

    There is the option of using one of the numerous lightbox plugins to do this, but the plugin we will be creating in this tutorial has a lot of advantages over a generic lightbox script:

    • Lightweight – it is created specifically for showing pages, not images;
    • No UI, so the page feels like a dialog window;
    • The page can close itself, and can also send messages to the parent window;
    • Can optionally use a cache for faster subsequent page loads;
    • Uses a neat CSS animation with a JavaScript fallback.

    3D Flipping Circle with CSS3 and jQuery

    3D Flipping Circle with CSS3 and jQuery

    In this tutorial we will create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.

    Today I would like to show you how to create a little component with a realistic touch. The idea is based on the sweet paper effect found in the video of the Google Developer Stories. Maybe you have created these kind of paper effects when you were a kid; basically something opens or rotates when pulling or pushing some handle.

    We’ll create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.

    jPie jQuery Circular Menu

    jPie jQuery Circular Menu

    jPie is a Contextual Circular Menu for jQuery.

    Here are the features:

    • You can create countless instances and each instance can be fully customizable using the attributes provided by the plugin (DRAGGABLE, CLOSABLE etc…)
    • Fully customizable layouts, using an external CSS and specific themes.
    • Ability to associate to each element of the DOM own context menu
    • Fully compatible with the major browser ( IE, Chrome, Safari,Firefox, Opera)
    • Can replace the context menu of the browser

    How to Create a Multi-Step Form Using RhinoSlider

    How to Create a Multi-Step Form Using jQuery RhinoSlider

    If you are using normal Sign Up forms and still require a lot of data from your users, a multi-step form is the best solution. So the form is broken into small sections and the user only sees one section at a time. Also, multi-step forms reduces the space you need on the page.

    In this tutorial I am going to show you how to make a multi-step Sign Up form using Rhinoslider. I think you would prefer seeing the demo first.In a multi-step form, once you complete the first step, the second step will be displayed and Step 1 will be hidden. Normally we use sliding effects in step transitions. So this a scenario where we can use a Slider differently from its default behavior of creating image slideshows.