読者です 読者をやめる 読者になる 読者になる

メモを揉め

お勉強の覚書。

text-shadowで白抜き文字を作る

タイトルで使っています。
text-shadowをブラーを掛けずに8方向に落とすことで白抜きっぽくなります。

.outline-cha {
    color: white;
    text-shadow:
      black 1px 1px 0px,
      black -1px 1px 0px,
      black -1px -1px 0px,
      black 1px -1px 0px,
      black 1px 0px 0px,
      black 0px 1px 0px,
      black -1px 0px 0px,
      black 0px -1px 0px;
}

OUTLINE CHARACTER ~ outline character : 白抜き文字 # あいうえお

OUTLINE CHARACTER ~ outline character : 白抜き文字 # あいうえお

OUTLINE CHARACTER ~ outline character : 白抜き文字 # あいうえお

分かりやすく数値を大きくして色を薄くするとこうなる。

.outline-cha {
    color: white;
    text-shadow:
      rgba(0,0,0,.3) 60px 60px 0px,
      rgba(0,0,0,.3) -60px 60px 0px,
      rgba(0,0,0,.3) -60px -60px 0px,
      rgba(0,0,0,.3) 60px -60px 0px,
      rgba(0,0,0,.3) 60px 0px 0px,
      rgba(0,0,0,.3) 0px 60px 0px,
      rgba(0,0,0,.3) -60px 0px 0px,
      rgba(0,0,0,.3) 0px -60px 0px;
}

 A

斜めの影に関しては、X軸、Y軸の移動を√0.5px ≒ 0.70710678118px(出典:Google先生)にして影の太さが均一になるようにしたかったのですが、text-shadowは少数点以下の調整が効かないっぽいです。
0.70710678118pxという入力は0pxとみなされたのか影が消えてしまいました。

斜めの影を諦めて、影を4つにすれば影の太さは均等になります。
これはこれでまた違った趣があるけど、インパクトというかひょうきん?な感じがちょっと無くなっちゃうかも。

.outline-cha {
    color: white;
    text-shadow:
      black 1px 0px 0px,
      black 0px 1px 0px,
      black -1px 0px 0px,
      black 0px -1px 0px;
}

OUTLINE CHARACTER ~ outline character : 白抜き文字 # あいうえお

OUTLINE CHARACTER ~ outline character : 白抜き文字 # あいうえお

OUTLINE CHARACTER ~ outline character : 白抜き文字 # あいうえお

逆に斜めの影だけにしてみる。

.outline-cha {
    color: white;
    text-shadow:
      black 1px 1px 0px,
      black -1px 1px 0px,
      black -1px -1px 0px,
      black 1px -1px 0px;
}

OUTLINE CHARACTER ~ outline character : 白抜き文字 # あいうえお

OUTLINE CHARACTER ~ outline character : 白抜き文字 # あいうえお

OUTLINE CHARACTER ~ outline character : 白抜き文字 # あいうえお

font-sizeを大きくした際、選択範囲をはみ出すと線が途切れちゃうことがある。*1

A

手前に (スペース)を置いてletter-spacingを少し多めに取ると解消された。

 A

*1:Safari, Mobile Safariで確認できる