megclaypool
3/25/2020 - 5:58 PM

Multi-line Padded Text -- Inline

My old solution is way outdated, and is now stupidly and unnecessarily overcomplicated.

See my CodePen example

Just set the element to display inline, use padding and a background to establish the "tape", use line-height to separate your lines so the space between the "tape" shows, and make sure to set box-decoration-break: clone; so the padding applies to the beginning and ending of each line, not just the entire element.

If you want, you can even get rounded corners using border-radius :)

washi-tape-example.md
content_copyfile_download
  • Rendered
  • Source
:root {
    --color-gold: #DF9120;
    --color-red: #B3162C;
    --gradient-gold-to-red: linear-gradient(to right, var(--color-gold) 20.56%, var(--color-red) 94.08%); 
}

.washi {
    background: var(--gradient-gold-to-red);
    box-decoration-break: clone;
    display: inline;
    font-size: 3rem;
    line-height: 3;
    padding: 2rem 2rem;
}
Old Explanation.md
content_copyfile_download
  • Rendered
  • Source

[Multi-line Padded Text -- Inline]

CSS Tricks: Multi-Line Padded Text

ex: TNDC large hero title

(aka the Washi Tape Effect)

In order to get the effect of background padding with gaps between lines, we need to set the element containing the text to display: inline. However, inline elements can only have padding-left and right -- padding-top and bottom don't work. Also, the padding only appears at the very start and very end of the text, which doesn't work when the text wraps! :(

Box-shadow to the rescue! We use 6 overlapping box-shadow effects to extend the background-color to each corner of the inline text as well as directly up and down. The box-decoration-break: clone attribute makes the effect work on all edges of wrapped text :)

Note that if the box-shadow "padding" is very wide, and you end up with a very short element on its own line (eg, the word "it" wraps to the last line), there will be a gap between the box shadows to each side and the word itself...

_old-washi-tape.scss
content_copyfile_download
@mixin washi-tape($background-color, $shadow-padding-top, $shadow-padding-bottom, $shadow-padding-left, $shadow-padding-right) {

  background-color: $background-color;
  // border: 1px solid $background-color;
  box-decoration-break: clone;

  // top left, top center, top right, bottom right, bottom center, bottom left
  box-shadow: (-1 * $shadow-padding-left) (-1 * $shadow-padding-top) 0 $background-color, 0 (-1 * $shadow-padding-top) 0 $background-color, $shadow-padding-right (-1 * $shadow-padding-top) 0 $background-color, $shadow-padding-right $shadow-padding-bottom 0 $background-color, 0 $shadow-padding-bottom 0 $background-color, (-1 * $shadow-padding-left) $shadow-padding-bottom 0 $background-color;
}
styles.scss
content_copyfile_download
.card__title {
  $shadow-padding-top: 4px;
  $shadow-padding-bottom: 6px;
  $shadow-padding-left: 30px;
  $shadow-padding-right: 30px;
  $background-color: black;

  background-color: $background-color;
  box-decoration-break: clone;

  // top left, top right, bottom right, bottom left
  box-shadow: (-1 * $shadow-padding-left) (-1 * $shadow-padding-top) 0 $background-color, $shadow-padding-right (-1 * $shadow-padding-top) 0 $background-color, $shadow-padding-right $shadow-padding-bottom 0 $background-color, (-1 * $shadow-padding-left) $shadow-padding-bottom 0 $background-color;

  color: white;
  display: inline;
  @include rem('font-size', 25px);
  font-weight: bold;
  // you'll need to mess around with line-height and $shadow-padding values so you get a break between lines of wrapped text
  line-height: 1.8;
  text-align: center;
  text-transform: lowercase;

  @include breakpoint($breakpoint-lg) {
    $shadow-padding-top: 6px;
    $shadow-padding-bottom: 10px;
    $shadow-padding-left: 70px;
    $shadow-padding-right: 70px;

    // top left, top right, bottom right, bottom left
    box-shadow: (-1 * $shadow-padding-left) (-1 * $shadow-padding-top) 0 $background-color, $shadow-padding-right (-1 * $shadow-padding-top) 0 $background-color, $shadow-padding-right $shadow-padding-bottom 0 $background-color, (-1 * $shadow-padding-left) $shadow-padding-bottom 0 $background-color;

    @include rem('font-size', 60px);
    line-height: 1.6;
  }
}
box-shadow.md
content_copyfile_download
  • Rendered
  • Source

Box-shadow Syntax

Specify a single box-shadow using:

  • Two, three, or four values.
    • If only two values are given, they are interpreted as <offset-x><offset-y> values.
    • If a third value is given, it is interpreted as a <blur-radius>.
    • If a fourth value is given, it is interpreted as a <spread-radius>.
  • Optionally, the inset keyword.
  • Optionally, a value.

To specify multiple shadows, provide a comma-separated list of shadows.

ex:

/* Keyword values */
box-shadow: none;

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

For more details, see the MDN web docs on box-shadow