Gradient Colored Border

Here is a neat effect using Cascade Style Sheets 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. As you may have surmised, the page will be written entirely using css coding. Don't let this deter you as the construction of the page is really quite simple and the effect is worth the effort.

Page Construction

The first step is to create the basic outline for our page which has five components.

Style section where the style coding is located
The body section
Main page division
Side bar
Content

<style>

body
#main
#sidebar
#content

body

{
background-color:#191927;
color:#8FBC8F;
font-size:18px
}

#main

{
width:100%;
}

#sidebar

{
position:fixed;position:fixed; is the key to the code!!!
left:0;top:0;
}

The next step is to create a class to hold the coding necessary to produce the gradient effect. This is a good place to insert the coding. Then the sidebar div will reference this class to display it. A height of 1320px was chosen to accommodate the various screen resolutions.

.css3gradient1

{
width:80px;height:1320px;
background-color:#ee82ee;
background:linear-gradient(90deg, #191927 0%, #ee82ee 50%,#ee82ee 50%,#191927 100%)
}

Notice that there is only one class required with two colors but four color stops to achieve the tubular effect. When using an angle, 0deg creates a vertical gradient running bottom to top, 90deg creates a horizontal gradient running left to right, and so on in a clockwise direction. Negative angles run in the counterclockwise direction.

#content

{
margin:auto;this centers data in the content div
width:1050px;
box-sizing:border-box;width set is absolute
padding: 15px;
text-align:justify;this aligns text ala 'newspaper style'
margin-left: 120;
}

</style>

Colors

The color for the for the tubular effect can be any of your choosing but the start and end of the gradient color code and the body color must the same color to produce the proper border effect. The Professor's Color List is good place to choose your colors from. You can vary the background color and check various text colors.

The Code

<!DOCTYPE HTML>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<style>
the style elements
<style>
</head>
<body>
<div id="main">
<div id="sidebar" class="css3gradient1"
</div>
<div id="content" Your page content goes here
</div>
</div>
</body>
</html>

It is important that the order of the opening divs and the closing divs be followed to create the desired effect. Now lets construct a page using an image for the Sidebar.

Image Bordered Sidebar