Do you play the cards game classic Solitaire? I know this is most favorite microsoft's game. Here, I am not going to discuss about this game nor it's trick. I am fan of it's 3D card flipping effect and so, here sharing how can we do this with css and jquery. For creating this 3D Card flipping effect, I have done some experimental work with CSS3 Transform (3D) rule. The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. I had used many transform (3D) effects in Demo. In this…

Here is a pure CSS experimental work to create floating bubbles without using JavaScript. These animated bubbles are also with popping effect. All these animation is created by Pure CSS. For our little demo, we use a simple image for the conical flask and then create the bubbles entirely with markup and CSS. The HTML <div id="beaker"> <span class="bubble"> <span class="glow"> </span> </span> </div> With our bubbles all made, now we need them to act like bubbles. We could use JavaScript but that's no fun. Just use CSS! There are a few things we need to animate. The vertical positioning…

I have done some experimental work to create CSS3 Animation without using JavaScript. I end up creating some animations using CSS3 Keyframes and Transform and like to share. I have done this animation using border-color tricks and CSS Transform: CSS scale and CSS3 rotation. Note: Before going I like to make something clear, Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property. Chrome and Safari requires the prefix -webkit- in css. Important: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property. The HTML <div id="colorWheel"> <span class="color01"></span> <span class="color02"></span> <span…

Normally, Polaroid Gallery is a CSS3 & jQuery Image Gallery plugin for Media Library. It is used to overlay images as Polaroid pictures on the current page or post. It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs. In this article you will see how you can build an awesome CSS3 animated Polaroid pictures gallery with some of these cool features. This is something I wished to do for a while and I finally made it. The HTML The HTML structure hasn't changed at all, simple and minimal. Here’s an excerpt: <div class="photo-album"> <h2>Dhiraj, Geetu & Atharv…

Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we'll explore some of the possibilities. Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we'll explore some of the possibilites. We'll be using in order to style single letters of the words we'll be having in our big headlines. THE HTML The structure will simply be an h2 element with…

Hi guys! Today we are going to see another great example of how to use the power of CSS3. We will start by creating a very cool and realistic 3D ball with pure CSS3 properties, and add a little CSS3 animations for giving the ball a "bouncing" effect. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties (gradient, shadow, border-radius, keyframe animation). THE HTML Let's start with some very basic HTML: <div id="ballWrapper"> <div id="ball"></div> <div id="ballShadow"></div> </div> What we have here are 3 simple DIV elements. "#ballWrapper"…

Introduction This tutorial will try to guide you through the steps to create a 3D-like, explosions in sky or billboard-based clouds. There are a few advanced topics, mainly how 3D transformations via CSS properties work. If you want to find more information, this is a nice place to begin. If you're in a hurry, just check the final result. The tutorial is divided into sections, each with a different step to understand and follow the process, with HTML, CSS and Javascript blocks. Each step is based on the previous one, and has a link to test the code. The code in the…

CSS transitions do not have any effect on background gradients. As far as I know, the thing is that something similar would be quite difficult to achieve considering the multitude of possible gradients that can be created using a color palette. Though, there are some simple ways you can simulate smooth transitions on gradients and below you'll see how to do that. Before writing this article, I was thinking this new article will hopefully be more useful to you as It contains one more extra technique that can help you faking transitions on background gradients. So, what is this about…