【CSS】text-shadow【彫文字】
どうも！LSSです！！
以前にも少し、
の中で書いたような話になりますが、も少し汎用性を持たせた小ネタを思いつきました。
彫文字
彫りこんだような、くぼんで見える文字のサンプルです。
サンプルの文章
コード
<div style="
background-color: pink;
font-weight: bold;
font-size: 30px;
color: white;
padding: 0.5em;
text-shadow: -2px -2px 0px #00000040,2px 2px 0px #ffffff40;
">サンプルの文章</div>
コードの中で重要なのは赤文字３行
つまり、
background-color: pink;
と、
color: white;
と、
text-shadow: -2px -2px 0px #00000040,2px 2px 0px #ffffff40;
の部分です。
以下、順に解説します。
background-color: pink;
枠の背景色を指定している部分です。
サンプルではpink（ピンク色）を指定していますが、好きに変更する事ができます。
が、ここはキツい色よりは、薄めの色… lightblue や lightgreen などを選んだほうが映えそうです^^
color: white;
文字の色を指定している部分です。
black や gray も試してみましたが、ここは white の方が「くぼんで見える」ようにするにはよさげ。
text-shadow: -2px -2px 0px #00000040,2px 2px 0px #ffffff40;
本日のネタのメインとなるのがこの１行！
２つの文字影を設定しています。
ひとつめは、
-2px -2px 0px #00000040
です。これは、
「左に２ピクセル、上に２ピクセルずらした位置に、黒（#000000）を不透過度40」
という指定になります。（ちなみに「不透過度40」は1/4という薄さの透過）
黒を透過で指定しているため、枠の背景色が何色であっても、その色を暗くしたような影となります。
ふたつめは、
2px 2px 0px #ffffff40
です。これは、
「右に２ピクセル、下に２ピクセルずらした位置に、白（#ffffff）を不透過度40」
という指定になります。（同じく、「不透過度40」は1/4という薄さの透過）
白を透過で指定しているため、枠の背景色が何色であっても、その色を明るくしたような影となります。
この２つのtext-shadowをかけている事で、文字の左上が暗い色、右下が明るい色となって、「くぼんでいるように」みせている事になります^^
あとがき
今回のネタは、「文字をくぼんでいるように見せかける」というだけの手法でした。
文字だけなので、別途ボックスについては様々な装飾をかける事ができ、
で紹介したようなものと組み合わせる事ができます^^
その場合、
text-shadow: -2px -2px 0px #00000040,2px 2px 0px #ffffff40;
の１行を足す感じですね。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
