CSSだけで半透明、グラデーションを表現する方法。IE対応

CSSだけで半透明

ほぼ全てのブラウザ対応。

a:hover img {
    filter: alpha(opacity=65);
    -moz-opacity:0.65;
    opacity:0.65;
}

上記の例はマウスオーバーを簡易的に表現したものだが、透明にすると背景色に引っ張られるため見栄えは良くない。

CSSだけで背景グラデーション

div { 
    background-color: #FFF4EA;/*念のため*/
    background: -ms-linear-gradient(top, #FFFFFF, #FFF4EA); /* mozilla */
    background: -moz-linear-gradient(top, #FFFFFF, #FFF4EA); /* mozilla */
    background: -webkit-gradient(linear, center top, center bottom, from(#FFFFFF), to(#FFF4EA)); /* Webkit */
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFFFF', endColorstr='#FFFFF4EA'); /* IE5.5以上 */
}

引数「GradientType」は0:縦方向、1:横方向になります。

ついでに角丸

基本的には角丸にならなくても困らない場面でのみ用いる。

div {
    border-radius: 4px;
}

対応ブラウザ

モダンブラウザ（chrome, FireFox, Safariなど）

ほとんどのスマートフォン

IE9, IE10 の非互換表示

ブロック要素だけではなく、imgなどのオブジェクト、spanなどのインライン要素、tdなどのテーブルなど、ほとんどの要素に適用可能。

死ぬほど便利なので積極的に使っていきたい。