There are two main ways you can position text over an image. Such as: (1) Placing the text over the image using the CSS position property, (2) Creating a background image for the text. In this post, I will show you both ways to place the text over an image. Also, I will answer some of the related questions that you need to know. Let’s get started. How to place text with an image using the CSS position property? To demonstrate the purpose, I have the following HTML. Using the above HTML, my image and text look like the screenshot […]
Read More →In this post, I will show you a couple of examples to create space between flex items. Also, I will show you how to offset the space on mobile devices. Let’s get started. How to create space between flexbox items? To create space between flexbox items, you can use flex-basis which is very similar to the width property. As you see in the above screenshot, I have two items in the flexbox container. Before I write or explain any CSS, let’s see the HTML markup for the above layout. To create space between the items, I have flex-basis of 48% […]
Read More →In addition to the right-aligned images, you’ll also learn to align the image on the top-right, middle-right, and bottom-right corners. How do you align an image on the right side? When we refer to a right-aligned image, we generally mean to place it on the right-hand side and want the image to consume the full available height. But there are some cases in which you may also need to arrange the image on the top, middle, and bottom right. This is what I mentioned at the very beginning of this post. Let’s see how you can align an image to […]
Read More →To reverse columns on mobile or any other screens, you can use flexbox & its order property. If this does not make sense, I will show you now. But when actually do you need to reverse columns? I am happy to ask because this is exactly what I will show you now. Let’s imagine you have the following layout on a large device. As you see in the above screenshot, I have two rows. Each row contains two columns. Each of the right columns contains images. You will see this kind of layout a lot. Even you may have built […]
Read More →
There are hundreds of ways to create a preloader for your website. But in this post, I will show you how to create a gorgeous preload spinner only using HTML, CSS & a few lines of JavaScript. However, you can also convert/implement this preloader on WordPress websites. First, let’s see the live preview in the link below. In the live preview/example, the preloader loads for 3 seconds to show you. But on a real website, we want the preloader to disappear after the page finishes loading. And this time is not fixed or static. This DOM loading time is dynamic. […]
Read More →The background slider is useful when creating 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. I will also provide the source code at the […]
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 →Before you start, see the finished product below. Hover your mouse on the image below to see the final product we will build. Video explanation Change image on hover using CSS HTML It’s important to see my HTML markup before we write any CSS. So you will better understand how it’s working. As you see in the above HTML, I have a container div that has a CSS class of “change-img-hover.” I inserted images into two different divs so I can target them easily on my CSS. That means, I wrapped the two images in two divs that have classes […]
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 →