【CSS3】テキストシャドウのかっこいいサンプル10選-WordPressラボ

【エフェクトサンプル】コードをコピペしてお使いください。

1.CLASSIC

1.のコード
text-shadow: 0px 1px 1px #4d4d4d; color: #222; font: 80px ‘LeagueGothicRegular’;

2.CLOUD

2.のコード
text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3); color: rgba(255,255,255,0); font: 80px ‘ChunkFiveRegular’;

3.VINTAGE

3.のコード
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070; font: 80px ‘League-Gothic’, Courier; text-transform: uppercase; color: #707070;

4.NEON

4.のコード
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; font: 80px ‘Museo’; text-transform: uppercase; color: #fff;

5.EMBOSSED

5.のコード
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; color: #9c8468; opacity: 0.3; font: 80px ‘Museo700’; background-color:#DEB887;

スポンサードリンク

6.★RETRO★

6.のコード
text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72; color: #d7ceb2; font: 80px ‘BazarMedium’; letter-spacing: 10px;

7.ROCK

7.のコード
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; color: #fff; font: 80px ‘ChunkFiveRegular’;

8.ANAGLYPHIC

7.のコード
text-shadow: 8px 8px 0 rgba(255,0,180,0.5); font: 70px ‘League-Gothic’, Courier; text-transform: uppercase; color: rgba(0,168,255,0.5);

9.FIRE

9.のコード
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; font: 80px ‘League-Gothic’, Courier; text-transform: uppercase; color: #fff;

10.GAME

10.のコード
text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff; font: 80px ‘League-Gothic’, Courier; text-transform: uppercase; color: #fff;

Tags

css