SO-76189848

by David Thomas

HTML

<main>
  <div class="explainer">
    Using CSS linear-gradient: <code>linear-gradient(90deg, var(--teamA), var(--teamB))</code>
  </div>
  <span class="teamA">Team A</span>
  <span class="teamB">Team B</span>
  <span class="mixed gradientMix">Team A + Team B</span>
  <div class="explainer">
    Using CSS linear-gradient: <code>linear-gradient(90deg, var(--teamA) 0 50%, var(--teamB) 50%)</code>
  </div>
  <span class="teamA">Team A</span>
  <span class="teamB">Team B</span>
  <span class="mixed gradientStoppedMix">Team A + Team B</span>
  <div class="explainer">
    Using CSS color-mix: <code>color-mix(in srgb, rgb(0 0 255 / 0.3) 50%, rgb(255 0 0 / 0.3))</code>
  </div>
  <span class="teamA">Team A</span>
  <span class="teamB">Team B</span>
  <span class="mixed colorMix">Team A + Team B</span>
</main>

CSS

/* defining shared variables here, in the "global" context: */
:root {
  --spacing: 0.5rem;
  --teamA: rgb(0 0 255 / 0.3);
  --teamB: rgb(255 0 0 / 0.3);
}

/* resetting default margins and padding to 0 (zero), and
   explicitly forcing the browser to use the same sizing
   algorithm, "border-box," to ensure that padding and
   border-sizes are included within the declared element
   size: */
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* ensuring that the <body> element takes the full height
     of the viewport: */
  block-size: 100vh;
  /* applying padding to the element on the 'block' axis,
     the axis on which block content is placed, the vertical
     axis in English, and other European languages: */
  padding-block: var(--spacing);
}

main {
  /* setting the <main> element to take 100% of the available
     space on the block axis: */
  block-size: 100%;
  /* using CSS grid layout: */
  display: grid;
  /* setting a gap between adjacent grid-items, whether on the
     block, or inline, axes: */
  gap: var(--spacing);
  /* using the repeat() function to create 3 grid-columns, each
     taking 1 fraction of the available space: */
  grid-template-columns: repeat(3, 1fr);
  /* setting the size of the element on the inline axis, the axis
     on which inline content (such as text) is placed, so the
     horizontal axis (in English, and European languages) and is
     equivalent to declaring "width" in those locales; the clamp()
     function defines a 50% size, with a minimum size of
     20rem, and an upper limit of 900px: */
  inline-size: clamp(20rem, 50%, 900px);
  /* setting an auto margin on the inline axis, in order to center
     the <main> element on that axis: */
  margin-inline: auto;
  padding: var(--spacing);
}

main > * {
  /* setting a 2px border on the grid-items (the children of
     the <main> element: */
  border: 2px solid hsl(300deg 90% 80% / 0.9);
  /* an inset box-shadow to create an...