Learn CSS3 From A - Z: RGBA and Gradients

By Arpan Dhandhania

Introduction

Even though CSS3 is not supported on all browsers yet, many web developer have started to use some of the techniques that it provides. CSS3 has evolved into a technology which, when combined with HTML5 and JavaScript, may end up being a Flash-killer.

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.

RGBA

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.

background: rgb(222,43,91); opacity: 0.5;

Below is a screenshot of what we get when we use the opacity property.

ss_opacity.png

Click here to see a working example of the above code.

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.

background: rgba(222,43,91, 0.5);

Below is the screenshot of the same example above but this time we have used the alpha transparency value instead of the opacity value.

ss_alpha.png

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.

Gradients

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.

Linear Gradient
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.

background:-moz-linear-gradient(pos, color1 percentage1, color2 percentage2);
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: -moz-linear-gradient(top, #768C6A 0%, #91D6BC 100%);
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.

ss_linear.png

Click here to see a working example of the above code.

Radial Gradient
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.

ss_radial.png

Click here to see a working example of the above code.

Below is the code to generate the radial gradient.

background: -moz-radial-gradient(50% 50%, farthest-side, #FF9D46, #F5EFC6);
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#FF9D46), to(#F5EFC6));

Conclusion

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.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date