[CSS]text-shadowでここまでできる、かっこいいエフェクト集
Post on:2010年11月9日
テキストに影をつけるtext-shadowを使用して、かっこいいエフェクトを適用するスタイルシートを紹介します。
![サイトのキャプチャ](/wp-content/uploads-2010-2d/2010110903.png)
Using CSS Text-Shadow to Create Cool Text Effects
[ad#ad-2]
ヴィンテージ・レトロのテキストエフェクト
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010110902-01.png)
デモ:Vintage / Retro text effect
CSS
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
ネオンのテキストエフェクト
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010110902-02.png)
CSS
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
レタープレスのテキストエフェクト
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010110902-03.png)
[ad#ad-2]
CSS
text-shadow: 0px 2px 3px #666;
古い3Dのテキストエフェクト
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010110902-04.png)
CSS
text-shadow: 8px 8px 0 rgba(255,0,180,0.5);
炎のテキストエフェクト
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010110902-05.png)
CSS
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
ボードゲームのテキストエフェクト
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010110902-06.png)
CSS
text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;
sponsors