Custom properties have been a pretty big deal for us, who use regularly. Many of us are probably starting to use them quite a bit, especially as part of a color or theming system. They really work great for this. But what about when we need alpha transparency for a color set with a custom property? Well, in this post, I’ll show you how it works. Alright, let’s check it out! CSS https://youtu.be/RduB0gmxsxM?embedable=true Here, in this example, we have this title. Currently, it’s just using the color red to give it its color. h1 {
    color: red;
} Creating and Using a Basic CSS Custom Property for a Color Value Let’s say we’re converting over to use custom properties for our colors in order to make it easier to change the overall theme when needed. In our theme, red will be our primary color, so in our element, we’ll create a custom property called “primary.” html html {
    --primary: red;
} Now, we’ll switch our to use this primary custom property. h1 h1 {
    color: var(--primary);
} There we go. Now, what if we need to use this custom property with the color function so that we can change the opacity? Can this be done? Well, let’s find out. Let’s wrap our custom property in the color function. rgba() rgba() h1 {
    color: rgba(var(--primary));
} Ugh, bummer, it looks like that doesn’t work for us. Using the CSS rgba() Color Function With a Custom Property The good news is that it is possible though. We can actually use custom properties with the color function if the property is set to an value. So, this means we just need to add a custom property that is set to the value of red. rgba() rgb rgb Let’s add a new property called “primary-rgb”. And we’ll set it to two fifty-five, zero, zero. html {
    ...
    --primary-rgb: 255, 0, 0;
} Now, let’s add another header to make them easier to compare. <div>
    <h1>Change My Color</h1>
    <h1>I'm Using RGBA</h1>
</div> And, on our second header, we’ll use the color function, then inside, we’ll use our new primary custom property, and let’s give it an alpha value of point five. rgba() rgb h1:last-child {
    color: rgba(var(--primary-rgb), 0.5);
} And there we go; now it works. So, in order to use the color function with custom properties all we need to do is start with values. rgba() rgb Want to See It in Action? Check out the demo code and examples of these techniques in the Codepen example below. If you have any questions or thoughts, don’t hesitate to leave a comment. https://codepen.io/brianmtreese/pen/qBgoapN?embedable=true Also published . here

The best videos on the Internet archived and shared on HackerNoon.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Alpha Transparency in CSS Custom Properties

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

3 Contemporary CSS Techniques for Centering Items

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

3 Contemporary CSS Techniques for Centering Items

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps