Learn CSS3 From A - Z: RGBA and Gradients
In this series of articles, we will cover the key additions to CSS3. In the previous article, we learned about selectors in CSS3; and today we will look at backgrounds.
As a web developer, I am sure you know what RGB means. Red Green Blue. The three base colors that combine to give us all the other colors that we use in digital form. You can either define colors in hexadecimal format (#RRGGBB) or in numeric form - rgb(x,y,z). Thats nice, but what happens when you want to make an element see-through? In other words you want to drop the opacity of the element. One straight-forward solution to do that would be define the opacity property of the element.
Below is a screenshot of what we get when we use the opacity property.
Do you see the problem? Opacity sets the opacity value for an element and all of its children. This makes the text in the div also transparent - something we did not intend.
To resolve this problem, CSS3 has introduced a new method that allows you to define the Alpha-channel of a color. It sets the opacity value only for that specific declaration.
Below is the screenshot of the same example above but this time we have used the alpha transparency value instead of the opacity value.
Note: In the above example, I have set the color of the background using the rgba color model. It can be used anywhere that you are specifying the color. Another interesting use of this is when you have a caption over an image and you want the text to get highlighted when the user hovers the image, you can switch from setting the opacity to setting the alpha channel.
One of the aesthetically pleasing patterns to the eye is a gradient. Radial or linear, they can also be used to draw the user's attention to a particular area. Until some time ago, we had to use images if we wanted to have gradients on our site. The problems with that are evident, so I won't go into them. CSS3 resolved it by allowing us to create linear and radial gradients. If you need other types of gradients, then you will probably still have to use images.
Gradients are not the simplest of properties in CSS, but they are definitely one of the most attractive of them introduced in CSS3. There are several values that you need to specify and it will only worsen when you see radial gradients.
pos = the position of the first color, giving direction to the gradient
color1 = primary color
percentage1 = where the fade begins (%)
color2 = secondary color
percentage2 = where the fade begins (%)
Webkit browsers have a slightly different syntax, but they take the same parameters. Internet Explorer users, you will have to wait till your viewers move to IE 10 to be able to use this feature.
background: -webkit-gradient(linear, left top, left bottom, from(#768C6A), to(#91D6BC));
background: -o-gradient(#768C6A , #91D6BC);
Here is a screenshot of what the above code renders.
Similar to linear gradient, we can also render radial gradient on some browsers. So far, only Mozilla and Webkit browsers support radial gradients. Given the limited browser support, a lot of web developers chose to continue using images for radial gradients. The styles for radial gradient are quite tricky and I resort trial and error until I get what I want.
Below is the code to generate the radial gradient.
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#FF9D46), to(#F5EFC6));
So that covers the article on the RGBA color model and gradients in CSS3. While gradients might seem a little complicated, they are extremely useful for web development. The new color model also helps reduce markup and makes the code more semantic when you want to have slightly transparent backgrounds.