People familiar with CSS3 must be aware of the numerous options it presents to a web designer to show off his skills. One of the most amazing aspects about CSS3 is that it’s fairly simple to implement it. Just write a few lines of code and you will get amazing transition effect to wow your visitors. Moreover, these effects are hardware accelerated and provide a progressive enhancement that increases user engagement on your site and if used effectively increases the conversions.
In this article, we’ll look into some very easy effects that can be implemented using CSS3 that will bring life to your UI and make your user spell bounded. We’ll use the transition property to control the effects.
First let’s set up a div in an HTML page:
Now, add height and width to give it dimensions, background color then we can see it, and lastly the transition property.
The transition property has three values- properties on which transition will occur (in this case all), speed of transition (in this case 0.2 seconds), and the last value is the one that allows change in the acceleration speed of transition.
Now, we began changing properties to animate them.
Change Color
Earlier animating on change of color was very complex as it involved lot of mathematical calculations to separate RGB values and later combining them. But, with CSS3 we just have to set the div’s class to “color” and specify the color of our choice.
.color: hover {
Background: #63g581;
}
Rotating Elements
One of the best transformation techniques is the rotation of an element. Add the “rotate” class in the div with the following CSS code:
.rotate:hover {
-ms-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
-webkit-transform: rotateZ(-45deg);
}
3D Shadow Effect
A few years ago 3D shadow effect was not consider optimum, because they were not considered as compatible with flat design. But, in reality they work amazingly well to give user a great visual experience.
.threed:hover {
box-shadow:
1px 1px #53a7ea,
2px 2px #53a7ea,
3px 3px #53a7ea;
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
Inset Border
Ghost buttons are the latest trends. These buttons have no background but have a heavy border. You can always add border on an element, but it will change the position of the element. Box sizing is a simple solution to fix this positioning problem. It adds transition in a border with the help of inset box shadow. Adding this “border” class to your code will bring in the transition.
.border:hover {
Box-shadow: inset 0 0 0 25px #654ed1;
}
Fade In
Fading elements is a concept loved by users and clients alike. It presents a unique way to lay emphasis on functionality, or draw users’ attention to call to action button.
The code for fade in effect is split into two parts- first one is to set the initial state and secondly set the change.
.fade {
opacity: 0.5;
}
.fade:hover {
opacity: 1;
}
Grow & Shrink
Before CSS3, change in height and width, or padding was important to grow an element. CSS3 has made it fairly simple to enlarge using transform. Set the div’s class to grow and add this code in the style block.
.grow:hover {
-ms-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
Shrinking an element is as simple as growing it. In order to enlarge an element, we specify the value greater than 1, to shrink a value lower than 1 is required.
.grow:hover {
-ms-transform: scale(0.75);
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
Change in Shape- Square to Circle
With transform, you can transit square element into round one and vice-versa. CSS3 has made it extremely simple to implement this transition by changing the border-radius property. Add this CSS code to your style along with the “circle” class to your div.
.cirlce:hover {
border-radius: 50%;
}
Conclusion
Implementing these transitions is surely going to give your UI an edge over your competitors. Moreover, it will surely engage the users more on your website and leave a lasting experience.