vspacer
<-
vspacer
<-
vspacer
<-
vspacer
vspacer

Gradient Colored Borders

Here is a neat effect that can be used to enhance your web pages. The PC browser that does not support CSS3 Gradient Color will only see the background color that you have selected for the border and not the Grad Color effect.

The arrows that you see on the left point to Grad Color border that you will be making.

As pointed out in The Basic Table Structure a <td> cell will first expand horizontally to the width specified and then vertically to accomodate the data entered.

For this reason, height is not specified in the <td> cells that contain the Grad Color Codes or in the <td> cell that contains the body of your web page. However the height of the Grad Color Class must be specified to the depth of the body of your document to achieve the proper visual effect.

You will notice that the alt code &nbsp;, which will produce a space equal to one tap of the key board, has been used in the Grad Table <td> cells. This is neccessary so that these cells will not collapse as each cell MUST contain some data.


Page Construction

As you may have surmised, the page will be written entirely in Tables. Don't let this scare you as the construction of the page is really quite simple and the effect is worth the effort.

The first step is to create the coding necessary to produce the gradient effect. AS this is done with CSS( Cascade Style Sheets), it will be necessary to create a Style Section in the head of you HTML document like this with the css codes between the style tags.
<style type="text/css">
.css3gradient1{width:40px;height:1950;
background-color:#ee82ee;
background-image:linear-gradient(left, #191927 0%, #ee82ee 50%,#ee82ee 50%,#191927 100%);
background-image:-webkit-linear-gradient(left, #191927 0%, #ee82ee 50%,#ee82ee 50%,#191927 100%);
background-image:-ms-linear-gradient(left, #191927 0%, #ee82ee 50%,#ee82ee 50%,#191927 100%);
}
</style>
Notice that there is only one class required with two colors but four color stops to achieve the tubular effect.The class contains three lines of code, one for I.E., one for Chrome and one for Safari. Other browser types are not accommodated here. Each class contains the width and height of the gradient. The height will be determined by the depth of the document's body which can be entered when the document is finished. In this case it is 1950.

The next step is to create a CSS Division to display the codes created and will be displayed in the table contained within the body section below

Then what we are going to do is to construct a table that has 3 <td> cells. The first cell will contain the Grad Color Codes. The 2nd cell will act as a spacer to move the body of your page to the right of the border by the number of pixels specfied by the width of this cell. The 3rd cell is where you will write and display all of your page coding. Pretty simple huh!!

Colors

The color for the border can be any of your choosing but the start and end of the gradient color code and the body color should the same color to produce the proper border effect. This Netscape Color Chart is good place to pick your colors from. The Professor's Color List is another place you might want to visit.

The Code

<body bgcolor="#191927" text="#8FBC8F" link="#ee82ee" vlink="#ee82ee">
<div align="center">
<table width="960" cellpadding="0" cellspacing="0" border="0">
<tr><td width="80" valign="top"><div class="css3gradient1"></div></td>
<td width="20">&nbsp;</td>
<td width="860" valign="top">
Page Coding goes here
</td></tr></table>
</div>
</body>

It is imperative that the sum of the <td> widths add up to <table> width.

Now let's have a look at Part Two of Grad Colored Borders and this time we will use a Textured Background.


Part II
HTML Hit Counter
home