HTML & CSS

There are several ways to center text inside a div element, but CSS Flexbox may be the most convenient approach. What you need to do is to style the div element like this: Complte Example Screenshot:…

The example below shows you how to create a simple responsive layout with a CSS grid. We will use the repeat() function and the auto-fill keyword to get the job done. There’s no need to use…

A few examples of creating gradient text in CSS. Example 1: Linear-gradient text. Screenshot: The code: Example 2: Radial-gradient Text Screenshot: The code: Example 3: Repeating-linear-gradient Text Screenshot: The code: Final Words We’ve gone through some…

For WebKit browsers (Google Chrome, Microsoft Edge, Safari, etc), you can customize the style of a scrollbar such as background color, width, thumb, tract… by using pure CSS. Example Preview: The Code: That’s it. Happy coding!

This article walks you through a couple of different examples of styling the placeholder text of an input/textarea field by using the ::placeholder pseudo-element in CSS. Example 1 In most browsers, placeholder text is light grey…

This article shows you a couple of different ways to increase or decrease the space between text and underline when using text-decoration: underline in CSS. Using text-underline-offset property The text-underline-offset property is used to set the…

This article walks you through a couple of different examples of using @keyframes to create animation in CSS. The Moving Box This example will create a box that moves in a rectangular orbit. Besides the change…

This article walks you through a few examples of creating a circle button in CSS. Our strategy is to make a square button then set the border radius to be equal to at least a half…

This is a short and straight-to-the-point guide on how to make a search filed with a magnifying glass icon inside from scratch without using any third-party library. Here’s what you’ll see at the end: Getting Started…