フラットUIが流行ですが、完全に真っ平らでは情報の軽重がつけづらいのが欠点です。そこでちょっとした印象付けのために行われるのが影付けです。といってもフラットに直線で、ぼかしなくつけられているのでフラットの雰囲気にはマッチしています。 そんな影を自動で、かつ現在時刻に合わせて変化させる面白いライブラリがFour Shadowsです。

Four Shadowsの使い方

例えばこちらは13時の時の影。

朝の5時になると影が右下に伸びています。

朝9時は左上になります。

Four Shadowsは全部で4パターン(左右上下の組み合わせ)で影の向きが変化します。それによって時間を表現しています。デザインとして面白いですし、ユーザ自身の時間によって変化するというのはアダプティブWebデザインのようで面白いですね。

Four ShadowsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Four Shadows - It’s not always just 5 o’Clock anymore Gigacore/four-shadows