Romantist

袋文字を簡単に作れる SCSS の関数

by AraiYuji

はじめに

ポップな表現をしたいときによく使用される袋文字ですが、CSSで表現する場合outlineかtext-shadowを用いることがほとんどだと思います。
text-shadowを利用する方が簡単で自由度も高い印象ですがtext-shadowはbox-shadowと違い広がりの距離を指定することができず、シャープなアウトラインを実現するために値を複数回指定してぼかしをなくすという方法がよく取られると思います。


.outline-text {
  text-shadow:
    0 0 8px #000,
    0 0 8px #000,
    0 0 8px #000,
    0 0 8px #000,
    0 0 8px #000,
    0 0 8px #000;
}

でもこんな指定毎回やるのはだいぶめんどくさいので簡単に値を出力できるSCSSの関数を作成してみました。

関数の使い方

関数の内容は以下になります。


@function outlineText($color, $borderWidth, $strength) {
  $values: null;
  @for $i from 0 through $strength {
    $values: append($values, 0 0 $borderWidth $color, comma)
  }
  @return $values;
}

利用方法は第一引数に色、第二引数に太さ、第三引きそうに強さを指定すると値が出力されます。強さはtext-shadowの値を重ねる回数です。

See the Pen
outline-text-1
by Yuji Arai (@Romantist)
on CodePen.

複数の色を重ねたい袋文字でも以下のような指定の仕方で実現できます。

See the Pen
outline-text-2
by Yuji Arai (@Romantist)
on CodePen.

ただどんなに値を重ねてもシャープにはなりきらないのがイマイチなところです。
何か他にいい方法があればいいのに。