The ::marker pseudo-element in CSS lets you style the markers of list items – bullets, numbers, or anything you set via content. No extra HTML or JavaScript needed. I use it regularly when the default bullet doesn’t fit the design, [...]
Designing the scrollbars of the browser has become popular lately, and I encounter many websites styling it differently, fitting their overall design and branding. There are several ways to design these scrollbars, and in this post, we’ll see how to [...]
Among the various features CSS offers, the repeat function stands out as a valuable tool for efficiently managing repetitive patterns in layouts and design elements.
The CSS Text Decoration Module Level 3 gives us several ways to style text decoration beyond the basic underline / line-through toggle. Browser support today sits above 94% globally, so these properties are safe to use in production. Properties like [...]
In CSS, it is not possible to perform animation or partial gradient changes using the transition property. In other words, the following transition won’t work: .gradient { min-height: 200px; background-image: linear-gradient( to right, hsl(49.68, 97.89%, 62.75%), hsl(200, 51.54%, 44.51%) ); [...]
If you are experiencing issues with the position: sticky feature in CSS, meaning it’s not working for you, the cause is usually one of the following. 1. The feature is not supported by your browser Before proceeding, make sure position: [...]
CSS Containment is a module that describes a CSS property called contain. This property allows developers to isolate a specific element’s subtree in the DOM and treat it as independent and separate from the rest of the elements in the [...]
If you’ve ever used Photoshop, you already know what blending modes do – they control how two layers combine their colors. CSS brings the same concept to the browser with two properties: mix-blend-mode and background-blend-mode. The mix-blend-mode property blends an [...]
The background-clip property allows us to control how far the background image (or background color) extends beyond the Padding or the content itself of an element. I assume that this explanation is challenging to understand without some examples and a [...]
This is a short post describing how to create a separator line with an element in the middle, like a kind of divider with text or an image when there is the same separator line to the left and right [...]