The decoration of デースケドガー with CSS

キーワードを英数字や記号で挟むといいような気がしてきました。 でも、スパム的なページを作ってもなんなので、デースケドガーという文字をCSSで装飾するソースを公開するページにしてみました。

あぶどいら
第一回「ゲイトラ」SEOコンテストへのエントリー。
デースケドガー
デースケドガーに関する研究と考察を行うサイト。
デースケドガー iframe
デースケドガーのトラックバックをインラインフレームに表示してみる。
デースケドガー総合研究所
デースケドガーランキング情報サイト。

第 2 回 SEO コンテスト (新潟・スマトラ頑張れ!!)

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

デースケドガー
<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>

2.影付き文字

デースケドガー

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

<h1 style="font-size:40pt;position:absolute;Filter:Shadow(color=silver,Direction=135)">デースケドガー</h1>

3.発光文字

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

4.半透明フィルタ

デースケドガー
<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で長方形にグラデーションがかかります。

5.ぼかし

デースケドガー
<h1 style="font-size:40pt;width:100%;filter:progid:DXImageTransform.Microsoft.Blur(shadowopacity=0.5)">デースケドガー</h1>

6.影を落とす

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

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

7.CSSで掘り込み表示

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

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

8.CSSで浮き彫り表示

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

9.ブレをつける

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

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

10.ウェーブ

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

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

11.背景を文字から透過

デースケドガー
<h1 style=";font-size:40pt;width:100%;filter:mask(color=white)">デースケドガー</h1>

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

デースケドガー・トラックバック

トラックバックOKデースケドガー

デースケドガー・トラックバック

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