In this post, you’ll see how to create a mobile responsive & equal-width 3-column layout in HTML & CSS. Also, you’ll learn how to do it in three different ways such as CSS flexbox, grid & float. End of this post, I will give my opinion about the best method that you should use. I will also give you the source code of the column layouts. End of the post, you’ll also find my GitHub repository URL to clone the entire template. See the live preview of what we are going to build in this post. Some of you may […]
Read More →This post shows how to create a back-to-top button that redirects to the top of the page. I used only HTML, CSS & JavaScript. You can also download the template from my GitHub account. Please see the demo of the finished product. HTML You can download the top-arrow.svg from this link. I have this icon in an “img” folder. If your project setup is different than mine, don’t forget to update the file/image path in the HTML. Let’s see the CSS below. CSS The active class is added to the anchor tag by JavaScript. It also removes the class if […]
Read More →
This post shows how to create an image hover animation effect using only CSS. Here I made 7 different examples you can 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 consectetur adipisicing elit. Eveniet totam molestias accusantium at hic atque corrupti labore, ducimus […]
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 to create different types of circles with CSS. How do you can create a circle border in CSS? Video explanation 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 →
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 projects. I used no CSS or JavaScript framework 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 eiusmod tempor incididunt ut […]
Read More →The default list items are vertically aligned in a list format. To make a horizontal list, you need to write some CSS. In this post, I will explain & show a couple of ways to create a horizontal list with CSS. Let’s get started. Different ways to create a horizontal list with CSS In these examples, you will see different CSS properties that can be used to make a horizontal list, such as display, flex, float, etc. Throughout this post, I will use the following HTML for the list items until I introduce a new markup. So keep that in […]
Read More →
CSS gradient border is a great opportunity to make your content stand out. Throughout my website, I used gradient borders that helped me to focus on important parts of a web page. And you can do the same using them. In this post, I will give you some examples of CSS gradient borders. Also, I will show how you can create your own border styles. Let’s get started. Examples of CSS gradient border From the examples listed below, you can copy-paste my CSS and change the color values exactly the way you want. Let’s see some of the cool gradient […]
Read More →
It’s easy to add borders to a table but making the table rounded is a bit trickier. Wood-made rounded tables are very common but it’s rare when it comes to making them with HTML & CSS. I used the “border-radius” property to make the rounded corners but it did not work. So I took a deep dive and come up with a couple of solutions to make a table rounded with CSS (not wood). In this post, I will show you a couple of ways to make rounded tables with CSS. Also, I will show you different types of rounded […]
Read More →You can rotate text, images, and other HTML elements using the CSS transition property. The transition has a “rotate” function that can make rotation an element clockwise or anticlockwise. In this post, I will try to make you understand the CSS rotate function in depth. And will give you some real examples. So you can take these ideas to implement on your project without much spending time on it. Let’s start. Rotate a text using CSS In order to rotate a text, your first instinct should be to give it a class or ID so you can target it easily […]
Read More →