CSS - Cascading Style Sheets

jQuery 3D CSS card flipping effect – Transform 3D

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…
Continue Reading »
CSS - Cascading Style Sheets

Pure CSS Heart Beat / Pulsing Animation

Before working on Heart pulsing animation, first We have to think about How does the Heart beat? It expands and Each pulsing is in same duration/period of time. This can be easily done with CSS3 animation. No flash or images are required. A heart does not double in size when it beats. 10% change in size looks better to me. I like it getting both larger and smaller When it stops moving altogether it looks dead to me. Even when it isn't beating. So, it needs to expand or contract a little to look alive :). I explicitly have the heart start…
Continue Reading »
CSS - Cascading Style Sheets

Animated bubbles upwards continuously with pure CSS

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…
Continue Reading »
CSS - Cascading Style Sheets

CSS Vendor Prefixes or CSS3 browser prefixes

CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for new CSS features in a sort of testing and experimentation period. Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn't been finalized. The CSS browser prefixes are: Android: -webkit- Chrome: -webkit- Firefox: -moz- Internet Explorer: -ms- iOS: -webkit- Opera: -o- Safari: -webkit- In most cases, to use a more advanced CSS style property, you take the standard CSS property and add the prefix above for each browser. For example, if you want to add a CSS3…
Continue Reading »
CSS - Cascading Style Sheets

Animated Color wheel spinning with CSS3 Keyframes animation, Transform and Transition

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…
Continue Reading »
CSS - Cascading Style Sheets

Pure CSS3 Animated Polaroid Gallery

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…
Continue Reading »
CSS - Cascading Style Sheets

Cool Typography Effects With CSS3 and jQuery

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…
Continue Reading »
CSS - Cascading Style Sheets

Rotating Words With CSS Animations – CSS3 Keyframes Animation Example

In today's tutorial we'll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We'll be "exchanging" certain words of that sentence using CSS animations. Please note: the result of this tutorial will only work as intended in browsers that support CSS animations. So let's start! In the following, we'll be going through demo. THE HTML We'll have a main wrapper with a h2 heading that contains first-level spans and two divisions for the rotating words: <section class="rw-wrapper"> <h2 class="rw-sentence"> <span>Real poetry is like</span> <br /> <span>creating beautiful butterflies</span> <br…
Continue Reading »
CSS - Cascading Style Sheets

Animated 3D Bouncing Ball with CSS3, Html5

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"…
Continue Reading »
CSS - Cascading Style Sheets

Creating CSS Starbursts Design with CSS3 Transform

Working with the new CSS3 rotation property I got that I could create image free starbursts. All I needed was a series of nested block-level elements each rotated by a slightly different amount. The rotation would distribute the box corners around the circumference of the star. About these CSS3 Starbursts: A good thing is if you create your starbursts with CSS3 you can do so much more than with images. You can experiment with different numbers of points/corners, rounded borders, resize, text-shadows and animations also. To see the animations you will need to use latest browsers like IE 9+, Firefox…
Continue Reading »