文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 文字のデザイン > 文字に影を付ける

文字に影を付けるCSSの生成

htmlで文字に影を付けるにはCSSの「text-shadow」を使用します。
当ページでは文字に影を付けるCSSを簡単操作で作成することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来ます。

文字に影を付けてみよう

影は上下左右の方向に指定することが出来ます。影のぼかしや色なども指定できますので是非お試しください。

影の長さ
横方向
縦方向
影のぼかし
文字サイズ
文字の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
影の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
文字影は簡単
使用したhtml
<span class="shadow">文字影は簡単</span>
生成したCSS
.shadow {
  display     : inline-block;
  color       : #000000;            /* 文字の色 */
  font-size   : 30pt;               /* 文字のサイズ */
  text-shadow : 10px 10px #66ff66;  /* 文字の影 */
}
「text-shadow」の使い方は以下を参照ください。
text-shadow 「文字の影付け」の構文
ページTOP
広告
広告

色々な文字の影

CSSの「animation」を使用することで、色々なブリンクを作成することができます。

浮き上がった文字

影の指定はカンマ区切りで複数指定することが出来ます。4方向に影を付けると浮き上がった文字を表現できます。

浮いた文字
<div class="sample1oya">
  <span class="sample1">浮いた文字</span>
</div>
<style type="text/css">
.sample1oya{
  background  : #ffffff;
  padding     : 20px;
}
.sample1{
  display     : inline-block;
  font-size   : 160%;
  font-weight : bold;
  color       : #ffffff;
  text-shadow:  2px  2px 10px #777 ,
               -2px  2px 10px #777 ,
                2px -2px 10px #777 ,
               -2px -2px 10px #777;
}
</style>
ページTOP

影をアニメーションで変化する

CSS3で追加された「animation」を使用すると、影の変化を付けることが出来ます。
以下のサンプルは、4方向に付けた影の濃さを変化させることで、文字が浮き上がって消える見た目となります。

アニメーションについては以下をご確認ください。
animation 「アニメーション」

影が変化する
<div class="sample2oya">
  <span class="sample2">影が変化する</span>
</div>
<style type="text/css">
.sample2oya{
  background : #fff;
  padding    : 20px;
}
.sample2{
  display    : inline-block;
  font-size  : 160%;
  font-weight: bold;
  color      : #fff;
  animation  : sample2Anime 4s linear infinite alternate;
}
@keyframes sample2Anime{
   0% { text-shadow:  2px  2px 10px #fff ,
                     -2px  2px 10px #fff ,
                      2px -2px 10px #fff ,
                     -2px -2px 10px #fff;}
 100% { text-shadow:  2px  2px 10px #777 ,
                     -2px  2px 10px #777 ,
                      2px -2px 10px #777 ,
                     -2px -2px 10px #777;}
}
</style>
ページTOP

注意事項

フォントは使用するページ(html)により変わります。

ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン