[CSS]text-shadowでここまでできる、かっこいいエフェクト集

テキストに影をつけるtext-shadowを使用して、かっこいいエフェクトを適用するスタイルシートを紹介します。

Using CSS Text-Shadow to Create Cool Text Effects

[ad#ad-2]

• ヴィンテージ・レトロのテキストエフェクト
• ネオンのテキストエフェクト
• レタープレスのテキストエフェクト
• 古い3Dのテキストエフェクト
• 炎のテキストエフェクト
• ボードゲームのテキストエフェクト

ヴィンテージ・レトロのテキストエフェクト

デモ：Vintage / Retro text effect

CSS

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

ネオンのテキストエフェクト

デモ：Neon text effect

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;

レタープレスのテキストエフェクト

デモ：Inset text effect

[ad#ad-2]

CSS

text-shadow: 0px 2px 3px #666;

古い3Dのテキストエフェクト

デモ：Anaglyphic text effect

CSS

text-shadow: 8px 8px 0 rgba(255,0,180,0.5);

炎のテキストエフェクト

デモ：Fire text effect

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;

ボードゲームのテキストエフェクト

デモ：Board Game text effect

CSS

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