Webデザインに物理ライティングを導入する「Ambient CSS」の登場

ウェブページ上うえの要素ようそごとに個別こべつに影かげを設定せっていする従来じゅうらいのCSSとは異ことなり、画面がめん全体ぜんたいの光源こうげんをひとつの「照明しょうめい環境かんきょう」として一括いっかつ管理かんりできる新あたらしいフレームワーク「Ambient CSS」が話題わだいを集あつめている。3Dレンダリングソフト「Blender」のレイトレース計算けいさんを基準きじゅんに調整ちょうせいされており、物理ぶつり法則ほうそくに基もとづいたリアルな光ひかりと影かげの表現ひょうげんをWebインターフェースに手軽てがるに反映はんえいできるのが特徴とくちょうだ。

Ambient CSSでは、親おや要素ようそ（コンテナ）の光ひかりベクトルや光ひかりの強度きょうど・色相しきそうなどを変更へんこうするだけで、その内部ないぶにあるすべての子こ要素ようその影かげ・ハイライト・グラデーションが一貫いっかんして自動じどう更新こうしんされる。内部ないぶの計算けいさんエンジンは、UI表面ひょうめんを「キーライト」と「フィルライト」の2つの照明しょうめいシステムを持もつ素材そざいとしてモデル化かしており、ドロップシャドウのほか、エッジのハイライトやシャドウ、面取めんとり部分ぶぶんのグロー効果こうかなど、5つの層そうで構成こうせいされた影かげを動的どうてきに合成ごうせいして描画びょうがする。

各かく要素ようそには構造こうぞう・表面ひょうめん・エッジ・素材そざい・深度しんどという5つの素材そざい特性とくせいを組くみ合あわせることができ、ツールの質感しつかんを柔軟じゅうなんに再現さいげんできる。フレームワークはピュアCSSパッケージのほか、React用ようコンポーネントライブラリやBlender用ようキットとしても提供ていきょうされている。プレーンなHTMLへの導入どうにゅうはもちろん、Webアプリケーションでの高度こうどなUI構築こうちくにも適てきしており、直感的ちょっかんてきなデザイン表現ひょうげんを広ひろげるツールとして期待きたいされている。