01はじめに
背景が暗すぎる、明るすぎる、なんて時はついつい文字色を白や黒っといった具合に極端にしてしまいがちです。グラフィックデザインのように影などカッコ良くつけたいな〜なんて思っていても昔はできませんでした。画像にして貼り付けるのがやっとです。
しかし、世の中の技術は毎日進化しています。CSSを使ってグラフィックデザインのようにサクッと編集しやすいものにしてみましょう！様々な方法がいくつかあるのですが、一番わかりやすい方法を一つ紹介します。
text-shadowを理解する
このプロパティは文字に影をつける時に使用します。グラフィックのように角度、大きさ、色など自由に編集できます。
背景が白くても影をつけると浮き出て見えますね。
Sample Text
HTML
<body>
<h3>Sample Text</h3>
</body>CSS
h3{
color: white;
text-shadow: 3px 3px 3px #A9A9A9;
}text-shadowの書き方
表記
text-shadow
{ 横へ３px・縦に3px・ぼかしの幅 5px・影の色＃A9A9A9 }
この機能を使って３Dメガネでみると立体になるような文字を作ってみたいと思います。
まず#D42500(赤）の文字を作ります。影の文字色として#279D01（緑）を使用します。
3D Sample
HTML
<body>
<h3>3D Sample</h3>
</body>
CSS
h3{
font-family: impact;
font-size: 2.5em;
font-weight:800;
color: #D42500;
text-shadow:4px 0px 0px #279d01;
}面倒だなぁ〜サクッと作りたい方はこちら
なんと考えなくても作れてしまう優れたリンクをご紹介っと言うか僕がいつも利用しているサイトです。
たまにはズルしちゃってもいいんじゃないんですか？っと言うノリで紹介しています。おそらく、他にも良いサイトはたくさんあるんじゃないかなと思いますが、僕はここが一番好きです。
その名も「bad company」この名前かなりインパクトが強くて良いです。
良いのか悪いのか...。笑
ありがたい機能を提供してくださるので感謝しながら時々、使用します。
<strong>さらに詳しく学びたい方にオススメ！</strong>
