Depths Formatting Guide

A commonly used formatting trick is using the 'linear-gradient' rule to transition to a black screen.

#workskin .descent {
 width: 100%;
 background-image: linear-gradient(#f0f0f000, #000000ff);
 margin: 0;
 padding-bottom: 30%;
}

This rule has a fair amount going on. The core of this effect is the linear-gradient, which renders a gradient between two colours. Note that the transition is done from a transparent colour #f0f0f000, to black. This allows the gradient to transition from any colour. The second notable part of the effect is the padding. This can be made as large, or as small as appropriate.

Reversing the effect is as simple as changing the gradient to fade to transparent.

#workskin .ascent {
 width: 100%;
 background-image: linear-gradient(#000000ff, #f0f0f000);
 margin: 0;
 padding-top: 30%;
}

Combining the two gradients with an additional rule allows for a fade to black effect. Note that 1px of padding-top and padding-bottom is added. This prevents an ugly gap between the divs. A margin is also added to the <p> tag, as this stops the white text from melting into the white margin around it.

#workskin .depths {
  width: 100%;
  background-color: #000;
  margin: 0;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #ffffff;
}
#workskin .depths p {
  margin-left: 2px;
}