[CSS]透過PNGと透過フィルターの使い方

要素を透過させる場合、アルファチャンネルPNGかCSSのフィルターどちらか使えば作ることが出来る。
アルファチャンネルPNGはPNG24とかの保存形式で、背景無し(またはマスクつき)の画像を保存すれば作成出来る。
Div等の背景を透過させる場合、アルファチャンネルPNGで80%くらいに透過させた画像を背景にすると、フィルターと変わらない効果を得られる。

透過フィルターを使った場合、中の要素まで透過してしまうという問題がある。
positionとか色々CSSを駆使すれば回避できないこともないが、アルファチャンネルPNGを使えば中の要素が透けることはない。

以下サンプル

解説は続きに。
“[CSS]透過PNGと透過フィルターの使い方” の続きを読む

Transparency GoogleMaps

GoogleMapを透明にしたいしたい!と言い出して作ったボツになった方をこっちにのせとく…。
CSSで半透明というのではなく、陸の部分だけ不透明で他透明ということをやりたかった。
透過GIFのほか、アルファチャンネルpngも使用出来る。(しかもpngはIEでも表示される!)

“Transparency GoogleMaps” の続きを読む