まほ～のあいらんどけんきゅ～

タイトル文字を飾る

1.手打ちグラデーション

CSSを使わずに、地道にfontタグで打つグラデーション効果

まほ～のあいらんどけんきゅ～

<h1><font color=#222222>ま</font><font color=#333333>ほ</font><font color=#444444>～</font><font color=#555555>の</font><font color=#666666>あ</font><font color=#777777>い</font><font color=#888888>ら</font><font color=#999999>ん</font><font color=#aaaaaa>ど</font><font color=#bbbbbb>け</font><font color=#cccccc>ん</font><font color=#dddddd>き</font><font color=#eeeeee>ゅ</font><font color=#ffffff>～</font></h1>

2.文字を波打たせる

まほ～のあいらんど

<h1><span style="vertical-align:sub">ま</span>ほ<span style="vertical-align:super">～</span>の<span style="vertical-align:sub">あ</span>い<span style="vertical-align:super">ら</span>ん<span style="vertical-align:sub">ど</span></h1>

3.文字の大きさ

まほ～のあいらんど

<h1><span style="font-size:50pt">ま</span><span style="font-size:45pt">ほ</span><span style="font-size:40pt">～</span><span style="font-size:35pt">の</span><span style="font-size:30pt">あ</span><span style="font-size:25pt">い</span><span style="font-size:20pt">ら</span><span style="font-size:15pt">ん</span><span style="font-size:10pt">ど</span></h1>

4.一括指定

けんきゅ～

<h1><span style="color:#0000ff;vertical-align:sub;font-size:40pt">け</span><span style="color:#0000ee;font-size:35pt">ん</span><span style="color:#0000dd;vertical-align:super;font-size:30pt">き</span><span style="color:#0000cc;font-size:25pt">ゅ</span><span style="color:#0000bb;vertical-align:sub;font-size:20pt">～</span></h1>

5.背景色グラデーション

けんきゅ～

<h1><span style="background-color:#ff0000">け</span><span style="background-color:#ee0000">ん</span><span style="background-color:#dd0000">き</span><span style="background-color:#cc0000">ゅ</span><span style="background-color:#bb0000">～</span></h1>

6.CSSで背景グラデーション

gradientType=1を0にすると、縦方向にグラデーションになります。（実際のソースでは改行させずに詰めて書いてください。）

まほ～のあいらんどけんきゅ～

<h1 style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,StartColorStr=#ff0000,EndColorStr=#0000ff);width:55%">まほ～のあいらんどけんきゅ～</h1>

7.背景画像付きタイトル

まほ～のあいらんどけんきゅ～

<h1><span style="background-image:url(画像のURL);color:blue">まほ～のあいらんどけんきゅ～</span></h1>

8.市松模様

	ほ		の		い		ん
ま		～		あ		ら		ど

<style>td{font-size:30pt}</style><table cellspacing=0 border=0 bgcolor=yellow><tr><td><td bgcolor=red>ほ<td><td bgcolor=red>の<td><td bgcolor=red>い<td><td bgcolor=red>ん<td><tr><td bgcolor=red>ま<td><td bgcolor=red>～<td><td bgcolor=red>あ<td><td bgcolor=red>ら<td><td bgcolor=red>ど</table>

9.ボーダー付きタイトル

まほ～のあいらんどけんきゅ～

<h1><span style="background-color:navy;border:10px outset silver">まほ～のあいらんどけんきゅ～</span></h1>

まほ～のあいらんどけんきゅ～

<h1 style="border:double red;border-width:0pt 0pt 10pt 50pt;width:70%">まほ～のあいらんどけんきゅ～</h1>

まほ～のあいらんどけんきゅ～

<h1 style="border:solid blue;border-width:6pt 0pt;padding:4pt;text-align:center;width:70%">～</h1>

10.立体的な文字

環境によって位置がずれるので、一番上のタイトル以外では使わない方がいいようです。他のコンテンツとも距離を保つようにしましょう。

<h1 style="font-size:40pt">
<div style="color:white;position:absolute;top:100px;left:15px">～</div>
<div style="color:silver;position:absolute;top:102px;left:17px">～</div>
<div style="color:gray;position:absolute;top:104px;left:19px">～</div></h1>

11.背景に凹ませて表示

こちらも10.に同じく他の部分と距離をとるようにしてください。

<h1 style="font-size:50pt;line-height:55pt">
<div style="position:absolute;left:20;top:70;color:#000000;z-index:3">～</div>
<div style="position:absolute;left:21;top:71;color:#ffffff;z-index:2">～</div>
<div style="position:absolute;left:19;top:69;color:#888888;z-index:1">～</div></h1>

12.盛り上がる文字

11.のz-index:2とz-index:3の表示位置を逆にしただけ。

<h1 style="font-size:50pt;line-height:55pt">
<div style="position:absolute;left:20;top:70;color:#000000;z-index:3">～</div>
<div style="position:absolute;left:19;top:69;color:#ffffff;z-index:2">～</div>
<div style="position:absolute;left:21;top:71;color:#888888;z-index:1">～</div></h1>

13.上下反転文字

IE独自拡張のfilterの機能を使っています。

<h1 style="font-size:40pt;line-height:45pt">
<div style="text-decoration:underline">～</div>
<div style="position:absolute;top:98pt;font-style:italic;filter:FlipV;color:#888888">～</div></h1>

14.影付き文字

まほ～のあいらんどけんきゅ～

フィルタを使う場合はposition:absoluteかwidthプロパティの指定が必要です。

<h1 style="font-size:40pt;position:absolute;Filter:Shadow(color=silver,Direction=135)">まほ～のあいらんどけんきゅ～</h1>

15.発光文字

まほ～のあいらんどけんきゅ～

<h1 style="width:100%;font-size:40pt;color:#ffff00;filter:glow(color=#ffffff,strengh=8)">～</h1>

16.半透明フィルタ

まほ～のあいらんどけんきゅ～

<h1 style="font-size:40pt;width:100%;filter:alpha(opacity=100,finishopacity=0,style=1)">～</h1>

まほ～のあいらんどけんきゅ～

<h1 style="font-size:40pt;width:100%;filter:alpha(opacity=100,style=2)">～</h1>

まほ～のあいらんどけんきゅ～

<h1 style="font-size:40pt;width:100%;filter:alpha(opacity=100,style=3)">～</h1>

まほ～のあいらんどけんきゅ～

<h1 style="font-size:40pt;width:100%;filter:alpha(opacity=60,style=0)">～</h1>

styleが0で単一色、1で扇状に、2で放射線状に、3で長方形にグラデーションがかかります。

17.ぼかし

まほ～のあいらんどけんきゅ～

<h1 style="font-size:40pt;width:100%;filter:progid:DXImageTransform.Microsoft.Blur(shadowopacity=0.5)">～</h1>

18.影を落とす

まほ～のあいらんどけんきゅ～

<h1 style="font-size:40pt;width:100%;filter:dropshadow(offx=10,offy=5,color=blue)">～</h1>

offxは影との右方向への距離。offyは下方向への距離。マイナスを指定で逆方向へも表示可能。colorで影の色。

19.CSSで掘り込み表示

まほ～のあいらんどけんきゅ～

<h1 style="background-color:色;font-size:40pt;width:100%;filter:progid:DXImageTransform.Microsoft.Emboss(bias=0.8)">～</h1>

biasは-1.0～1.0で浮き出す高さ。色は何でも可。

20.CSSで浮き彫り表示

まほ～のあいらんどけんきゅ～

<h1 style="background-color:色;font-size:40pt;width:100%;filter:progid:DXImageTransform.Microsoft.Engrave(bias=0.8)">～</h1>

21.ブレをつける

まほ～のあいらんどけんきゅ～

<h1 style="font-size:40pt;width:100%;filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=15,add=true)">～</h1>

strengthでブレの強さ。add=falseだとフィルタの結果のみ表示。

22.ウェーブ

まほ～のあいらんどけんきゅ～

<h1 style="font-size:40pt;width:100%;filter:wave(freq=3,lightstrength=20,phase=30,strength=4,add=false)">～</h1>

freqで波の数。strengthで波の幅。

23.背景を文字から透過

まほ～のあいらんどけんきゅ～

<h1 style=";font-size:40pt;width:100%;filter:mask(color=white)">～</h1>

背景に画像があると効果的です。

24.合わせ技

<h1 style="position:absolute;top:300px;height:58px;width:80%;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorstr=red,endColorstr=green);z-index:1"></h1>
<h1 style="font-size:40pt;position:absolute;top:300px;height:58px;width:80%;filter:Mask(color=white);z-index:2">まほ～のあいらんどけんきゅ～</h1>

グラデーションとマスクの組み合わせ。ソースは改行しないで、続けて書いてください。

25.重ね文字

<h1 style="font:5em/0.5em;margin-top:0em;padding-top:0.2em;padding-bottom:0.5em"><span style="color:gray"> まほ～の </span><br><span style="color:silver;padding-left:0.5em"> あいらんど </span><br><span style="color:white;padding-left:1em"> けんきゅ～</span></h1>

5em/0.5emは「文字の大きさ/行の高さ」です。

[PAGE TOP] [HOME]

SEO		[PR] 爆速!無料ブログ無料ホームページ開設無料ライブ放送