Creating Gradients for Individual Containers with PNG Images - Styling individual containers of a web document
(Page 3 of 4 )
If you think that applying PNG gradients to all of the <h2> elements in the prior web page is a no-brainer process, then you’ll probably find that styling its respective containers is even easier to grasp, since this procedure is reduced to using the same CSS hack that you learned earlier, and then defining a brand new CSS class that will be tasked with decorating these containers.
Now let me show you the definition of a brand new CSS class, which I’ll use later to style the corresponding containers of the previous sample web page.
Here’s how this CSS class looks; pay close attention to its definition:
.contbox{
padding: 10px;
margin-bottom: 10px;
background: #fff url(bg.png) left top repeat-x;
border: 1px solid #ccc;
}
/* use the * html CSS hack to render an alpha-based transparent background */
* html .contbox{
padding: 10px;
margin-bottom: 10px;
height: 100%;
background: #fff;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png',
sizingMethod='scale');
}
In this particular case, I created a brand new CSS class, called “contbox,” whose primary function is to style all of the individual containers included in the sample web page that you saw with previous examples. It’s clear that I used the same CSS hack that was applied on prior occasions to display the pertinent PNG background images in a consistent way across different browsers, including Internet Explorer.
That was very simple to understand, right? Essentially, all that I did was define a specific CSS class that will be responsible for adding fancy gradients to several containers of a web page by using a single transparent PNG graphic. Again, I’d like to highlight the advantages of using this approach, since those gradients are constructed by combining a unique PNG image that fades smoothly to transparency, and a solid background color.
So far, so good. Having already showed you how to define a simple CSS class aimed at decorating the respective containers of the previous sample web page, the next thing that I’m going to do will consist of linking this CSS class to the corresponding structural markup. This will complete the demonstration of building eye-catching web page gradients using PNG images.
To see how all the pieces are put together, please read the last section of this tutorial. It’s only one click away.
Next: Styling individual containers for a given web page >>
More Style Sheets Articles
More By Alejandro Gervasio
