Is there a reason why Guil choses to use an RGBA value here for the box-shadow?

Thanks so much. Love all the quick responses from all the MODs.

Absolutely! It's what we're here for :)

Happy coding!

Erik

what is rgba? Why do we use it? what does alpha mean and why do we use alpha ?

Akhter,

As I mentioned previously, RGBA is a method of setting colors based on values provided for the amounts of Red, Green, and Blue that they have (between 0, meaning none, and 255, meaning full), as well as the Alpha value, which controls the opacity of the object that you're applying the color to.

As an example, to set the background color of a div to full, pure red, we would do the following in CSS:

div {
    background-color: rgb( 255, 0, 0 );
    /* ...whatever other CSS properties here... */
}

The above code means that we are using the RGB method (which targets the Red, Green, and Blue values of a color, in that order), setting the Red value to 255 (full), and the Green and Blue values both to 0 (none). Thus, the end result would be a div with a background color of pure Red. By default, this object would have 100% opacity, meaning it is completely opaque; we could not see through it at all.

Let's imagine that we want that same div, with a pure Red background, but that we want to overlay the div on top of an image on our page to give the image a semi-transparent red filter over the top of it. In that case, we could use RGBA to target our div's opacity and make it as semi-transparent as we want.

div {
    background-color: rgba( 255, 0, 0, 0.5 );
    /* ...whatever other CSS properties here... */
}

In our revised code, we are now using RGBA instead of plain old RGB. You'll notice that the RGB values are the exact same, but now there is a fourth value of 0.5. This is in the Alpha position of our RGBA, and can be a value between 0 (0% opacity, or "transparent") and 1 (100% opacity, or "opaque", which is the default opacity for elements). By setting the value equal to 0.5, we are saying that we want the object to have 50% opacity, meaning we will be able to see through it, but it will still be present and noticeable. This would achieve a semi-opaque red background for our div element, which we could then use as a red filter on something else, like we wanted.

Hope this helps to clarify a bit for you!

Erik