blog | SevenStyleWeb

ちょっとこのサイト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プロパティは　あまり影響のないところで使うような　プラスアルファの装飾