Day 7: Intro 💬

An intro components usually provides basic information of the page. It is one of the first components on the page.

The example component is visible below.

A few notes about this intro component:

• CSS Variables are used for colors, spacing, and masking,
• “zig-zag” borders are built with conic gradients (see Temani Afif's pen).

The code:

<div class="advent-intro">
  <h2>Welcome to Advent of UI components.</h2>
  <p>Every day of Advent, I share a UI component. I do it to apply some recently learned CSS knowledge and share it with the community.</p>
</div>

.advent-intro {
  --color-xmas-alpha: #f7efef;
  --color-xmas-beta: #d72621;
  --color-xmas-gamma: #639565;
  --space-xmas-alpha: 1rem;
  --space-xmas-beta: #000 90deg, #0000 0;
  --mask-xmas: conic-gradient(from 135deg at top, var(--space-xmas-beta)) 0 0 / calc(2 * var(--space-xmas-alpha)) var(--space-xmas-alpha) space no-repeat,
    conic-gradient(from -45deg at bottom, var(--space-xmas-beta)) 0 100% / calc(2 * var(--space-xmas-alpha)) var(--space-xmas-alpha) space no-repeat,
    conic-gradient(from 45deg at left, var(--space-xmas-beta)) 0 0 / var(--space-xmas-alpha) calc(2 * var(--space-xmas-alpha)) no-repeat space,
    conic-gradient(from -135deg at right, var(--space-xmas-beta)) 100% 0 / var(--space-xmas-alpha) calc(2 * var(--space-xmas-alpha)) no-repeat space,
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--space-xmas-alpha)) calc(100% - 2 * var(--space-xmas-alpha)) no-repeat;

  background-image: radial-gradient(ellipse at center, var(--color-xmas-gamma), var(--color-xmas-beta) 200%);
  color: var(--color-xmas-alpha);

  text-align: center;

  padding: 5em 2em;
  overflow: hidden;

  -webkit-mask: var(--mask-xmas);
  mask: var(--mask-xmas);
}

.advent-intro h1,
.advent-intro p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.advent-intro h1 {
  font-size: 2.5rem;
}

.advent-intro p {
  font-size: 1.5rem;
}