Gradient Colored BorderHere 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 ConstructionThe 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
- position:fixed;position:fixed; is the key to the code!!!
- 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.
- margin:auto;this centers data in the content div
- box-sizing:border-box;width set is absolute
- padding: 15px;
- text-align:justify;this aligns text ala 'newspaper style'
- margin-left: 120;
ColorsThe 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.
- <!DOCTYPE HTML>
- <html lang="en">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- the style elements
- <div id="main">
- <div id="sidebar" class="css3gradient1"
- <div id="content" Your page content goes here
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.