Entries
この記事が気に入ったらポチっと→
chromaは応用が利くのでついネタにしてしまう。
今回はこの画像
ちなみに青い部分は完全な青(#0000FF)です。
そこに、chromaをつけてやればもちろん↓
↑（ここにある）
のようになる
<IMG SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/forblog11.png" STYLE="width:15px;filter:chroma(color=#0000FF)">
青い部分だけ透明で他は白となっているから、この画像をSPANで囲ってその背景を#4466CCにすると
<SPAN STYLE="width:17px;background:#4466CC;"><IMG SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/forblog11.png" STYLE="filter:chroma(color=#0000FF);" WIDTH="17" HEIGHT="15"></SPAN>
とできる。
これと文字列"LINK"を右に置いて、アンカーで囲い、SPANにおけるスタイルをCSSに移し、CSSで次のように指定する。
<STYLE>
A{
background:#FFFFFF;
color:#4466CC;
}
A SPAN{
width:17px;
background:#4466CC;
}
A:hover{
background:#FFFFFF;
color:#8888EE;
}
A:hover SPAN{
width:17px;
background:#8888EE;
}
</STYLE>
(ちなみにここでのサンプルのために使われているコードは、ブログのスタイルが崩れないように一部変更しています。)
これでこんなリンクを作ることが出来る。
LINK
<A HREF="#"><SPAN><IMG SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/forblog11.png" STYLE="filter:chroma(color=#0000FF);" WIDTH="17" HEIGHT="15"></SPAN>LINK</A>
ちなみにこいつはNoraPHPでも似たようなものを置いています。
今回はこの画像
ちなみに青い部分は完全な青(#0000FF)です。
そこに、chromaをつけてやればもちろん↓
↑（ここにある）
のようになる
<IMG SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/forblog11.png" STYLE="width:15px;filter:chroma(color=#0000FF)">
青い部分だけ透明で他は白となっているから、この画像をSPANで囲ってその背景を#4466CCにすると
<SPAN STYLE="width:17px;background:#4466CC;"><IMG SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/forblog11.png" STYLE="filter:chroma(color=#0000FF);" WIDTH="17" HEIGHT="15"></SPAN>
とできる。
これと文字列"LINK"を右に置いて、アンカーで囲い、SPANにおけるスタイルをCSSに移し、CSSで次のように指定する。
<STYLE>
A{
background:#FFFFFF;
color:#4466CC;
}
A SPAN{
width:17px;
background:#4466CC;
}
A:hover{
background:#FFFFFF;
color:#8888EE;
}
A:hover SPAN{
width:17px;
background:#8888EE;
}
</STYLE>
(ちなみにここでのサンプルのために使われているコードは、ブログのスタイルが崩れないように一部変更しています。)
これでこんなリンクを作ることが出来る。
LINK<A HREF="#"><SPAN><IMG SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/forblog11.png" STYLE="filter:chroma(color=#0000FF);" WIDTH="17" HEIGHT="15"></SPAN>LINK</A>
ちなみにこいつはNoraPHPでも似たようなものを置いています。
この記事が気に入ったらポチっと→
direction属性には、文章の方向を指定します。
ltr = 左から右
rtl = 右から左
例えば次のTEXTAREAのようなことが可能。
<TEXTAREA ROWS="4" COLS="20" STYLE="direction:rtl;"></TEXTAREA>
しかし実際は、右から左に書けるところで、読みにくくなるだけ。
なので普通は使うことはないのですが、この属性をrtlでBODYに使って、その中をDIVでltrに戻して、
<BODY STYLE="direction:rtl;">
<DIV ALIGN="left" STYLE="direction:ltr;">
〜〜〜本文あああ
</DIV>
</BODY>
となるようにすれば、
と、このように通常右にあるスクロールバーを左にやることができる。
はっきり言って意味はない。
ltr = 左から右
rtl = 右から左
例えば次のTEXTAREAのようなことが可能。
<TEXTAREA ROWS="4" COLS="20" STYLE="direction:rtl;"></TEXTAREA>
しかし実際は、右から左に書けるところで、読みにくくなるだけ。
なので普通は使うことはないのですが、この属性をrtlでBODYに使って、その中をDIVでltrに戻して、
<BODY STYLE="direction:rtl;">
<DIV ALIGN="left" STYLE="direction:ltr;">
〜〜〜本文あああ
</DIV>
</BODY>
となるようにすれば、
と、このように通常右にあるスクロールバーを左にやることができる。
はっきり言って意味はない。
この記事が気に入ったらポチっと→
フィルタといえば、かなり派手なスタイルからユニークなスタイルまである、素晴らしくメモリやCPUを消費し更にブラウザによってはレイアウトが崩壊するなど、なかなかのアクションを持つ実装ですが、今回はその中の一つの１色透明化・Chromaフィルタの応用したものを紹介。
この200x40の背景画像
と
このDIVタグ
<DIV STYLE="width:200px;height:40px;background:#FFFFFF;color:#0000FF;text-align:center;">Norainu Blog is written by Norainu.<BR>Chromaフィルタによる透過</DIV>
この2つと前述のフィルタをうまく使うと、次のようなものを表示できます。
↑の表示を見て大体構造が分かる人は、かなりフィルタの作用の仕方を理解しているはず。
タグはこのようになっています。
<DIV STYLE="background:url(http://blog-imgs-16.fc2.com/n/o/r/noraphp/forblog.png);width:200px;height:40px;"><DIV STYLE="width:200px;height:40px;background:#FFFFFF;color:#0000FF;text-align:center;filter:Chroma(color=#0000FF);">Norainu Blog is written by Norainu.<BR>Chromaフィルタによる透過</DIV></DIV>
構造としては、DIVタグの青い文字の部分が透過され、DIVの後ろの背景となっている画像が透過された部分からのみ見えるようになります。
注意・・・中に入る文字列が大きいかったり斜めなどにしたりすると、最新のブラウザでアンチエイリアス(文字を見やすいようにすこしぼかす機能)が作用している場合、ぼかされて色が薄い部分だけ透過されず文字列を囲うように色がついてしまうので、文字列はなるべく簡素にするべきでしょう。
この200x40の背景画像
と
このDIVタグ
Norainu Blog is written by Norainu.
Chromaフィルタによる透過
Chromaフィルタによる透過
<DIV STYLE="width:200px;height:40px;background:#FFFFFF;color:#0000FF;text-align:center;">Norainu Blog is written by Norainu.<BR>Chromaフィルタによる透過</DIV>
この2つと前述のフィルタをうまく使うと、次のようなものを表示できます。
Norainu Blog is written by Norainu.
Chromaフィルタによる透過
Chromaフィルタによる透過
↑の表示を見て大体構造が分かる人は、かなりフィルタの作用の仕方を理解しているはず。
タグはこのようになっています。
<DIV STYLE="background:url(http://blog-imgs-16.fc2.com/n/o/r/noraphp/forblog.png);width:200px;height:40px;"><DIV STYLE="width:200px;height:40px;background:#FFFFFF;color:#0000FF;text-align:center;filter:Chroma(color=#0000FF);">Norainu Blog is written by Norainu.<BR>Chromaフィルタによる透過</DIV></DIV>
構造としては、DIVタグの青い文字の部分が透過され、DIVの後ろの背景となっている画像が透過された部分からのみ見えるようになります。
注意・・・中に入る文字列が大きいかったり斜めなどにしたりすると、最新のブラウザでアンチエイリアス(文字を見やすいようにすこしぼかす機能)が作用している場合、ぼかされて色が薄い部分だけ透過されず文字列を囲うように色がついてしまうので、文字列はなるべく簡素にするべきでしょう。
