CSS編集とテーブル内グラデーション馬耳湯風(ばじとうふう)/ウェブリブログ

CSS編集とテーブル内グラデーション

<< 作成日時： 2007/07/24 22:25 >>

今日はとりあえず、目に優しい緑色の四角形をご覧下さい。

OperaとFirefoxの方ごめんなさい・・・m(__)m

緑のグラデーション　

画像は全く使わずスタイルシートだけで作成して、このブログの
設定から「オプション」さらに「CSS編集」の設定の「記事本体」と
いう箇所に作成したスタイルシートを記述するとこのように表の
中がグラデーション効果のかかった緑色になるという次第です。

この記事内ソースのHTMLタグはテーブル(table)タグだけです。

ポイントは、テーブルにID(id=c1)を付けてそのIDだけをブログの
CSSから指定してスタイル(グラデーションカラー)を表現している
わけです。

ソースは

<TABLE border="0">
<TR>
<TD align="center" id="c1" height="180" width="145">緑のグラデーション　</TD>
</TR>
</TABLE>

ブログのCSS編集は、記事内でもトップでもすべてに適用されて
しまいますからこのようにIDを付けて指定しないと大変なことに
なってしまいます。

このウェブリブログのメニユーで[設定]→「オプション]→[CSS編集]

下のほうに「記事本体」という箇所があります。↓

/*------------------記事本体------------------*/

このすぐ下に次のように記述

#c1{
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#e6ffe6, endcolorstr=#009700, gradienttype=0);
width: 100%;
height: 180px;
}

StartColorStr グラデーション開始の色

EndColorStr　グラデーション終了の色

GradientType　縦方向=0 横方向=1

尚、cssでalphaというタグもありますがこれまたIEだけしか表示
されません。

まあ、ホームページ作成で外部CSSとか使っている人には簡単な
ことですが、ブログで試したかったというだけです(笑)　