Callout UI with CSS Offset & Border 관련

CSS > Article(s)

---

Article(s)

• The Layout
• The Text Box Offset
• The Leader Line
• The Designs

---

Callout UI with CSS Offset & Border

We look at designing callout UI elements using CSS, incorporating leader lines and text boxes. It details setting up the HTML structure, utilizing CSS properties like offset-path and borders.

A callout UI typically has a leader line (or “tail”) with a text box at one end. It is often used as a visual highlight and to add annotations in a casual layout. Let’s look at one way to design a callout like this using CSS offset and borders.

See Callouts by anon on CodePen.

---

The Layout

The HTML layout consists of an element that represents the callout, inside which is another element that’ll carry the text.

<div class="callout">
  <div class="callout-text"><!-- text --></div>
</div>

.callout {
  container-type: size;
}

The outer element, .callout, is established as a query container that tracks both its horizontal and vertical sizes (that’s what the value size does as opposed to inline-size). This later gives us the dimensions needed to place the text boxes at the desired positions over .callout. The element will also receive borders later on to create the leader lines.

---

The Text Box Offset

.callout-text {
  offset-path: border-box;
  offset-anchor: bottom;
}

The text boxes (.callout-text) are to be placed along the border reference box of .callout. The text box’s bottom-center (center is default) is the point that attaches to the .callout’s border.

The offset-path CSS property defines a track that an element can be placed on and animated along. The offset-anchor CSS property defines a point in that element that connects to the path.

.callout-text {
  offset-path: border-box;
  offset-anchor: bottom;
  offset-distance: 100cqw;
  /* shorthand would be: 
     offset: border-box 100cqw 0deg/bottom; */
}

If the leader line needs to extend from below the text box and towards the left, the text box needs to be at the opposite corner (the top right) of .callout, which is the distance of the entire callout width: 100cqw.

---

The Leader Line

With the text box positioned, we now add a leader line. This is done by setting the right and bottom borders for .callout.

.callout {
  container-type: size;
  border: dashed;
  border-width: 0 2px 2px 0; 
}

See Callout by anon on CodePen.

A standard callout is ready, but let’s tweak it a little more!

---

The Designs

One advantage of positioning text boxes using offset is that the text box is now attached to the callout’s border. If the border moves in any way, the text box moves along with it.

To make the leader line slanted, we add skew to .callout. To counter the effect of skew on the text box, it receives the same skew but in the opposite direction.

.callout {
  /* etc. */
  --ang: 20deg;
  transform: skewX(calc(-1 * var(--ang)));
}
.callout-text {
  /* etc. */
  transform: skewX(var(--ang));
}

See Callout 1 by anon on CodePen.

Box shadows can also be used to provide leader lines.

.callout {
  /* etc. */
  box-shadow: 1px -1px 0 1px maroon, 
              2px -2px 0 2px pink, 
              3px -3px 0 3px deeppink;
}

See Callout 2 by anon on CodePen.

We can also take advantage of border-radius and corner-shape to affect the leader line’s shape.

Note

The corner-shape fallback is the default rounded border.

.callout {
  /* etc. */
  border-bottom-right-radius: 30px;
  corner-shape: notch;
}

See Callout 3 by anon on CodePen.

This can all be animated, too.

.callout {
  /* etc. */
  --ang: 20deg;
  transform: scaleY(0);
  transform-origin: bottom left;
}
.callout-text {
  /* etc. */
  transform: scale(0);
  transform-origin: bottom center;
}
p:hover + .callout {
  transform: skewX(calc(-1 * var(--ang))) scaleY(1);
  transition: transform 0.3s;
}
p:hover + .callout > .callout-text {
  transform: scale(1) skewX(var(--ang));
  transition: 0.3s transform 0.3s;
}

First, the .callout scales up vertically, followed by the .callout-text scaling up in both axes.

See Callout animation by anon on CodePen.

The design variants can be many, arising from different combinations of these. In a nutshell, we use borders and shadows for the leader line’s type and color; use sizing, transforms, border-radius, etc., to change the line’s size and shape. Then style the text box as we would any element showcasing text.

Callout UI with CSS Offset & Border

---

We look at designing callout UI elements using CSS, incorporating leader lines and text boxes. It details setting up the HTML structure, utilizing CSS properties like offset-path and borders.