透過PNG、非常に便利。
いまさらすすめるほどでもないとは思うんだけど、実際にはどれくらいに人が使っているんだろうか。
俺の周りではあまりいないんだよな。
個人的には写真はJPG、他の画像はほぼPNG。
会社の後輩に教えたりが結構あるので、メモ。
透過PNGの何が便利なのか。
それはアルファチャンネルを持っているから。
簡単に言うと、透過GIFと違って透明か不透明の2択ではなくて透明の度合いが存在するという感じ。
不透明度が50％のPNGなら、その背景が半分透けて見えると言えばいいか。
他にも透過させた縁が綺麗になったり。
ただし、IE6だと透過ができないので、そんなときは
DD_belatedPNG.js
というライブラリを設置すると解決。
いろいろ試したけど、IE6で透過PNGを使えるようにするライブラリはこれが一番良かった。（正確には擬似的にだけれども）
でもってHTMLの中に条件コメントでIE6だけ向けて呼び出すと。
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('img, .png_bg');
</script>
<![endif]-->
上記の設定だとimgタグとクラスをpng_bgにしている要素が対象になる。
他にも指定したければ
DD_belatedPNG.fix(‘img, .png_bg’);
の中のに書き足せばよし。
とはいえ、これにも落とし穴があって、それについてはこちらの方のブログを参照。
さて、会社の後輩用に頼まれて、角丸グラデーションのボタンで簡単に色が変えれてある程度幅なんかも自由になるるようなのが欲しいとのことで、透過PNGでさっくりと作ったので一応サンプル表示。
本人的にはaの中にspan入れたりでどうもスマートではない気がするのだが、要望にはこたえたのでよしとする。細かい部分はいつか見直すと、ひっそりと思っておく。
透明から薄い半透明の黒の画像を背景に指定していて、背景色を変えればその色がグラデーションになって見えるという感じ。
角丸実現のため縁の部分は白で塗りつぶしてるので設置する部分の背景が白じゃないといけないが。
しかし、CSS3がもっと普及すればこんなことしないでも、画像いらずで角丸グラデのボタンが作れるんだけどなぁ。