◆文字を上下左右に反転させてみよう!◆
上下反転 & 左右反転 このページの文字は上下左右に反転して見えますね? 画像やプラグインなどを使用せずに、HTMLだけでこのような効果を出すことができるのです。 |
<SPAN STYLE="width:480;height:64;font-size:96px; font-weight:bold;font-family:Arial;color:#004080; Filter:FlipV">上下反転</SPAN> <font size="7" color="#FF8080">&</font> <SPAN STYLE="width:450;height:32;font-size:72px; font-weight:bold;font-family:Arial;color:#FFA477; Filter:FlipH">左右反転</SPAN> |
<SPAN></SPAN>はそれ自体は意味を持たないものですが、部分的なスタイルシートの指定に使用されるタグです。 <SPAN>タグの中にあるFilterというオプションはその名の通り、<SPAN>と</SPAN>のタグで囲まれた文字列にフィルターをかけるものです。 このフィルター機能を使用して文字を上下に反転させるには、Filter:FlipVと指定してやれば良いのです。 左右に反転させるにはFilter:FlipHと指定します。 つまり縦方向ならFlipV、横方向ならFlipHになります。 |