Scopped CSS
Scopped CSS has been a hot topic in front-end development. It is designed to give you tighter control over your styles and how they interact with each other. The @scope at-rule # The @scope root...
Improving performance of a WordPress site (1): Getting ready
Performance is important. Performance will keep people coming back to your site. Performance is very hard to get right, specially for mobile devices. I'm particularly interested in seeing how my blog...
Creating color palettes with color-mix()
Since color-mix() is now available in all browsers we can revisit what it is, how it works and one possible use in creating a customizable color palette. What is color-mix() # The color-mix() function...
Using cascade layers
The @layer at-rule manages CSS cascade layers, a way for authors to control specificity and order of appearance. This is important because those are two determining factors a browser considers when...
Using Gradients with border-image
Thanks to Kevin Powell and his video for showing me how to do a trick that has always intrigued me. The idea is that we have a border color that fades to transparent or invisible. This will take two...
Color Interpolation and Hue Interpolation
While I was researching gradients, I came across a couple of interesting features introduced in the CSS Color Level 4 specification You can specify the color you want the gradient to run on. This is...
Does the color space we use affect how gradients look?
When gradients were first introduced we only had hex and rgb/rgba colors for monitors that only worked on the sRGB color space so the gradients would look the same in all monitors. With the...
Repeating gradients
linear-gradient(), radial-gradient(), and conic-gradient() don't automatically repeat color stops. However, there are functions taht...
Working With Conical gradients
Conical gradients can do different things than linear gradients but, from my perspective, they are harder to work with (or it may be I have a harder time reasoning through them). The conic gradients...
Working with radial gradients
Radial gradients radiate out from a central point that you control. The first example is a gradient between two colors. The default position for the gradient is 50% 50%, at the center of the...