CSS opacityプロパティについてメモ

| コメント(0) | トラックバック(0)
ちょっとこのサイトhttp://www.salp.net/を見ていて、画像のところのhoverの動きが興味深かったので、ソースを見てみると、別にjsも使っているわけでもなく、opacityプロパティでCSSだけでやっていたので、おーってことに。
opacityプロパティについてあまり知らなかったので、もう一回情報を集めて、ちょろっとメモ。

opacityプロパティは、CSS3で標準化する予定だけど、現時点では非公式なプロパティ。でもとりあえず、モダンブラウザなら動作するよってことです。

書き方は、
opacity:0.8;
など0~1.0の間の値で設定する。

ただし、毎度のことながら、IE系では動きがいまいち・・というか動作しないみたい。そこでハック。
IEのスターハックを用いて、

filter:alpha(opacity:80);

と指定。ここでの値は%値。つまり0~100の間で指定。


注意事項としては、
opacityはCSS検証でひっかかる(非公式だからね)
opacityは反応しないブラウザ(ユーザ環境)もあるので注意

ということで、結論は現時点では、
opacityプロパティは あまり影響のないところで使うような プラスアルファの装飾

トラックバック(0)

トラックバックURL: http://sevenstyleweb.com/mt5/mt-tb.cgi/129

コメントする

    follow me on Twitter

    このブログ記事について

    このページは、adminが2008年4月25日 11:09に書いたブログ記事です。

    ひとつ前のブログ記事は「ほしいもの。なので買いました。」です。

    次のブログ記事は「入学」です。

    最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。