Скачать или смотреть Coding for Beginners: Recap#32—Additional Color Spaces—RGBA, Opacity and HSL/HSLA

Coding for Beginners: Week 32 Recap: Additional Color Spaces—RGBA, Opacity and HSL/HSLA

Last week, we went over the RGB color system. RGB represents the colors red, green, and blue. It is an additive color model. The values of red, green, and blue are expressed as numbers between 0 and 255.

This week we will go over the RGBA color system. The "A" in RGBA stands for the alpha channel. The alpha channel indicates the opacity. So the value of 1 for the alpha channel represents full opacity or 100% while the value of 0 represents full transparency or 0%.

Previously, we showed that the "A" of the RGBA color space is for controlling opacity. Does this mean that if you do not want full opacity that you have to use the RGBA color space?

No, because there is a separate opacity property. For the opacity property, the value of 1 is full opacity and the value of 0 is full transparency. The default value for opacity is 1 so if it is not defined the browser assumes you want the color displayed at full opacity.

The main difference is that when using the opacity property to add transparency to an element's background, all the child elements will also become transparent as well. If you do not wish the child elements to also have the transparency applied, then using the RGBA color space would be preferred.

The last color space we will discuss is the HSL and HSLA systems. It was introduced as an alternative way to specify colors around the time CSS3 was launched.

HSLA stands for "hue," "saturation," "lightness," and "alpha." Hue is expressed as an angle between 0 and 360 since it is often represented as a color circle. The angle corresponds to a color. Saturation is the amount of gray in a color and is represented by a percentage: 0% is a shade of gray while 100% is full color saturation. Lightness is the amount of white (lightness) or black (darkness) in a color as represented by a percentage: 0% lightness is black, 100% lightness is white, and 50% is normal. It is also referred to as luminosity. It differs from brightness which is only the addition of black. Finally, alpha represents transparency as described previously and is expressed as a number between 0.0 and 1.0, where 0.5 would represent 50% transparency.

Jumpstart Your Learning of HTML and CSS is now LIVE! If you’ve been enjoying The Daily Code Snippet and want to accelerate your learning of HTML and CSS, be sure to check out this workshop: http://get.designerslearncode.com/jum...

In this coding bootcamp, you will not only learn about code but also have hand’s on practical and by the end of the course, you will have coded your first web page. This course is suitable for beginners as we go over the basics. The course does touch upon topics that may be more familiar to those who are designers. This may be helpful to those who want to learn how to create websites with design in mind.