簡単モード
スクロールバーの応用
・下記サンプルの▼カラ▲マデを「コピー」して、
簡単モードの投稿画面に「貼り付け」てから文章入力してください。
・スクロール枠のサイズ調整も行えます。( □ をドラッグして調整します。)
< 注意 >
IE以外のブラウザには、反映しません。
■ スクロールバー 透明指定
※ サンプル (コピーで使用可能です。)
※ HTML 入力例
▼
<div style="overflow:auto;
scrollbar-arrow-color: none ;
scrollbar-face-color: #eeeeee;
scrollbar-track-color: #eeeeee;
filter:chroma(color=#eeeeee);
border:solid 1px #999999;
width:450px;height:150px;
font-size:12pt;color:#663333;
font-family:MS Pゴシック;">
<div align="center">
<br>
文章
<br><br>
</div></div>
▲
scrollbar-arrow-color: none ; 矢印(▼)の色を指定する。
scrollbar-face-color: #eeeeee; 透明指定により透明になる。
scrollbar-track-color: #eeeeee; 透明指定により透明になる。
filter:chroma(color=#eeeeee); 透明にする色を指定する。
【注意】
文字や画像に透明指定と同じ色(#eeeeee)色が使用されていた場合は、文字や画像も透過処理されます。(画像は虫食い状態になります。)
■ スクロールバー 半透明指定
※ サンプル : 不透明度70% (コピーで使用可能です。)
※ HTML 入力例
▼
<div style="overflow:auto;
scrollbar-arrow-color: #ff0000;
scrollbar-face-color: #ffcccc;
scrollbar-track-color: #eeeeee;
filter:chroma(color=#eeeeee)alpha(opacity=70);
border:solid 1px #ffaaaa;
width:450px;height:150px;
font-size:12pt;color:#663333;
font-family:MS Pゴシック;">
<div align="center">
<br>
文章
<br><br>
</div></div>
▲
scrollbar-arrow-color: #ff0000; 矢印(▼)の色を指定する。
scrollbar-face-color: #ffcccc; スクロールバーの表面の色を指定する。
scrollbar-track-color: #eeeeee; 透明指定により透明になる。
filter:chroma(color=#eeeeee)alpha(opacity=70); 透明にする色を指定する。
不透明度(%)を指定する。(0〜100)
スクロールバーだけの半透明ができなかったー
【注意】
文字や画像に透明指定と同じ色(#eeeeee)が使用されていた場合は、文字や画像も透過処理されます。(画像は虫食い状態になります。)
スクロールバー内の文字や画像、全てが半透明になります。
既に使用されている方もおられますが、記事に上げておきます。
Chromaの別の使い方を試していますが、上手くいってません。
スクロールバーでは上手く反映しているのに、
別の場所に指定した場合、反映しないのはなぜだ〜〜〜。
指定方法が間違っているのかなー?
出来そう思えたのに出来ないよ〜〜〜〜。
|
トラックバックされた記事
https://blogs.yahoo.co.jp/hikaru_h_2007/trackback/1798394/60406531