In this post, I will give you some progress bar examples that have been created in HTML, CSS & JavaScript. Let’s see the live examples below. Live preview of the progress bars For the above progress bars, I have the following HTML, CSS & JavaScript. HTML CSS JavaScript How to edit these progress bars? Aside from the color, background, etc, you may also need to change the text/label and percentage of the progress bars. And this is what I am going to show you here. Change the text or label To change the labels such as Python, JavaScript, and TypeScript, […]
Read More →
I created other card examples in the past that you can check here but in this post, you’ll get some animated cards along with their HTML & CSS. Let’s see the animated card examples below: Live preview of the animated cards Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio dolores nesciunt nisi veniam eos quo magni illum odio possimus earum. Details Contact agent Sit amet consectetur lorem ipsum dolor adipisicing elit. Optio dolores earum nesciunt nisi veniam eos quo magni illum odio possimus. Details Contact agent Discover the world of adventure Lorem ipsum dolor, sit amet consectetur adipisicing elit. […]
Read More →
There are many use cases of CSS hover. In this post, I will show how you can create an image hover animation effect using only CSS. Here I made 7 different examples that you will see by hovering over each image. You’ll get all the HTML & CSS after the examples. Before I give you the code, see the live examples below. Live preview of image hover animation effect EXAMPLE 1 (Fade animation):Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet totam molestias accusantium at hic atque corrupti labore, ducimus aliquam doloremque? EXAMPLE 2 (Zoom in):Lorem ipsum dolor sit amet […]
Read More →
To create a circle using CSS, you need to apply 50% border-radius to all four corners and the element should be equal in width & height (square). Not to mention, there are some exceptions that I will explain as we go through the examples. In this post, I will show how you can create different types of circles with CSS. Let’s get started. How to create a circle border in CSS? To create a circle border (hollow) as you see in the above example (blue), you need to specify the exact/same width & height and add a 50% border-radius. It’s […]
Read More →
An adjacent sibling combinator is a way to select an HTML element that immediately comes after the first selector in CSS. This is the simplistic explanation that I can give you. But I will explain this CSS combinator in more detail, and give you code examples, pictures, and everything you need to understand the adjacent sibling combinator. It looks very complex based on the definition. But this is one of the most simple CSS selectors that you may have ignored in the past because you took it the hard way. Bear with me to understand it clearly for the rest […]
Read More →
Spacer HTML code is a deprecated tag that was used to create space back in old days. But nowadays it’s not in use in all major web browsers. In this post, I will show you how it was working in the past and its alternatives in these modern days. How spacer HTML code was working in the past? The <spacer> tag was creating space horizontally & vertically using type attribute (also within a block). See the HTML below for more clarification. Now you know how the <spacer> tag was working. However, according to MDN documentation, it’s no longer a valid […]
Read More →
border-color is a CSS property that you can use to set the color of a border. But the border-color is not enough to make the color visible. You need one more property to make it work. It’s border-style. See the CSS below: To avoid confusion, make sure you spelled “color” correctly, and it’s not colour. There are different types (border-style) of borders you can choose from. Such as solid, dotted, dashed, double, etc. For border-color, you can choose any HTML color name, hex code, RGB/RGBA. Color name examples: red, green, blue, etc. Hex code examples: #FF0000, #008000, #0000FF, etc. RGB […]
Read More →
In this post, I will give you a few sample breadcrumb navigation that I built with HTML & CSS. You’ll also get the source code of each breadcrumb. Breadcrumb navigation examples Before we start writing any code, let’s see the breadcrumb examples first. After that, you can choose any style and grab its corresponding HTML & CSS. Home Blog Web Development Flexbox Home Blog Web Development Flexbox Home Blog Web Development Flexbox Home Blog Web Development Flexbox Home Blog Web Development Flexbox Home Blog Web Development Flexbox You saw the live preview of the breadcrumbs above. These are the most […]
Read More →
In this post, I will show you how to create an accordion with HTML, CSS & JavaScript. Also, I will give you the source code of a beautifully designed accordion that you can use on your own projects. There is no CSS or JavaScript framework that I used to create this accordion. See the demo of the accordion below. Consectetur adipisicing elittaque quaerat nostrum esse? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed, ea. Illum autem quae dolore labore! Voluptate sed debitis consequatur esse rerum nemo ratione, veritatis quo quis blanditiis enim nisi molestiae. Consectetur adipisicing elit, sed do […]
Read More →
To create a simple HTML alert box, you really don’t need a large CSS framework like Bootstrap. You only need a few lines of HTML, CSS, and one line of JavaScript. In this post, I will show how you can create an alert box similar to Bootstrap but without using any framework. You’ll also get a close icon on the right side of each alert and the alert box will disappear once you click the icon. Let’s get started. Alert components using only HTML, CSS & JavaScript Before I give you the same code, see all the alert components below. […]
Read More →