[CSS]text-shadowでここまでできる、かっこいいエフェクト集
Post on:2010年11月9日
テキストに影をつけるtext-shadowを使用して、かっこいいエフェクトを適用するスタイルシートを紹介します。

Using CSS Text-Shadow to Create Cool Text Effects
[ad#ad-2]
ヴィンテージ・レトロのテキストエフェクト

デモ:Vintage / Retro text effect
CSS
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
ネオンのテキストエフェクト

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;
レタープレスのテキストエフェクト

[ad#ad-2]
CSS
text-shadow: 0px 2px 3px #666;
古い3Dのテキストエフェクト

CSS
text-shadow: 8px 8px 0 rgba(255,0,180,0.5);
炎のテキストエフェクト

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;
ボードゲームのテキストエフェクト

CSS
text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;
sponsors