Draw the horizon on a webpage

We start with a horizontal line spreading across the page like this:

Let’s call this line the horizon. The horizon spreads beyond the field of our vision. A horizontal line that spreads across a webpage is like the horizon in this sense.

The key for drawing a line on a webpage is to recognize a line as part of the box border. For horizontal lines, we can use the border-top CSS property.

Start with the following HTML code:

<div class="horizon__background">
  <div class="horizon"></div>
</div>

I follow the BEM convention of naming classes here.

The horizon class defines a horizontal line.

The horizon__background provides the background for the line and plays the role of positioning the line as we see below.

The CSS code looks like this:

.horizon {
  border-top: 1px solid white;
  width: 100%;
}
.horizon__background {
  background-color: grey;
  padding-bottom: 15%;
  padding-top: 15%;
}

Note that I adopt the convention of alphabetization for CSS coding. It saves time to code (you don’t have to think of what order CSS properties should be lined up in) and makes it easy to check whether and how a certain property is defined (imagin a paper-copy dictionary not alphabetized…that’s a nightmare).

The border-top defines the horizontal line. The border-bottom would work as well, but we go with the border-top throughout this exercise.

The line thickness is set to be 1px. We can of course thicken it. But in most cases it’s better to have lines as thin as possible. Even with the width of 1px, we can clearly see it as long as the color contrast to the background is stark enough. The primary role of lines on a website is to enhance the organization of information. Lines themselves will almost surely be of no information value. So we do not want them to stand out.

The line style is set to be solid. Of course we can change this to dashed or dotted. But such line style conveys its own meaning (impermanence, for example) and unless such meaning is necessary in the design of a website, we should go for a simple solid line.

The line color is set to be white while the background color is grey. This is another technique to avoid the conspicuous presence of a line. If we draw a black or grey line against the white background, we cannot avoid the line from standing out. We’re all used to drawing black lines with a pen or grey lines with a pencil. Thus, black or grey lines convey someone’s intention. They assert themselves. White lines, on the other hand, blend into the background.

The line width is set to be 100% so that it spreads across the webpage. Such a line suggests a horizon, the horizontal line that spreads beyond one’s field of vision.

The position of the horizontal line is controlled by padding-top and padding-bottom because padding can be set relative to the width of a parent element in CSS. The values of 15% means the line will be located 15% of the screen width below the top of, and above the bottom of, the background. So the aspect ratio is preserved no matter what devices are used.

Of course, these padding values can be changed to relocate the horizontal line. Following the rule of thirds in photography, we can go with

padding-bottom: 10%;
padding-top: 20%;

Then the horizontal line sits at one-third from the bottom:

If the line indicates the horizon, then this composition suggest the focus on the sky, rather than on the ground. Perhaps it’s a beautiful sunset.

If we instead set

padding-bottom: 20%;
padding-top: 10%;

then the horizon sits at one-third from the top:

This composition implies that the focus is on the ground, not on the sky. Perhaps it’s a field of flowers or the surface of a lake beautifully reflecting the sky.