text-shadow 文字に影をつける コピペで使えるHTML+CSS

スポンサーリンク
LINEで送る
Pocket

text-shadowプロパティの概要

文字に影をつけるCSS
text-shadow
目的文字に影をつける。ボックスそのものについてはbox-shadowを用いる。
使用<span>
関連box-shadow
初期text-shadow : none
この文字に影をつける
<span style="font-size: 30px; text-shadow: 3px 3px 2px #444444;">この文字に影をつける</span>

text-shadow: 水平方向 垂直方向 ぼかし半径

水平方向この文字に影をつける
text-shadow: 5px 0px 2px #444444;
垂直方向この文字に影をつける
text-shadow: 0px 5px 2px #444444;
ぼかし半径この文字に影をつける
text-shadow: 0px 0px 5px #444444;
水平方向+ 垂直方向+ ぼかし半径この文字に影をつける
text-shadow: 5px 5px 2px #444444;
水平方向+ 垂直方向+ぼかし半径※マイナスに指定この文字に影をつける
text-shadow: -5px -5px 2px #444444;

text-shadowを使ったデザイン

文字や画像に影をつける

文字や画像に影をつける コピペで使えるHTML+CSS
影を描くCSSプロパティにはテキスト向けのtext-shadowと要素全体に対して適用されるbox-shadowがあります。このページでは2つが、どう違うのかを比較しやすい具体例を出しながら適用方法について解説します。
LINEで送る
Pocket

タイトルとURLをコピーしました