Day 4: Banner 🚩

A banner is an element that highlights information, like a website page or an event or Advent of UI components.

The component could be seen at the top of the site.

A few notes about this banner component:

• CSS Variables are used for colors,
• position: sticky and top: 0 declarations are used for “sticking” the banner to the top of the page without affecting the layout,
• linear-gradient as a background, -webkit-background-clip: text;, and -webkit-text-fill-color: transparent; declaration are used for gradient text color.
• border-top-color and border-bottom-color properties are used for hover style,
• to respect the user preference for reduced motion, --transition-duration-xmas CSS variable is set to 0s (read more about using CSS Variables for reduced motion on a global scale).

The code:

<div class="advent-banner">
  <p><a href="/side-projects/advent/">Check my Advent of UI components 2021!</a></p>
</div>

.advent-banner {
  --color-xmas-alpha: #f7efef;
  --color-xmas-beta: #d72621;
  --color-xmas-gamma: #639565;
  --transition-duration-xmas: .3s;

  background-color: var(--color-xmas-alpha);

  text-align: center;

  position: sticky;
  top: 0;

  z-index: 1;
}

.advent-banner p,
.advent-banner a {
  background-image: linear-gradient(to right, var(--color-xmas-beta), var(--color-xmas-gamma));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.advent-banner p {
  margin: 0;
}

.advent-banner a {
  padding: .3em;
  border: .3em solid transparent;
  transition: border-color var(--transition-duration-xmas);
}

.advent-banner a:hover,
.advent-banner a:focus,
.advent-banner a:active {
  border-top-color: var(--color-xmas-gamma);
  border-bottom-color: var(--color-xmas-beta);
}

@media (prefers-reduced-motion: reduce) {
  .advent-button {
    --transition-duration-xmas: 0s;
  }
}