Gradient Creation with the HR Element
(Page 1 of 5 )
Gradient can mean many things, depending on the subject. Here, I am talking about the gradient you see in pictures, images, web pages and works of desktop publishing. When you see an image where a line is slowly changing color as your eye moves from one position to another, that area of the image is a gradient. This article will go over implementing gradients with the HR element.
The following figure gives eight examples of gradients.
Fig.1 Different Gradients
Pixel
The pixel is the smallest dot that can be displayed on a computer screen (monitor). Consider it the smallest square that can be shown on the screen. It can have a color (red, purple, yellow, green, etc.). The pixel is denoted by px in CSS.
For the rest of this article, I will assume that you have a basic knowledge of HTML, CSS, and JavaScript.
Colors
An ideal gradient is made up of unidentifiable lines whose colors change from one position to another. If you do not understand the basics of color composition and how it is represented in HTML, then see one of my previous articles, which is called "Color Composition and HTML." You do not need to be good in physics or engineering to understand either that article or this one; all you need is basic knowledge of HTML, CSS, and JavaScript.
The HR Element
The HR element is meant for drawing lines on a web page.
The basic tag used to draw a line is <hr>.
If you type this in the body of an HTML file, you should see a line when the file is opened. You give dimensions to the line using Cascading Style Sheets. The following code produces a line of width: 500px and height: 10px, with a blue color.
<html>
<head>
<style type="text/css">
hr {width:500px; height:10px; color:blue}
</style>
</head>
<body>
<hr>
</body>
</html>
You can have lines with different dimensions (e.g. of width:500px and height:10px, also of 400px by 5px, 1px by 1px in rectangles).
Drawing Gradients
The secret to drawing gradients using the HR element is to draw consecutive lines (no space between them) whose colors change slowly from one position to another.
Positioning
We shall use absolute positioning when drawing the lines. With absolute positioning, the top-left corner of the client area of your web page has the coordinates 0px, 0px and the measurement starts from there. Going to the right of the client area makes the x-coordinate more positive and going down makes the y coordinate more positive. So the HR syntax in the Style Sheet of this article will always begin with...
hr {position:absolute ...
Next: Horizontal Gradient >>
More HTML Articles
More By Chrysanthus Forcha
/ 3 
