CSSを使用した基本的な3Dテキスト作り

3Dテキストを作るに必須な、テキストに影をつけてくれるプロパティのtext-shadowについて紹介します。文字に影を入れるには、Photoshopなどの画像編集ソフトで加工したり3D効果を演出しましたが、画像を使わずにCSSだけで簡単に色んなエフェクトをかけられます。

text-shadow宣言構文

▼　基本的な宣言構文は下記となります。カンマ(,)の区切りで複数の影をつけることができます。

  <style>
  
     h2 {text-shadow: offset-x offset-y blur-radius color;}
     
  </style>

offset-x

必須値です。横方向の影のズレの長さ(距離)を指定します。

offset-y

必須値です。垂直向のズレの長さを指定します。負の値であればテキストの上に影を配置します。両方の値が《0》ならば、影はテキストの背後に配置されます

blur-radius

ぼかし強度の長さ(半径)を指定します。指定されなければ、これは 0 になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。

color

影の色を指定します。省略時は文字色と同じ色になります。

  <style>
     h2 {text-shadow: 1px 1px 0px block;}  
     h2 {text-shadow: 1px 1px 0px #ffffff, 3px 3px 2px #663333;}
     h2 {text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;}
     h2 {text-shadow:-1px -1px 1px #000;}
     h2 {text-shadow:-1px -1px 1px #111, 1px 1px 1px #000;}
     
  </style>

TEXT SHADOW

3D TEXT

▼　Y軸に正の数をどんどん足しながら、影の色も徐々に暗くすることで、以下のような3D効果の演出ができます。

 <style>
  text-shadow: {
		color:#FFF;
		0 1px 1px #bbb,
		0 2px 0 #999, 
		0 3px 0 #888, 
		0 4px 0 #777, 
		0 5px 0 #666, 
		0 6px 0 #555, 
		0 7px 0 #444, 
		0 8px 0 #333, 
		0 9px 7px #302314;}
 </style>

ネオンエフェクト(NEON Effect)

テキスト色：白、色はライトピンクからダークピンクに設定、「blur-radius」半径も徐々に広げていきます。

 <style>
  text-shadow: {
		color:#FFF;
		0 0 10px #fff,
		0 0 20px #fff,
		0 0 30px #fff,
		0 0 40px #f766e4,
		0 0 70px #f658e2,
		0 0 80px #f54bdf,
		0 0 100px #f33ddc,
		0 0 120px #f22ed9,
		0 0 150px #ef16d3;
}
 </style>

3D TEXT サンプル

<head>
 <style>
 .backshadow{text-align:center;
	 background-color:#0d6d91;
	 line-height:10em;border-radius:5px;}
 h1.text-amazing{
	text-shadow:
    0 1px 0 #ffffff,
    0 1.5px 0 #d3d5d6,
    0 2px 0 #7c98a1,
    0 2.5px 0 #4e727e,
    2px 3px 4px rgba(0,0,0,0.1),
    2px 3px 4px rgba(0,0,0,0.3);
    color: #dfe1e2;
	font-size:3.5em;}
 </style>
</head>

<body>
    <div class="backshadow">
        <h1 class="text-amazing">3D Text Amazing!!</h1>
    </div>
</body>

ホワイト 3D TEXT

<head>
 <style>
#amazingtext{
    text-align:center;
    border:1px solid #666;
    border-radius:5px;}
#amazingtext h1{
    color: #fff;
    font-size:3.5em;
    text-shadow:
      0 1px 1px #c0c0c0,
      0 2px 0 #a8a7a6,
      0 3px 0 #8b8a89,
      0 4px 0px #7d7b7a,
      0 5px 0px #686766,
      0 6px 3px #5f5e5d;
}
 </style>
</head>

<body>
    <div id="amazingtext">
      <h1>3d text Amazing!!</h1>
    </div>
</body>

3D TEXT リンク

リンクがかかったテキストの上にマウスをあてると3Dテキストに変わります。

<head>
 <style>
 #amazinglink a:link, 
 #amazinglink a:visited {
	color: #303030; 
	line-height:3em;
	font-size:3.5em;
	text-decoration:none;
 }
 #amazinglink a:hover, 
 #amazinglink a:active {
	text-shadow:			   
	0 1px 1px #c0c0c0,
	0 2px 0 #a8a7a6, 
	0 3px 0 #8b8a89, 
	0 4px 0 #7d7b7a,
	0 5px 0 #686766,
	0 6px 3px #5f5e5d;
 }
 </style>
</head>

<body>
  <div id="amazinglink">
  <a href="#">3d text shadow </a>
  </div>
</body>