Create Semi Circle Progress Bar using CSS

Create Semi Circle Progress Bar using CSS

A progress bar is used to indicate the status of a process visually. In web designing, there are various types of progress bar including circular/radial progress bars and animated progress bars. In this tutorial, we are going to create semi … Read More

Pure CSS Image Comparison Slider

Pure CSS Image Comparison Slider

A comparison slider is used to compare two images to highlight before and after effect. Users can view changes in real-time by sliding the image with the mouse pointer or swipe. An image comparison slider can be created using JavaScript … Read More

Responsive Carousel Image Slider in CSS

Responsive Carousel Image Slider in CSS

Sometimes we need a lightweight image slider while creating a lite website template. No doubt, a number of JavaScript/jQuery plugins are available to build an image slider. But, in order to create an ultra-lightweight carousel what will we do? Of … Read More

Responsive Pure CSS Off Canvas Menu

Responsive Pure CSS Off Canvas Menu

Menu navigation is the main part of a website to navigate webpage content. It allows users to browse the most important pages easily. There are many types of menus like dropdown menu, sidebar menu, and off-canvas menu, etc. In this … Read More

3D Button Hover Effects using Pure CSS

3D Button Hover Effects using Pure CSS

Buttons are the most important elements in web designing that allow users to interact with a website. They can be used to perform various operations on a webpage. No doubt, a well-designed website attracts users to long last on a … Read More

Custom Select Dropdown using CSS Only

Custom Select Dropdown using CSS Only

A select dropdown is a group of options that allows the users to choose one value from it. Generally, a dropdown select can be created using HTML <select> tag. But unfortunately, it cannot easily style with CSS to customize. However, … Read More

Create CSS Accordion without JavaScript

Create CSS Accordion without JavaScript

Nowadays, most of web page assets can be created without using JavaScript. Yup! you heard it right, whether you are creating menu navigation or image slider you can functionalize it using pure CSS. Similarly, you can also build a responsive … Read More

Moving Background Image CSS on Scroll

Moving Background Image CSS on Scroll

Sometimes, a web designer wants to create creative and mind-blowing stuff. Whether he is creating a part of the website template or a plugin he must use a parallax background effect or scrolling effect to add some creativity. Similarly, CSS … Read More

Vertical Sidebar Toggle Menu Responsive with CSS

Vertical Sidebar Toggle Menu Responsive with CSS

Today, I’m going to share a responsive vertical sidebar toggle menu with a step-by-step implementation guide. This sidebar navigation menu comes with an animated hamburger button to toggle the menu drawer. Likewise, the CSS gradient color used in the sidebar … Read More

Pure CSS Progress Bar Animation by CSS3

Pure CSS Progress Bar Animation by CSS3

In a visual user interface, a progress bar is an indicator of a process. It can be used for various purposes including downloading progress, installation, skills overview or visualization of an operation. Basically, the HTML5 provides a default progress bar … Read More

Reveal CSS Modal Popup on Button Click

Reveal CSS Modal Popup on Button Click

The use of modal popup is very common in web designing nowadays. Whether we are alerting the user or displaying an important message, we use a modal popup box. Generally, we need to use a jQuery plugin (or vanilla JavaScript) … Read More

Pure CSS Responsive Drop Down Menu

Pure CSS Responsive Drop Down Menu

One day, we were working on a project to create a lite web page template. One of my juniors asked me to suggest a lightweight jQuery plugin for the drop-down menu. I wondered to hear that and suggest him to … Read More

Stylish Search Box in HTML CSS Code

Stylish Search Box in HTML CSS Code

A few days back, I was designing a landing page for a client. He asked me to add an animated stylish search box in that. I searched on the web, found many designs for the search box but none of … Read More

Create Animated Content Tabs with CSS3

Animated Content Tabs with CSS3

Tabs are navigational items to switch between the relevant contents being on the same webpage. It makes easy to navigate specific content without loading the whole page. Besides this, tabs are useful to display contents in a short space of … Read More

CSS only Responsive Image Slider

CSS only Responsive Image Slider

In this tutorial, you’ll learn how to create a responsive image slider using CSS only. How it would be? an image slider that can be slide through HTML radio inputs with a smooth sliding animation. The final output is shown … Read More