導入

最近、私たちはリトル タイと行っている新しいプロジェクトのためにフォトリアリスティックな影を作成するという課題に直面しました。広範囲にわたる調査の結果、入手可能な情報があまりないことがわかりました。私たちは CSS のドロップシャドウ コマンドを使用した独自のテクニックの開発に着手し、その結果は素晴らしいものになりました。今日は、誰もがこの進歩の恩恵を受けることができるように、私たちがどのようにそれを達成したかをコミュニティと共有したいと思います。

開発のこの部分の要件は明確でした。リトル タイ ストアの商品には写実的な影が必要でした。なぜ？そのアイデアは、ユーザーがこの会社が提供する製品を購入できるようにデジタルショーケースを作成することでした。提案のアイデアは、商品をテーブルの上に置いたような上から見た視点で見せるというものでした。よりリアルにするために、これらの材料にフォトリアルな影が必要でした。この時点で、選択肢は 2 つありました。一方で、それはPhotoshopで行うことができます。このビデオではその方法を説明しています。一方、新しいdrop-shadowコマンドを使用してCSSで実行することもできます。

前述したように、Photoshop でリアルな影を作成する方法に関する情報がなかったため、これは困難でした。しかし、これにより、ストア内の数十の製品を Photoshop で編集する必要がなくなり、さらに、新しい製品が追加されるたびに編集する必要もなくなりました。ではどうやって作られたのでしょうか?

テクニック

CSS のドロップシャドウ コマンドは、グラフィック要素に影を追加するための強力なツールです。ただし、写真のようにリアルな効果を求める場合、その使用は必ずしも簡単ではありません。私たちのソリューションは、より深く、よりリアルな効果を実現するために、異なるパラメーターを使用して複数のシャドウを適用することに基づいています。

使用されるCSSコード

フォトリアルな影の作成に使用した CSS コードは次のとおりです:

フィルター: ドロップシャドウ(17px 17px 13px rgba(0, 0, 0, 0.3)) ドロップシャドウ(7px 7px 4.5px rgba(0, 0, 0, 0.3));

コードの説明

最初のドロップシャドウ: 17px 17px 13px rgba(0, 0, 0, 0.3): このシャドウは最大で最も拡散しています。パラメータは、X 軸と Y 軸の両方で 17 ピクセル変位した影を示し、ぼかしは 13 ピクセル、不透明度は 30% です。

2 番目のドロップシャドウ: 7px 7px 4.5px rgba(0, 0, 0, 0.3): このシャドウは最初のシャドウよりも小さく、拡散性が低くなります。パラメータは、X 軸と Y 軸の両方で 7 ピクセル変位した影を示し、ぼかしは 4.5 ピクセル、不透明度は 30% です。

2つの影を組み合わせることで、単一の影では表現しにくい奥行き感と臨場感が生まれます。

視覚的な例 これは、フォトリアリスティックなシャドウ技術を使用した最終結果がどのように見えるかの視覚的な例です:

次の 2 つの点を強調することが重要です:

— シャドウは、純粋な白よりも柔らかいグレーのトーンで最もよく機能します。

— この場合、影はトップビューの視点向けにデザインされています。他の撮影角度ではうまく機能しません。

実用的なアプリケーション

このテクニックは、オンライン ストアの商品画像から企業 Web サイトのグラフィック要素まで、さまざまな状況で使用できます。リアルな影を作成できる機能により、プロジェクトの見た目と知覚される品質が大幅に向上します。

CSS によるオンラインのフォトリアリスティックなシャドウ ジェネレーター

オンライン ジェネレーターは MandarinaWebs の Web サイトで見つけることができます

結論

私たちは、このテクニックを開発者およびデザイナーのコミュニティと共有できることを非常に楽しみにしています。 Web プロジェクトの美しさを向上させたいと考えているプロフェッショナルにとって、これは貴重なツールになると私たちは信じています。ぜひフィードバックをお聞きになり、このテクニックをご自身の作品にどのように適用するかをご覧ください。