Nahtloses Mischen eines Schlagschattens

Ich muss Schatten auf einen übergreifenden Rand anwenden, aber bisher habe ich den Schatten mit CSS erstellt, und da der übergreifende Rand aus zwei Kästchen besteht, überlappt sich der Schatten.

Meine Lösung dafür besteht darin, den überlappenden Teil mit einem Bild zu verdecken, das wie eine nahtlose Überblendung aussieht, aber ich bin mir nicht sicher, wie die Schatten aussehen sollen , wenn sie sich so treffen. Bitte beachten Sie den blauen Kreisbereich.

Wie würde sich dieser Teil vermischen, wenn es sich um ein natürliches Objekt handelt? Aus künstlerischer Sicht?

Wie kann ich herausfinden, wie die natürliche Schattenmischung für ein solches Beispiel aussehen würde?

Ich kann Adobe Photoshop oder GIMP verwenden, um dies zu erreichen.

Ich mag die Idee, die Struktur neu zu gestalten, vielleicht zwei Boxen für die Seite, verbunden durch eine dritte Box für die Oberseite ... Ich werde sehen ... Danke!

Antworten (2)

Hier ist meine Lösung. Ich denke, es ist die einzige Möglichkeit, dies in CSS zu tun und saubere Nähte zwischen den Schlagschatten zu erhalten. Ich habe die blauen transparenten Kästchen verwendet, da das Problem, auf das Sie bei der internen Schattenmethode gestoßen wären, darin besteht, dass die Ecknähte / Schattenkrümmung nicht dort zusammengepasst hätten, wo sich das grüne und das schwarze Kästchen treffen.

Geben Sie hier die Bildbeschreibung ein

Sollte erwähnt haben, dass Sie den Z-Index verwenden müssen, um alle Divs in der richtigen Reihenfolge zu schichten.
Danke John, das erfordert mehr Arbeit, aber ich glaube, das wird tatsächlich funktionieren! Danke!

Ein natürlicher Schatten wäre im Wesentlichen eine Verlängerung des orangefarbenen Randes.

Dies ist ein schnelles Modell, das weiter verfeinert werden muss:

Schatten

In Bezug auf CSS müssten Sie das vorstehende Feld erweitern, um den Schatten auf dem unteren Element abzudecken, und dann den eingefügten Schatten am unteren Rand des Vorsprungs entfernen.

Danke für die schnelle Antwort. Nun, wenn wir den vorstehenden Kasten mit seinem Schatten auf der Seite erweitern, wird der Schatten auf beiden Seiten nicht immer noch einen scharfen Kontrast zum Schatten des unteren Elements aufweisen? Da der Schatten seitwärts von dunkel nach hell geht, geht er beim unteren Element von oben nach unten ...
Jawohl. Ich bin mir nicht sicher, ob Sie dies mit CSS3 erreichen können. Aber ich bin kein CSS3-Box-Shadow-Experte.
Fügen Sie dort ein weiteres Div ein und maskieren Sie damit die Schatten. Stellen Sie einfach den Z-Index ein und positionieren Sie ihn so, dass er tiefer als die Box verläuft. Ich glaube jedoch nicht, dass Sie dadurch eine saubere Naht erhalten, wo sich der Schatten in den Ecken trifft.
Nahtloses Mischen eines Schlagschattens
AntwortenHierDatenschutz-Bestimmungen1y, 0v