文字の画像(イメージ)化
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
広告

生成できるホームページ・パーツ一覧
文字のデザイン・動作の生成文字のデザイン
画像のデザイン・動作の生成画像のデザイン
ボタンのデザイン・動作の生成ボタンのデザイン
入力項目のデザイン・動作の生成入力項目のデザイン
表のデザイン・動作の生成テーブルのデザイン
BOXのデザイン・動作の生成BOXのデザイン
吹き出しのデザイン・動作の生成吹き出しのデザイン
HTMLページのデザイン・動作の生成ページのデザイン
図形のデザイン・動作の生成図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの？
生成コードに利用制限はある？
生成コードに保証はある？
jQueryで生成できない？

広告
ページTOP

当サイト内の関連するページ

便利なCSS、JavaScriptの自動生成一覧
sample
CSSで
透かし文字

CSS背景文字
CSS
blink

CSSブリンク
CSSで改行位置を指定する。

CSS改行位置
先頭文字を大きくするCSS

先頭文字
フォントサイズ
10 12 14

文字サイズ
文字の
影付け

影付け
文書先頭のインデントをCSSで指定

インデント
言語切り替え

言語切換え
CSSで
縁取り

CSS文字縁取り
SVGで縁取り

SVG文字縁取り
文字重ね

画像文字重ね
NEW,UPのマーク付け

NEW,UP
文字を
遠近表示

遠近・奥行
1文字回転縦軸回転

文字の回転
縦長横長

縦長・横長
文字スクロール

スクロール
マウスで文字選択の色をCSSで変更

マウス選択色
左斜体文字右斜体文字

斜体文字
文字をマーカーなどで強調する

文字の強調

縦書き

CSSで文書を縦書きにする

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