CSS3 テキストシャドウのかっこいいサンプル10選

Date:2013/08/01 | Category:WordPressデザインテーマ テンプレート情報
CSS3イメージ

今やすっかり定着しているtext-shadowプロパティ。

最近、仕事で使う機会がありましたので、
エフェクトサンプルを10個まとめて紹介します。

いまさらな感じもしますが・・・

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

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;

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags


Trackbacks & Comments

Trackback URL for this post:

Leave a Reply