CSS opacityプロパティについてメモ
2008年4月25日 11:09
ちょっとこのサイトhttp://www.salp.net/を見ていて、画像のところのhoverの動きが興味深かったので、ソースを見てみると、別にjsも使っているわけでもなく、opacityプロパティでCSSだけでやっていたので、おーってことに。
opacityプロパティについてあまり知らなかったので、もう一回情報を集めて、ちょろっとメモ。
opacityプロパティは、CSS3で標準化する予定だけど、現時点では非公式なプロパティ。でもとりあえず、モダンブラウザなら動作するよってことです。
書き方は、
ただし、毎度のことながら、IE系では動きがいまいち・・というか動作しないみたい。そこでハック。
IEのスターハックを用いて、
と指定。ここでの値は%値。つまり0~100の間で指定。
注意事項としては、
ということで、結論は現時点では、
opacityプロパティについてあまり知らなかったので、もう一回情報を集めて、ちょろっとメモ。
opacityプロパティは、CSS3で標準化する予定だけど、現時点では非公式なプロパティ。でもとりあえず、モダンブラウザなら動作するよってことです。
書き方は、
opacity:0.8;など0~1.0の間の値で設定する。
ただし、毎度のことながら、IE系では動きがいまいち・・というか動作しないみたい。そこでハック。
IEのスターハックを用いて、
filter:alpha(opacity:80);
と指定。ここでの値は%値。つまり0~100の間で指定。
注意事項としては、
opacityはCSS検証でひっかかる(非公式だからね)
opacityは反応しないブラウザ(ユーザ環境)もあるので注意
ということで、結論は現時点では、
opacityプロパティは あまり影響のないところで使うような プラスアルファの装飾
CSS | comment(0) | trackback(0) | ▲
コメントする