Generally, we can make a dropdown menu using pure CSS with the help of a hover pseudo-selector. So, users can easily reveal the dropdown menu by hovering over the title of the dropdown. But how can you make an onclick … Read More
A donut chart is a type of circular chart to visualize percentage data in a ring shape. It is most commonly used to represent the progress of a task or some value out of a hundred. The donut and pie … Read More
The card element is a useful component to visualize important content on a webpage. It can be used for post feed, products, or summarized content. It is also useful to highlight features of a product or company as well. A … Read More
In this tutorial, we are going to create a paper folding animation using pure CSS. Basically, such animations can be used for various purposes but using animation for a reason make your design more attractive. So, where we’ll apply this … Read More
A number counting is one of the useful text animations to show some creativity on the webpage. Basically, there are a number of JavaScript/jQuery plugins to make a number counter animation. But, how about a pure CSS number counter animation? … Read More
A pie chart is a useful visual element to visualize percentages data in a circle. It can be used to display statics of a report or process on a webpage. Basically, there are multiple JavaScript libraries (or jQuery plugins) to … Read More
Nowadays, dark mode is a popular UI feature that reduces eye strain in low light conditions. This feature has been adopted by many websites including Google and Facebook to provide the best user experience at night. Basically, a JavaScript function … Read More
The pulsating circle is a useful visual component to show attention to a specific element on a webpage. You may have seen that animation on the Messanger’s camera icon while chatting with friends. On the other hand, the pulsating circle … Read More
The use of CSS animation on a webpage is a unique way to show the creativity of your design. Whether you use the animation for a specific event or as a background of a specific container it produces a creative … Read More
A tree menu is a useful element to present hierarchical data in the visual interface of a website. It is most commonly used in file management systems to allow users to explore the folder and files. Basically, a simple tree-view … Read More
An interactive world map can be used for various purposes on a web page to display various locations. It may be on a “contact us” page to visualize the office locations of a company in the world. Similarly, it may … Read More
A pricing table is a useful element to describe the features and price of a product/service. No doubt, a pricing table plays an important role in successful sales on an eCommerce website. So, it must be user-friendly, attractive, clear, and … Read More
You may have seen wave animation in the headers of many websites. If I’m not wrong, you may have tried to create such a dynamic header using CSS. Don’t worry if you don’t find the actual wave animation you were … Read More
A heartbeat or heart rate monitoring is a visual animation to display the record of heartbeats. Basically, it used in hospitals in medical gadgets related to the heart. But, this web-based heart rate animation is also useful to use as … Read More
In a website interface, a stepper is a useful component to visualize steps of a process. It can be used in the signup form or timeline of major events. Generally, a stepper can be in a horizontal or vertical layout … Read More
Sometimes, we need an animated background for a specific container or for the whole page. The simple solution is that we can use an animated image but the worst thing is that it slows down the page loading. Fortunately, CSS … Read More
The content filter feature helps users to quickly find the relevant content for a specific category. Basically, this feature requires a JavaScript function to filter content. But in this tutorial, we are going to create a pure CSS content filter … Read More
This tutorial explains how to create a 3D cube with the image using CSS3 animation. You may have tried to create a cube using CSS but stuck in coding. Here, you can simply download the source code for this 3D … Read More
If you are thinking about styling the browser’s scrollbar then you are in the right place. You may have tried to make a custom scrollbar but did not get the actual output that you were wanted. In this tutorial, you’ll … Read More
A few months ago, we created ripple animation for buttons like Material Design that reveals on button active events. Today, we are back with the same ripple effect tutorial with different coding techniques. In the previous tutorial, we created the … Read More
