[CSS3]text-shadowサンプル

text-shadow

今回はよく使うCSS3のtext-shadowの小技を紹介しますよ。
気に入ったのをコピペで使ってください。
IEは適応外なので、この内容は他のブラウザで見てください。IE10は採用されるらしいです。

text-shadowの基本の指定方法は以下です↓
【text-shadow: (x軸/横にいくつ広げるか) (y軸/縦にいくつ広げるか) (ぼかし値) (影の色);】

text-shadow: 1px 1px 1px #000; 
  1. 基本

    基本のドロップシャドウはこんな感じ。わかりやすくつけたけど、もう少し影を薄くしたほうがプロっぽいかも。

    Basic

    #t1 {
    	text-shadow: 2px 2px 1px #999;
    }
    
  2. インセット

    ぼかし無しの明るめのシャドウを少しつけると、文章が読みやすくなることが多いです。

    Life consists not in holding good cards
    but in playing those you hold well.

    #t2 {
    	text-shadow:0 -1px 0 #ccc;
    
    	font-size: 26px;
    	background:#999;
    }
    
  3. エンボス風

    押し出した感じですね。シャドウを複数指定しています。使い勝手良さそうです。

    Love begets love

    #t3 {
    	color:#DB8A8A;
    	background:#F1D8D9;
    
    	text-shadow: 
    	-1px -1px #fff, 1px 1px #333;
    }
    
  4. グロー

    ぼかし値だけで表現。
    ※ただしIE環境では全く文字が読めないのを考慮しましょう。これスパムにならないのかなと思ったり。

    Best is cheapest

    #t4 {
    	color: #fff;
    	
    	text-shadow: 
    	0px 0px 1px #666, 
    	0px 0px 5px #666, 
    	0px 0px 5px #666;
    }
    
  5. 縁取り風

    4方向に値を指定。ぼかしが無いと綺麗にならなかったので1pxだけぼかしをかけています。

    I think. Therefore, I am.

    #t5 {
    	color: #eee;
    	
    	text-shadow: 
    	2px 2px 1px #3399FF,  
    	-2px 2px 1px #3399FF,  
    	2px -2px 1px #3399FF,  
    	-2px -2px 1px #3399FF;
    }
    
  6. ネオン

    Sky is the limit

    キレイですね。1pxの白を最初に入れてるのがポイントっぽいです。

    #t6 {
    	color:#fff;
    	background: #000;
    	
    	text-shadow: 
    	0px 0px 1px #fff, 
    	0px 0px 10px #3FC, 
    	0px 0px 20px #3FC, 
    	0px 0px 30px #3FC, 
    	0px 0px 40px #3FC;
    }
    
  7. ぼかし

    すりガラスみたいな感じでしょうか。使い様によってはかっこよくなりそう。
    文字色にcolor: transparent; 使用しています。operaで多分出ません。

    Sensitivity

    #t7 {
    	color: transparent;
    	
    	text-shadow: 0 0 5px #303030;
    }
    
  8. レトロ

    シャドウをいくつも重ねる事も出来ます。

    Life is like a box of chocolate

    #t8 {
    	color:#300;
    	background: #A89E7D;
    	
    	text-shadow: 
    	2px 2px 0px #fff, 
    	4px 4px 0px #C90, 
    	6px 6px 0px #630;
    }
    
  9. 切り抜いた感じ

    型抜きした感じ。太字でないとわかりにくいかも。
    transparent使用

    Sufficient unto the day

    #t9 {
    	color: transparent;
    	
    	text-shadow:
    	2px 4px 6px rgba(255, 255, 255, 0.5), 
    	0 0 0 rgba(0, 0, 0, 0.4);
    	font-size: 60px;
    }
    
  10. セロハン

    透過させて、影と色を重ねています。
    下記の rgba(255,0,0,0.5); 部分はIE8以下非対応です。
    【rgba(赤, 緑, 青, 透明度); 】
    最後の値で透明度を指定可能です。
    (透明度は0~1まで。0は0%の完全に透明で、1は100%の不透明)

    Life is sweet

    #t10 {
    	color:rgba(255,0,0,0.5);
    	background:#fff;
    	
    	text-shadow: 
    	5px 3px rgba(200,100,200,0.5);
    }
    

色々さわって実験して遊んでみましょう!
かっこいいのがあれば教えてください。