まるで画像!文字もアイコンフォントも簡単にCSSで立体的にする【3D CSS Text】

 2014/09/13

snsicon1

立体的な文字を作れるテキストジェネレーター【3D CSS Text】

使い方は超簡単

snsicon2

ジェネレーターで好みの感じに調整したらコードをcssにコピペするだけです。

コピペの場所は立体にしたい文字にspanタグとかで指定したらOK!簡単です。

スポンサーリンク

ツイッター、フェイスブック、google+、RSSのアイコンフォントも立体的に!

     

こんな感じにPhotoShopで作った画像のようになります。

Font Awesomeでの設定方法

こちらも使用しているWordPressのテーマSTINGER5でもFont Awesomeはデフォルトで搭載しており、使う機会も多いかと思いますのでおもなソーシャルアイコンのコードを載せておきます。

ツイッター

HTML

<span class="twitter"><i class="fa fa-twitter"></i></span>

CSS

.twitter{
line-height: 1em;
color: #00aeed;
font-size: 50px;
text-shadow:0px 0px 0 rgb(-21,153,216),0px 1px 0 rgb(-32,142,205),0px 2px 0 rgb(-42,132,195),0px 3px 0 rgb(-53,121,184),0px 4px 0 rgb(-64,110,173), 0px 5px 0 rgb(-75,99,162),0px 6px 5px rgba(0,0,0,0.3),0px 6px 1px rgba(0,0,0,0.5),0px 0px 5px rgba(0,0,0,.2);}

フェイスブック

HTML

<span class="facebook"><i class="fa fa-facebook"></i></span>

css

.facebook{
line-height: 1em;
color: #305197;
font-size: 50px;
text-shadow:0px 0px 0 rgb(27,60,130),0px 1px 0 rgb(16,49,119),0px 2px 0 rgb(6,39,109),0px 3px 0 rgb(-5,28,98),0px 4px 0 rgb(-16,17,87), 0px 5px 0 rgb(-27,6,76),0px 6px 5px rgba(0,0,0,0.3),0px 6px 1px rgba(0,0,0,0.5),0px 0px 5px rgba(0,0,0,.2);}

グーグル+

HTML

 <span class="google-plus"><i class="fa fa-google-plus"></i></span>

CSS

.google-plus{
line-height: 1em;
color: #db4939;
font-size: 50px;
text-shadow:0px 0px 0 rgb(198,52,36),0px 1px 0 rgb(187,41,25),0px 2px 0 rgb(175,29,13),0px 3px 0 rgb(164,18,2),0px 4px 0 rgb(153,7,-9), 0px 5px 0 rgb(142,-4,-20),0px 6px 5px rgba(0,0,0,0.3),0px 6px 1px rgba(0,0,0,0.5),0px 0px 5px rgba(0,0,0,.2);}

RSS

HTML

<span class="rss"><i class="fa fa-rss-square"></i></span>

CSS

.rss{
line-height: 1em;
color: #fa9d39;
font-size: 50px;
text-shadow:0px 0px 0 rgb(229,136,36),0px 1px 0 rgb(218,125,25),0px 2px 0 rgb(208,115,15),0px 3px 0 rgb(197,104,4),0px 4px 0 rgb(186,93,-7), 0px 5px 0 rgb(175,82,-18),0px 6px 5px rgba(0,0,0,0.3),0px 6px 1px rgba(0,0,0,0.5),0px 0px 5px rgba(0,0,0,.2);}

これで上記のような立体的なSNSのアイコンになります。 fa-google-plus-squareなどのスクエアタイプのものは角度をうまく調整しないといけないようでした。

こんな感じ。

まとめ

立体的な文字はソーシャルのボタンとして使ったり、ちょっとしたアクセントで使えそうですね!いつか!

それではちゅんこ@shufulifeがお送りしましたー。100日チャレンジももう10日目!あと90日~!!

WordPress

Please comment!

  

Messege




現在トラックバックはありません。