- Feb 28, 2010
- 25 Comments
- Tutorials
Flexible Color Schemes in Layouts with RGBa
This will be an experiment in transparency. CSS has come a long way over the years, and one of the biggest advancements is the integrated use of transparency. A few years back, transparency in web design was a compatibility nightmare, and involved a messy combination of images and alignment.
We’re spoiled today with the introduction and adoption of the CSS3 spec and widespread PNG compatibility. Today’s tutorial will take advantage of this by exploring one of these newer attributes in action.
The Goal
By the end of this tutorial, you’ll have the means to build a page layout (like the demo) that can be updated by simply changing the background. Using varying levels of transparent white and black backgrounds, we can achieve a monochromatic layout based off the background’s color value. To put it another way, all color is relative to the background and can be changed by a single value.
I’ve attached a color switching panel into the version below for demonstration purposes. It is simply responsible for updating the body’s background attribute with each color. Go ahead and give it a try now.
A Brief Intro to Web Color
Before we get started, let’s refresh with a quick primer of color in CSS. In most cases, colors are designated using either hexadecimal value or RGB triplet within the CSS stylesheet.
In RGB, colors are specified using three distinct values between 0 and 255. These values represent the amount of red, green, and blue respectively. While both methods are usable, most modern web designers choose to use hexadecimal values instead. In this system, the values are given as a single six digit code.
Both of the styles below would end up with a color red:
|
1 2 3 4 5 |
/* Red with RGB */ .rgb-red{color: rgb(255, 0, 0);} /* Red with hexadecimal */ .hex-red{color: #A90000;} |
This has been the basis for color selection in web design for the past decade or so. But somewhere along the line, people realized that it might be good to include another option to web color. That’s where RGBa comes in.
Transparency with RGBa
RGBa is an expansion on the RGB attribute for CSS. Just like the RGB attribute, the first three values are used to specify color. The difference is an additional value. The fourth number in a RGBa set is used to specify the alpha (transparency) of the color. If we wanted to see the background image through a block of content, we could use an RGBa attribute to make the content’s background semi-transparent:
|
1 |
.content{background: rgba(255, 255, 255, .5);} |
You’ll notice that the alpha value operates on a 0 to 1 scale, where 0 is completely invisible. Decimals are completely acceptable. The code above represents a white background with 50% transparency.
Varying a Base Color
Using a series of transparent blacks and whites, we’ll filter the background color into a variety of shades. The screenshot below demonstrates this concept in action. Keep in mind that this system allows an entire layout’s color to update with just one change. Now let’s put it in action.
A Basic Structure
To keep things simple, we’ll start with a simple layout of four boxes with varying shades of whites and blacks. Take note of the classes assigned to each div. The “box” class is the base style for each, while “dark”, “light”, etc all represent variations of the shades. You will get a better visualization once the CSS is applied in the next step.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Flexible Color Schemes with RGBa</title> </head> <body> <div class="box light"> <p>This is a light box</p> </div> <div class="box lighter"> <p>This is a lighter box</p> </div> <div class="box dark"> <p>This is a dark box</p> </div> <div class="box darker"> <p>This is a darker box</p> </div> </body> </html> |
Now that we’ve identified all the elements, we’re ready to put everything together with a stylesheet.
Styling with CSS
One of the main roles that CSS plays in this system is to apply transparency to each element. You will notice that after the body’s background color is initially declared, no colors beyond black and white are referenced. Add the styles below to your page:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* This is the basis for all page color */ body{background:#DEF088;} p{font-family:helvetica, arial, sans-serif; font-size:13px; padding:20px;} /* Generic box shadow & formatting */ .box{-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .25); -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.25); margin:10px auto;} /* Values for white base */ .light{background: rgba(255,255,255, .3); border:1px solid rgba(255,255,255,.45);} .lighter{background: rgba(255,255,255, .6); border:1px solid rgba(255,255,255,.45);} .light p{text-shadow:0px 1px 0px rgba(255,255,255, .5);} .lighter p{text-shadow:0px 1px 0px rgba(255,255,255, .7);} .light a, .lighter a{color: rgba(0, 0, 0, .9);} /* Values for black base */ .dark{background: rgba(0, 0, 0, .3); border:1px solid rgba(0, 0, 0,.2);} .darker{background: rgba(0, 0, 0, .6); border:1px solid rgba(0, 0, 0,.2);} .dark p{color:#FAFAFA; text-shadow:0px 1px 0px rgba(255,255,255, .2);} .darker p{color:#FAFAFA; text-shadow:0px 1px 0px rgba(255,255,255, .5);} .dark a, .darker a{color: rgba(255,255,255, .9);} |
On first glance, the stylesheet appears to be more complicated than it actually is. Many of the styles outlined in the code above are variations of the same core ideas. The “dark” class, for example, is only a few digits away from “darker”.
If you’ve done everything correctly, you should end up with something like this:
Using the concepts of this sample page, you can build entire page layouts like the demonstration available for download below. I highly recommend taking some time to go through the code there, as it is more applicable to the real world (and lengthier) than the cut and dry version here.
Wrapping Up & Moving Forward
You’ll notice that transparency can be applied to more than just solid background colors. In this tutorial’s example layout, I’ve applied varying levels of transparency to text, shadows, and borders. Since the background is the only source of color, any level of transparency will cause some of the background color to filter forward.
Is this a perfect way to put together colors? Of course not. The typical shadows and borders will not have as much impact when using darker shades (e.g. blacks) of colors. It does, however, demonstrate how using RGBa for elements can allow the design’s context to affect visuals. Think of it like blending layers in Photoshop.
Further Reading and Resources
For more on the topics covered in this post, be sure to check out the links listed below.
