Creating animated loaders with CSS3 Animation

spinkit

Introduction

Loaders and Spinners play an important role in the modern dynamic websites. Though they look simple but they play a very important role in simplifying the overall User Experience. There are a lot of ways to create animated loaders, however in this post I will be using the power of CSS3 to create 3 different spinners.

You can view all the working loaders and spinners by clicking “vKIAp” button below. Before we dig in to it, lets find out what CSS3 properties are required to build them.

See the Pen vKIAp by Mohit Bhansali (@mohitbhansali) on CodePen.Continue Reading

Create a Flipcard using CSS3

Card Flip Tutorial - Featured Image - Red

With the introduction of CSS3, one little thing that you could do very well with just a few lines of code was animations. As you might have observed, there are various animations on new websites that have been created with the latest technologies of HTML5 and CSS3. Most of these animations are used to bring real life simulations.

Today, we will display how a flipcard can be made using the flipping feature of CSS3. It will have 2 sides – one with a logo or an image and another side having the company details. By default, it will show the image or logo, whereas on mouse hover, it will flip to the other side with the details. The two sides of our simple example will look like the following.Continue Reading

Easy image hover effects using CSS3

It is said that a picture is worth a thousand words. An image conveys a lot more than words but an interactive image with some extra glitter will make the user experience amazing. Earlier, images were displayed without much modification or if anything was done, it was done using JavaScript. JavaScript helped provide basic effects but never gave rise to creative ideas as it was difficult to implement. But, with the advent of CSS3, designers could deliver better experience with little effort as the implementation became easier.

In this post, we are going to enhance the viewing of an image by providing information and links on hovering mouse pointer above it in a beautiful way. Checkout the demo here.Continue Reading