9月13日、「Designing Beautiful Shadows in CSS」が公開された。

この記事では、典型的なボックスシャドウを、実物そっくりの美しいものに変える方法を学ぶことができる。

ウェブ上には、影とは思えないようなぼんやりとしたグレーのボックスがあふれている。
なぜCSSに影が存在するのか、そして影を最大限に活用するにはどうしたらいいのか、一歩踏み込んだ内容となっている。

スクリーンショット: Designing Beautiful Shadows in CSS

取り上げているポイントは以下の3つ。

• 光源の位置、奥行きを考えて影を作ることで、一貫性のある環境にする
• 複数の影を重ねて、よりリアルな影を作る
• 色相を合わせ、彩度・明度を下げることで、洗いざらしのようなグレーの影が出ないようにする

これらを組み合わせることで、臨場感やリアリティを高めたり、特定の要素を目立たせたりすることができる。

目次

Designing Beautiful Shadows in CSS

• Introduction
• Why even use shadows?
• Creating a consistent environment
• The tricks
  • Layering
  • Color-matched shadows
• Putting it all together
  • Fitting into a design system
• Continue the journey
• Bonus: drop-shadow

著者のJosh Comeauは、優れたWebサイトやWebアプリケーションには、「リアル」な品質があると考えている。
そして、その品質を実現するために、「影」は重要な要素だと述べている。

「私が作るアプリケーションは、まるでブラウザが別世界への窓であるかのような、手触りのある本物の感覚でありたいと思っています。そのためには、影の存在が欠かせません」