« 視覚の不思議、脳の曖昧さ | トップページ | Google製ブラウザ Google Chrome »

2008.08.30

透過PNGを効果的に使ってみる

透過PNG+CSSデザインがやってきた!|web designing 2008年9月

またまた9月号のweb designingからですが、「透過PNG+CSSデザインがやってきた!」という特集が組まれています。
最近は僕もページを作る際に、絶対配置と組み合わせて透過PNGをよく使うようになりました。IE6がネックなんですが、手軽なJavaScriptもいろいろと公開されてますので、これを機に試してみるのも一興かと思います。
…で、今回は以前にこのブログで紹介した「JavaScriptで今日の日付」という記事を透過PNGを使って再構築してみます。

サンプルはこんな感じです。

↑このデータはこちらからダウンロードできます。

今回はこのブログで以前紹介したricoというライブラリを使って写真をクロスフェードさせ、その上に透過PNGで今日の日付を表示させています。
cssの絶対配置を利用すれば、画像の上に透過PNGを重ねるコトも簡単なので、レイヤー感覚でデザインできるようになります。

IE6で透過PNGを表示させるJavaScriptは、to-Rさんの「アルファ画像を扱うalphafilter.jsライブラリ」を使っています。他に定番の物もありますので、いろいろと探してみるのも良いかもしれません。
工夫次第で透過PNG+CSSを使って今までにはなかったようなページも作れるのではないでしょうか?…ますます頭を使わなくてはいけなくなりますねぇ。

|

« 視覚の不思議、脳の曖昧さ | トップページ | Google製ブラウザ Google Chrome »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/42268978

この記事へのトラックバック一覧です: 透過PNGを効果的に使ってみる:

» フェードイン切替のスライドショー [Good Sleep]
Flashを使わずにフェードするスライドショー|Rico JavaScriptライブラリ 昨日紹介したRicoというライブラリを使うと、フェードインで画像を切り替えるFlashのような演出も可能です。 [続きを読む]

受信: 2008.08.30 08:00

» JavaScriptで今日の日付 [Good Sleep]
ウチのサイトで使うTips 現在のウチのwebサイト、おおもとは2年半程前に独学のFlashで作ったので、今にして思えば、ずいぶんと不格好なサイトになっている。所々つぎはぎ程度な修正はしてきたのだが、... [続きを読む]

受信: 2008.08.30 08:01

« 視覚の不思議、脳の曖昧さ | トップページ | Google製ブラウザ Google Chrome »