見出し枠を立体にするとボタンと間違えるためあまりオススメしません
立体文字は背景が白に白い文字を充てた時などにも効果を発揮します。
背景が白く文字を薄くしたい。。。でも、これだと読みずらい。。。
CSS-3DEffect
▼
影付き文字（立体表示）にすることで読みやすくなる。
CSS-3DEffect
CSSを書きます。
以下のコードを下のタグの貼り付け方に沿って貼り付けます。
※すでに<style></style>が存在していた場合は、赤い文字の部分だけをその中に入れます。
保存したあと、ページの再読み込みをしてください。（キーボードのF5ボタンを押す）
<style type="text/css">
#content_area h1{
font-size: 60px;
color: #eee;
border: none;
text-shadow: 0px 0px 1px #000,
4px 4px 2px rgba(0,0,0,0.5);
box-sizing:border-box;
padding:15px;
}
</style>
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
※見出し中に設定したい時は、h1をh2に、見出し小に設定したい時は、h1をh3にそれぞれ変更して保存すれば実現できます。バーのカラーは、ホームページで利用しているカンパニーカラーにすると配色ミスは避けられます。
バリエーション
文字の色が濃い場合は読みづらくなるので白枠を入れてから薄い影を挿入
HTML5 & CSS
text-shadow:0px 0px 2px #FFF, 4px 4px 2px rgba(0,0,0,0.3);
背景に明度が中途半端な色を付けた時には白抜きで影もしっかりつけたい
Variation
background: #09c;
text-shadow: 0px 0px 2px #000, 2px 2px 3px #000;
白背景に白文字の場合に文字をくっきり見せたい
Variation
background: #FFF;
text-shadow: 0px 0px 2px #000, 2px 2px 3px #000;
背景と文字を同じ色にした時に白い影を使い文字を目立たせたい
Variation
background: #09c;
text-shadow: -1px 1px 0px #FFF, 1px -1px 0px #FFF, 2px -2px 0px #FFF, 3px -3px 0px #FFF;
同じ色合いでグラデーションとぼかし具合を作りやさしさを出す。
Variation
background: #FFF;
text-shadow: 1px 1px 0 #FFF, 2px 2px 5px #99ccff, 4px 4px 10px #b2d8ff, 6px 6px 15px #dbedff, 8px 8px 20px #eaf4ff;
異なる影を複数重ねてマルチな立体感を表現する
Multi 3D CSS
background: #9F166A;
text-shadow: 0px 3px 0px #AAA, 0px 14px 10px rgba(0, 0, 0, 0.2), 0px 24px 2px rgba(0, 0, 0, 0.1), 0px 34px 30px rgba(0, 0, 0, 0.05);
text-shadowを使用することで、様々な立体表現が可能になります。
出来ることには、限界がありますが、上手に利用することで見出しを画像で作ったような効果を出すことが出来ます。
※上記の文字をコピーしてJimdoのテキストエリアに貼り付けることで、同じ効果のh1タグを作成することが出来る場合もあります。その場合の修正は、文章コンテンツの『HTMLの編集』から行います。
コメントをお書きください