Week 189 was posted by Charanjit Chana on 2021-06-07.
For most of my career in web development, I've been happy using hexadecimal values for colours and rgba values when I've needed transparency.
Below is an example I put together on Codepen of the different values you can use today in most browsers along with some of the lesser known (and supported) values.
In the examples where I've specified opacity, rather than alpha, you can set the opacity of colours which can be really useful in some cases.
The example I've seen recently is with CSS variables where you can set your value as three comma separated values:
--myColor: 123, 123, 123
And then you're free to use it and apply opacity or the alpha value as required:
color: rgba(var(--myColor), 0.5)
This is great for things where setting the opacity itself would cause the entire element to become semi-transparent, rather than just the colour of it. Another great use for this is with CSS gradients:
background-image: linear-gradient(to left, rgb(var(--myColor), rgba(--myColor), 0.5));
When I have some time, I'll convert SkeletonCSS to work this way to bring just that little bit more flexibility to the project.
Tags: css