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.
PullOuts : jQuery Slide-out Widgets
PullOuts is a stand-alone script based on a popular WordPress plugin – “PullOut Widgets”, and can be used on any website that supports HTML and JavaScript.PullOuts allows to grab any piece of content from a web page and display it as a pullout widget. Whether it’s a block of text, images, shopping cart, login, search or subscription form, a video or any other content – you can make it a pullout.
Features :
- Flexible pullout widget positioning on top, right, bottom or left side.
- Multiple pullout triggers:
- on mouse click;
- on mouse hover;
- timer countdown;
- page count;
- when specified element appears on the screen.
- Unlimited widget colors.
- 289 slick icons for pullout tabs.
- 32 sliding animation effects.
- Multiple styles for pullout tabs: square, rounded corners, borders, combination of the above.
- CSS3 vertical and horizontal tabs.
- Pullout speed control.
Showcase Product Feature in 3D Style with jQuery & CSS3
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
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 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, 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
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
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.