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.
|More from 1 Thing A Week|
|« I built a simple routing framework for PHP called Wayfinder||5 CodePens that show what can be achieved with just CSS||My WWDC 2022 wish list||Now that we have container queries, can we get native parallax scrolling please? »|