text-shadowで白抜き文字を作る
タイトルで使っています。
text-shadowをブラーを掛けずに８方向に落とすことで白抜きっぽくなります。
.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とみなされたのか影が消えてしまいました。
斜めの影を諦めて、影を４つにすれば影の太さは均等になります。
これはこれでまた違った趣があるけど、インパクトというかひょうきん？な感じがちょっと無くなっちゃうかも。
.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
