{"id":247229,"date":"2016-11-10T06:09:08","date_gmt":"2016-11-10T13:09:08","guid":{"rendered":"http:\/\/css-tricks.com\/?p=247229"},"modified":"2016-11-10T06:09:08","modified_gmt":"2016-11-10T13:09:08","slug":"the-power-of-rgba","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-power-of-rgba\/","title":{"rendered":"The Power of the rgba() Color Function in CSS"},"content":{"rendered":"

One of the things that I’m really interested in about CSS is the new color-mod<\/a> function<\/a>. It will give us the ability to do color manipulations right in the browser. For example, when hovering over a button, you can change the color by using something like color: color(black darkness(50%));<\/code>, without the use of any CSS preprocessor like Sass.<\/p>\n

But as the support of these CSS color functions is zero nowadays, we can temporarily<\/a> use PostCSS and compile them as regular colors. Or we can experiment and discover the power of CSS rgba()<\/code> color functions to change colors on the fly! Let’s see how we can use it.<\/p>\n

<\/p>\n

How it works<\/h3>\n
\"basic<\/figure>\n

In a design app, when we place a black and white boxes over a bigger box with a blue background color (As in the example), the result will be a lighter and darker blue, respectively. <\/p>\n

That’s because when decreasing the opacity, the colors will blend together based on if it’s white or black. Can you expect what will happen if we changed the blue background to green? You guessed it! <\/p>\n

\"Basic<\/figure>\n

As you see, by changing the background color to green, the small boxes looks different now! We have light and dark green. We also can change the opacity value to pick a darker or lighter color. Let’s work off this basic premise to dive into some real-world examples.<\/p>\n

Applying the concept<\/h3>\n

To keep the above example concise, we played with the opacity. In our actual design, we will need to use rgba()<\/code> alpha value.<\/p>\n

.header {\r\n  background: rgba(0, 0, 0, 0.5); \/* Black color with 50% alpha\/opacity *\/\r\n}<\/code><\/pre>\n
We’ll use the background instead of opacity here because if we used the opacity value, all of the child elements will be affected, which is not what we want to achieve. If we use the alpha channel of the background property, we’re ensured that we’ll only update the element that we’d like to change.<\/p>\n
Note: in the demos we will use Sass rgba()<\/code> function to make things faster. For example:<\/p>\n
.elem {\r\n  background: rgba(white, 0.5);\r\n}<\/code><\/pre>\n
will be translated to:<\/p>\n
.elem {\r\n  background: rgba(255, 255, 255, 0.5);\r\n}<\/code><\/pre>\n
Theming a website header<\/h4>\n
The first use case for rgba()<\/code> is to theme a web app header. In Trello<\/a> they are using a background color with rgba()<\/code> for the header child elements (logo, search input, buttons):<\/p>\n
.search {\r\n  background: rgba(255, 255, 255, 0.5); \/* White with 50% alpha *\/\r\n}<\/code><\/pre>\n
\"Trello<\/figure>\n
With that in place, we will get the ability to theme the header by only changing its background, and then the child elements will change as well. <\/p>\n
In our example, we will make something similar of Trello header and play with the background from dev tools.<\/p>\n
\"Trello<\/figure>\n
Notice how the child elements background color is different in the 2 headers. If we want to inspect element and change the parent background, we can theme our header very easily.<\/p>\n
\"Theming<\/figure>\n
See the Pen Header<\/a> by Ahmad Shadeed (@shadeed<\/a>) on CodePen<\/a>.<\/p>\n