Web制作を行う全ての方へ

HTML5によるPNG画像の影を表現

http://pushingpixels.at/experiments/dynamic_shadow/

サイト中央にロゴがあり、ロゴより右側に電球のアイコン、左側にスイッチのアイコンがあります。
左側のスイッチをONにすると、電球に灯りが付き、そうすることでロゴに影が現れます。電球はドラッグで動かすことが出来、ロゴと電球の距離に応じて影の長さ、深さが変わるという仕組みになっています。

HTML5が出現し、対応ブラウザが増えてきました。当然対応したブラウザでしかこのサイトを触ることが出来ませんが、これから先WEBの世界はこういった「動き」をユーザーが操る事が出来るサイトが今まで以上に増えてくるでしょう。
現在は主力シェアであるインターネットエクスプローラーがまだまだHTML5に対応していない為、企業サイト等に関してはHTML5を取り扱うには難しい壁がありますが、個人サイトやブログ、またスマートフォン向けのサイトでHTML5を採用しているサイトが増えてきています。
これから先10年後には今とは違う形のWEBになっていると予測されている分、我々制作者はこういった技術に対し常に敏感に、且つ素早く対応できるスキルを身につけておかねばなりませんね。

お役に立てたらお願いします🙇

Kyashで送金する

Ad



Share