ポップな表現をしたいときによく使用される袋文字ですが、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;
}CSS
でもこんな指定毎回やるのはだいぶめんどくさいので簡単に値を出力できるSCSSの関数を作成してみました。
関数の内容は以下になります。
@function outlineText($color, $borderWidth, $strength) {
$values: null;
@for $i from 0 through $strength {
$values: append($values, 0 0 $borderWidth $color, comma)
}
@return $values;
}JavaScript
利用方法は第一引数に色、第二引数に太さ、第三引きそうに強さを指定すると値が出力されます。強さはtext-shadowの値を重ねる回数です。 https://codepen.io/Romantist/embed/gNowBb?default-tab=html%2Cresult
複数の色を重ねたい袋文字でも以下のような指定の仕方で実現できます。 https://codepen.io/Romantist/embed/Zdvpwr?default-tab=html%2Cresult
ただどんなに値を重ねてもシャープにはなりきらないのがイマイチなところです。
何か他にいい方法があればいいのに。