mobile menu trigger, icon

Blog

I write about Web Development, WordPress and Freelancing. But you may be not interested in all these topics. See the topics below that are interesting to you and you're curious to explore.

Gradient background color CSS

Gradient background CSS

In this post, I will give you some examples of gradient background colors and explain how you can make them yourself. You’ll learn how to use the background image and background color (semi-transparent) together where the color stays on top of the image. Last but not least, you’ll also learn how to implement a semi-transparent gradient background on top of a background image. You can check the live preview of the examples in the link below. Let’s get started. Gradient background color examples In this section, I will give you some examples and their CSS. After that, I will explain […]

Read More →

Unbold HTML (removing bold style from existing content)

Overwrite existing font-weight

In this post, I will show you how to unbold text on an HTML document. And this text could be a paragraph, heading, or part of them. You’ll also see how to do it only by editing an HTML file and also writing additional CSS. Let’s get started. How to unbold text in HTML documents The font-weight CSS property is responsible for making certain text bold, bolder, lighter, normal, etc. Aside from these values (normal, bold, lighter, etc), the font-weight property also accepts numeric values such as 100, 300, 700, etc. However, these numeric values also depend on the font […]

Read More →

How to wrap text around an image in HTML?

Wrap text around an image using HTML & CSS

In this post, I will show you to wrap text around an image. You’ll also learn different versions of this wrapping. Such as wrapping the image from the top-right-bottom, top-left-bottom, top-right, bottom-left, etc. Last but not least, you’ll also learn how to fix/optimize the layout for mobile. Because you don’t want this wrapping or floating alignment on mobile, right? I will use HTML & CSS to demonstrate all the examples but you can implement the same concept on other technologies such as WordPress, AMP, etc. You can check the demo of all the examples that I will create in the […]

Read More →

How to highlight (mark) text in HTML & CSS?

Highlight text HTML CSS

In this post, you’ll see how to highlight text in HTML & CSS. I will show you two versions of it. One is only using HTML <mark> tag and the other is the combination of <mark> tag & CSS. You can check the live preview of the two versions in the link below. Let’s get started. Highlighting text in HTML To highlight text in HTML, you have to wrap the words with the <mark> tag. You don’t even need to write any CSS for it. Most web browsers will automatically highlight the texts using a yellow background color (as you […]

Read More →

Rounded button CSS examples

Rounded button html css

You can create numerous button styles using CSS. This post will show you how to make a rounded button with minimum CSS. Also, you’ll see how to implement different sizes of corners (border-radius) for the same button. You can check the live demos in the link below. Let’s get started. Examples of rounded buttons Here I will give you the HTML & CSS for the buttons that you saw in the live preview. HTML CSS How to make rounded corners? In the above CSS, you saw that I used border-radius on every button. This is the CSS property that can […]

Read More →

Button border examples & their CSS (including gradient)

Button border examples HTML CSS

In this post, I will give you a couple of button border examples including gradient border. I will also include the HTML & CSS for those buttons so you can easily implement them on your projects. You can also check the finished buttons in the link below. Let’s get started. Button border examples For all the buttons, I have simple button tags and different CSS class names as you see below. HTML CSS Conclusion I gave you many examples of the button borders along with their HTML & CSS. You can also download the whole button template (as you saw […]

Read More →

How to create an image button in HTML?

Image button HTML CSS

This post will show you how to insert an image inside the button tag. Also, you’ll see different versions of it. Such as image & text (side by side) inside the button, button background image, positioning of the button text over the image, etc. You can check the live previews of the examples in the link below. Did you find your desired example in the live preview? Let’s get started. Insert an image inside the button I have excluded basic styles such as colors, font, border, etc from this post. This is just to make this post & concise. If […]

Read More →

Vertically & horizontally center elements using display flex

Center alignment with CSS Flexbox

In this post, I will show you how to center elements both vertically & horizontally using CSS Flexbox. Also, I will give multiple examples to solve problems in different scenarios. Before you start, please check the live demo of the examples that you’ll build. Let’s get started. Centering elements using Flexbox (both vertical & horizontal directions As mentioned earlier, I will give you multiple examples so you can solve problems in any circumstance. Let’s check them one by one. Example 1: Center alignment a collection of items that are stacked one after another As you see in the screenshot above, […]

Read More →

How to center align HTML elements using absolute position?

Center alignment with CSS positioning

The position: absolute can’t work alone. Because the absolutely positioned element also needs to position itself compared to a certain (another) element. And this is where the position: relative comes into play. But if you do not specify the relative position, then it (absolutely position element) will consider its nearest container (ancestor) element as the relative. You can learn more about how the CSS position works in another post. In this post, I will show how you can perfectly center-align HTML elements using absolute position. After reading this post, you’ll be able to center align any elements both horizontally & […]

Read More →

How to center a link in HTML & CSS?

Center a link horizontally & vertically

The link or anchor tag is an inline-level element (not block-level). So it may not be always center aligned only by assigning text-align to the center. In this post, I will show you how to perfectly center a link or anchor tag both in horizontal & vertical directions. See the demo of the all examples in the link below. Let’s get started. Centering a link horizontally To demonstrate the purpose, I have the following HTML. To center align the above link (anchor tag), you can change its element level from inline to block and align it to center (as you […]

Read More →