ここは、htmlタグとcss−すぐに使えるサンプルと小技集のサブドメインサイトです。
★htmlタグとcss−すぐに使えるサンプルと小技集−トップページ。
スポンサード リンク
◆HTML&CSS◆ 文字装飾を自作する
文字装飾というのはhtmlの中でも非常に簡単な部類に入ります。
仕組みさえ気にしなければすぐにでも作れるくらいです。
文字装飾で最も基本的なのは文字の大きさを変える。
書体を変える。文字の太さを変える。文字に色を付ける。
この4つです。
ここでは、すこし工夫をして上記の文字にフィルターをかける方法を説明します。
filter
filterの例1(glow)
<font style="filter:glow(color=#222222);width:100%; font-size:35px" color="#EEEEEE"> filterの例1(glow)</font>
filterの例2(wave)
<font style="filter:wave(add=1,freq=1,phase=180,strength=40,lightstrength=50);width:100%; font-size:35px" color="#A3661F"> filterの例2(wave)</font>
filterの例3(blur)
<font style="filter:blur(add=1,direction=235,strength=20); width:100%; font-size:35px" color="#7F5431"> filterの例3(blur)</font>
filterの例4(shadow)
<font style="filter:shadow(color=#48635F,direction=135);width:100%; font-size:35px" color="#7766FF"> filterの例4(shadow)</font>
filterの例5(dropshadow)
<font style="filter:dropshadow(color=#F8AF0A,offx=10,offy=5);width:100%; font-size:35px" color="#CACF5F"> filterの例5(dropshadow)</font>
filterとは基本的に上記のようなもので、
通常の文字に影やぼかし、透過、歪みなどを追加できるのが特徴です。
上記のソースコードをコピペして文章を変更するだけでも使えますが、
自分の好きなように変更してみるのも一興です。
例として、一番上のfilterの例1(glow)の装飾にちょいと手を加えてみます。
(手を加える場所は赤字で表記)
filterの例1(glow)
<font style="filter:glow(color=#222222);width:100%; font-size:35px" color="#EEEEEE"> filterの例1(glow)</font>
color=#222222をcolor=#EEEEEEに変更してみる。
filterの例1(glow)
<font style="filter:glow(color=#EEEEEE);width:100%; font-size:35px" color="#EEEEEE"> filterの例1(glow)</font>
なにやら･･････、読みにくいものになってしまった。影と文字の色が同色なのはマズイようだ。
color="#EEEEEE"をcolor="#222222"に変更。
filterの例1(glow)
<font style="filter:glow(color=#EEEEEE);width:100%; font-size:35px" color="#222222"> filterの例1(glow)</font>
･･････、今度は影が薄すぎて付けた意味がない事が判明。修正。
color=#EEEEEEをcolor=#0000FF,color="#222222"をcolor="#FF8800"に変更。
filterの例1(glow)
<font style="filter:glow(color=#0000FF);width:100%; font-size:35px" color="#FF8800"> filterの例1(glow)</font>
及第点。
color=#0000FFをcolor=#34FF21,color="#FF8800"をcolor="green",font-size:35pxをfont-size:30px,文章をふぁるる.webに変更。
ふぁるる.web
<font style="filter:glow(color=#34FF21);width:100%; font-size:30px" color="green"> ふぁるる.web</font>
このように数値を変更するだけで簡単に文字装飾が変化します。
ここに載せている文字装飾はほんの一握りの範囲ですので、まだまだ色々と装飾方法は存在します。
★htmlタグで文字装飾
★文字装飾サンプル396種
★文字装飾を自作する
