STYLE SHEETS

Creating Gradients for Individual Containers with PNG Images

Welcome to the final part of the series called “Using PNG images to build background effects.” This series teaches you how to combine the power of CSS with Microsoft’s proprietary graphic filter to build professional-looking gradients that can be applied to any element of a web page. These gradients will also be rendered correctly by most modern browsers.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

June 04, 2008

TABLE OF CONTENTS:

In accordance with the concepts that I deployed in the section that you just read, this final section of this article will be focused entirely on putting both the CSS class that I defined previously and the corresponding markup of a sample web page in the same file. In doing so, you’ll be able to see how these two fundamental pieces fit together, and how the respective gradients are included in the individual containers of the page.

That being said, pay attention to the signature of the following (X)HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Sample web page with PNG-based containers (cross-browser version)</title>

body{

padding: 0;

margin: 0;

background: #eee;

}

h1{

padding: 5px;

margin: 0;

font: bold 12px Arial, Helvetica, sans-serif;

color: #000;

}

h2{

padding: 7px 5px 8px 5px;

margin: 0;

background: #fc0;

font: bold 12px Arial, Helvetica, sans-serif;

color: #000;

}

font: normal 12px Arial, Helvetica, sans-serif;

color: #000;

}

#header{

width: 780px;

padding: 10px;

margin-left: auto;

margin-right: auto;

background: #fc0;

}

#navbar{

width: 780px;

padding: 10px;

margin-left: auto;

margin-right: auto;

background: #ffc;

}

#navbar ul{

list-style: none;

}

#navbar li{

display: inline;

padding-right: 4%;

}

#navbar a:link,#navbar a:visited{

font: normal 12px Arial, Helvetica, sans-serif;

color: #039;

text-decoration: none;

}

#navbar a:hover{

text-decoration: underline;

}

#mainwrapper{

clear: both;

width: 800px;

height: 100%;

margin-left: auto;

margin-right: auto;

overflow: hidden;

background: #fff;

}

#mainwrapper .leftcol{

position: relative;

float: left;

}

#mainwrapper .rightcol{

position: relative;

float: right;

}

#leftbar{

width: 180px;

padding: 10px;

}

#centerbar{

float: left;

width: 380px;

padding: 10px;

background: #fff;

}

#rightbar{

width: 180px;

padding: 10px;

}

#footer{

clear: both;

width: 780px;

padding: 10px;

margin-left: auto;

margin-right: auto;

background: #fc0;

}

.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');

}

</style>

</head>

<body>

<h1>This is the header section of the web page</h1>

<p>Contents for header section go here. Contents for header section go here. Contents for header section go here. Contents for header section go here.</p>

</div>

<h1>This is the navigation bar of the web page</h1>

<ul>

</ul>

</div>

<h2>Section title</h2>

<p>Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here.</p>

</div>

<h2>Section title</h2>

</div>

<h2>Section title</h2>

<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>

</div>

<h2>Section title</h2>

</div>

<h2>Section title</h2>

</div>

<h1>This is the footer section of the web page</h1>

<p>Contents for footer section go here. Contents for footer section go here. Contents for footer section go here. Contents for footer section go here. Contents for footer section go here.</p>

</div>

</body>

</html>

I coded the same three-column web document that I used in previous sections, which demonstrates how a few PNG-based gradients can be applied to its main individual containers. Besides, you should notice that in this particular case, I utilized the CSS hack discussed before to fix the problems that Internet Explorer 6 and below present when it comes to displaying transparent PNG images.

The result of this cross-browser PNG rendering process is clearly illustrated by the pair of screen captures below, so have a look at them, please:

The first image shows how the gradients of the respective web page containers are shown in IE 6, while the second one illustrates the same web document when displayed by Mozilla Firefox. Indeed, they look pretty similar.

I’m concluding this article on building web page gradients using PNG images with this last example. Of course, you’re completely free to use all of the code samples included here to improve your existing skills in working with PNG graphics in a true cross-browser manner.

Final thoughts

It’s really hard to believe, but this is the end of this series. How time flies, right? Hopefully this journey has been instructive, since you learned how to build professional-looking web page gradients that use only one transparent PNG image in conjunction with a solid background color.

The most difficult aspect of implementing this technique is the lack of direct support for alpha-based transparency in Internet Explorer 6 and below. But as you saw in this article series, this issue is relatively easy to address, in this case by way of Microsoft’s proprietary image filter.

See you in the next web development tutorial!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.