CSS3 Opacity and RGBA
The sample files for “CSS3 Opacity and RGBA” are in the folder called Opacity.html, in the Opacity folder in the samples folder. All associated files are in that folder.
Opacity and RGBA (Red, Green Blue and Alpha) are super fantabulous additions to the ever changing world of CSS, or CSS3. Who ever used Opacity and RGBA? Especially RGBA, or even RBG. Most of us people in the world of all things web have been using hex values like #09fa74 for decades now. Of course, these hex values are called hexadecimal values meaning that using the base 16 system, you can use the numbers and letters to represent 16.7 million colors, the number of colors the human eye can see.
Then, suddenly I started seeing RGB options being used on web pages. These values look like 255, 213, 67. I thought some web people were just being nice to print people that used to use Illustrator and Photoshop to create brochures.
Then there is the A for “Alpha.” Who would know that alpha actually means Opacity.
In this video we show examples, as basic as they may be, of how you can use CSS3 to do some really cool things and the things you can do are not hard to understand and thus, using Opacity and RGBA is pretty easy.
As a web person, how many times have you created a huge PNG file just for some text you wanted in the header, but you needed to see through the text to the background, so you pushed the limits with a 600k PNG image to make it happen? This is where using CSS3 can save you lots of download speed and development time.
In this video, complete with the download files you see posted above, we show you simple to see and use examples of how to use the code to make Opacity and RGBA happen.
As we make these CSS3 Animated menus happen, we want to make things fade in, or fade out. Or, we want some things just to be faded. With CSS3 Opacity and RGBA we can set any object, text, image, div or background to zero Opacity, and animate it to whatever visibility we desire. All with just a little bit of CSS3 Opacity and RGBA code knowledge.