Einführung

Kürzlich standen wir vor der Herausforderung, fotorealistische Schatten für das neue Projekt zu erstellen, das wir mit Little Thai machen. Nach umfangreichen Recherchen stellten wir fest, dass nicht viele Informationen verfügbar waren. Wir haben uns vorgenommen, unsere eigene Technik mithilfe des Befehls „Drop-Shadow“ in CSS zu entwickeln, und die Ergebnisse waren spektakulär. Heute möchten wir der Community mitteilen, wie wir dies erreicht haben, damit jeder von diesem Fortschritt profitieren kann.

Die Anforderungen für diesen Teil der Entwicklung waren klar; Wir brauchten fotorealistische Schatten für die Produkte im Little Thai Store. Warum? Die Idee bestand darin, ein digitales Schaufenster zu schaffen, damit Benutzer die von diesem Unternehmen angebotenen Produkte kaufen können. Die Idee des Vorschlags bestand darin, die Produkte aus der Draufsicht zu zeigen, als ob sie auf einem Tisch platziert wären. Um es realistischer zu machen, brauchten wir diese Zutaten, um fotorealistische Schatten zu erzeugen. Zu diesem Zeitpunkt gab es zwei Möglichkeiten. Einerseits könnte es mit Photoshop gemacht werden. In diesem Video wird erklärt, wie das geht. Andererseits könnte dies auch mit CSS mithilfe des neuen Befehls „Drop-Shadow“ erfolgen.

Das war eine Herausforderung, da es, wie bereits erwähnt, keine Informationen darüber gab, wie man in Photoshop realistische Schatten erstellt. Dies erspart uns jedoch die Bearbeitung der Dutzenden Produkte im Shop in Photoshop und darüber hinaus die Notwendigkeit, jedes Mal, wenn ein neues Produkt hinzugefügt wird, erneut bearbeiten zu müssen. Wie wurde es dann gemacht?

Die Technik

Der Befehl „Drop-Shadow“ in CSS ist ein leistungsstarkes Werkzeug zum Hinzufügen von Schatten zu grafischen Elementen. Allerdings ist seine Verwendung nicht immer einfach, wenn ein fotorealistischer Effekt angestrebt wird. Unsere Lösung basiert auf der Anwendung mehrerer Schatten mit unterschiedlichen Parametern, um einen tieferen und realistischeren Effekt zu erzielen.

Verwendeter CSS-Code

Hier ist der CSS-Code, den wir zum Erstellen der fotorealistischen Schatten verwendet haben:

filter: drop-shadow(17px 17px 13px rgba(0, 0, 0, 0.3)) drop-shadow(7px 7px 4.5px rgba(0, 0, 0, 0.3));

Code-Erklärung

Erster Schlagschatten: 17px 17px 13px rgba(0, 0, 0, 0,3): Dieser Schatten ist der größte und diffuseste. Die Parameter geben einen Schatten an, der sowohl auf der X- als auch der Y-Achse um 17 Pixel verschoben ist, mit einer Unschärfe von 13 Pixel und einer Deckkraft von 30 %.

Zweiter Schlagschatten: 7px 7px 4,5px rgba(0, 0, 0, 0,3): Dieser Schatten ist kleiner und weniger diffus als der erste. Die Parameter geben einen Schatten an, der sowohl auf der X- als auch auf der Y-Achse um 7 Pixel verschoben ist, mit einer Unschärfe von 4,5 Pixel und einer Deckkraft von 30 %.

Die Kombination dieser beiden Schatten erzeugt ein Gefühl von Tiefe und Realismus, das mit einem einzigen Schatten schwer zu erreichen ist.

Visuelles Beispiel Hier ist ein visuelles Beispiel dafür, wie das Endergebnis mit unserer fotorealistischen Schattentechnik aussieht:

Es ist wichtig, zwei Punkte hervorzuheben:

– Der Schatten wirkt am besten auf einem sanften Grauton statt auf reinem Weiß.

– In diesem Fall sind die Schatten für die Draufsichtperspektive konzipiert. In anderen Aufnahmewinkeln wird es nicht gut funktionieren.

Praktische Anwendungen

Diese Technik kann in verschiedenen Kontexten eingesetzt werden, von Produktbildern in Online-Shops bis hin zu grafischen Elementen auf Unternehmenswebsites. Die Möglichkeit, realistische Schatten zu erzeugen, kann das visuelle Erscheinungsbild und die wahrgenommene Qualität eines Projekts erheblich verbessern.

Online fotorealistischer Schattengenerator in CSS

Sie finden den Online-Generator auf der MandarinaWebs-Website

Abschluss

Wir freuen uns sehr, diese Technik mit der Entwickler- und Designer-Community zu teilen. Wir glauben, dass es ein wertvolles Werkzeug für jeden Profi sein kann, der die Ästhetik seiner Webprojekte verbessern möchte. Wir würden gerne Ihr Feedback hören und sehen, wie Sie diese Technik in Ihrer eigenen Arbeit anwenden.