In this post, I will show you a couple of cards that I made with HTML & CSS. You can use any of the card CSS or designs that you like. Let’s explore them one by one. Example 1: simple card design with HTML CSS In this example, I have an image on top, a card title, a description & a link/button. This card also has some other hover styles that you’ll find on the live demo. See its HTML & CSS below. HTML Don’t forget to replace the image path. CSS Example 2: card with list items & two […]
Read More →
The background slider is very useful when you want to create a hero section on your web page. You can create a slider with background images in many different ways. Such as using slider plugins, jQuery libraries, frameworks, etc. However, in this post, I will show you how to create a background slider only using HTML, CSS & JavaScript. To create this slider, I did not use any dependencies. So you do not need any plugins, JavaScript libraries, or any help from 3rd party sources. See the live preview of the slider in the link below. End of this post, […]
Read More →
The <hr> is an HTML tag that stands for “Horizontal Rule.” To change the hr color, you need to write some CSS. By default, it gets style from the browser. In this post, I will show you how to change <hr> tag color, how to add a gradient border to it, and how to increase its thickness. Let’s get started. How to style the <hr> tag using CSS? There are various ways you can make a custom style for this <hr> tag. See a couple of them below. Change the color of the hr tag Lorem ipsum dolor sit amet […]
Read More →You can change an image on CSS hover. In this example, I will do it in a two-step process. In the first step, I will place an image over another. Finally, in the second step, I will use the hover event & opacity property to hide & show the image. Hover your mouse on the image below to see the final product we are going to build. Let’s see how you can change the images on hover. Change image on hover using CSS Step 1: stack/place an image over another It’s important to see my HTML markup before we write […]
Read More →
This post will show you how to create a testimonial slider using only HTML, CSS & Javascript. The full source is available to download. So you can upload this slider to your own projects. A few keynotes about this slider: Before we dive in, let’s see the testimonial slider in action. So you’ll know what to expect. Create the testimonial slider step by step 1 / 3 Aspernatur modi quisquam autem illo sapiente reprehenderit. Tpsume dolor sit amet consectetur adipisicing elit. Consectetur voluptates sit consequuntur quasi eum veniam earum enim nam vitae dolore praesentium minima commodi. Voluptates sit consequuntur sit […]
Read More →
To create an HTML navigation bar, you also need a few lines of CSS to make it attractive. However, this post will give you a couple of navigation bars to choose from. Also, I will link to other posts that will show you how to make the navigation bar responsive. These are the examples that I used on many projects and you can use them too. Let’s get started. Create navigation bars using only HTML & CSS Before creating any navigation menu, wrap them in a <nav> tag. This is the best practice and helpful for SEO because the search […]
Read More →
To add a border in the HTML table, target the <td> tag in your CSS and assign a border value for it. See the following CSS below. I have the following HTML for the table. With the above one line of CSS, my table looks like the following: Column 1 Column 2 Column 3 Column 4 Apple Bicycle Carrot Dog Elephant Fire Giraffe House Ice Jelly Kite Lemon In the above table, you see that there is a little gap between cells. This gap is coming from the web browser. To get around this default gap, specify the border-spacing for […]
Read More →
To create multiple-color text, you need to write CSS for the different parts of the text. In this post, I will show you how to use multi-color in a sentence & word. This is the technique I used on many websites that helped me to make attention-grabbing content. Let’s see how you can do that. How to create multicolor text in HTML CSS? You can use two main different ways to implement multiple colors in a single sentence or word. One is a gradient color and the other one is a simple color property. Together we will explore all the […]
Read More →
You can make a <div> scrollable using the CSS overflow property. The overflow can be used in two directions such as X & Y (horizontal & vertical). In this post, I will show you how to make a scrollable <div> vertically & horizontally, and both. How to make to div vertically scrollable? To make a <div> vertically scrollable, use the overflow-y CSS property and specify its value to scroll. First, see the example below and then I will give you the HTML & CSS for it. Example: vertical scrolling div Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat corporis […]
Read More →
Using the “title” attribute, you can show a mouse hover text in your HTML document. Sometimes it’s known as a tooltip, mouseover & help text. Once you hover your mouse over a certain text or link or button, a piece of additional information pops up. And it disappears after you leave your mouse. This is something that I will show you in this post. However, the title attribute has a default style. But you can add a custom style to the tooltip using HTML data-attribute and some additional CSS. See an example of a custom tooltip below: Hover on me […]
Read More →