So erstellen Sie diesen Glaseffekt in Photoshop

Dabei bin ich auf dieses Bild gestoßen. Ich möchte mit CSS oder Photoshop einen Glaseffekt wie das folgende Bild erstellen. Kann jemand sagen wie es gemacht wird?

Geben Sie hier die Bildbeschreibung ein

Antworten (1)

Das sieht für mich einfach so aus, als würden einige weiße Formen über einem unscharfen Hintergrund platziert, deren Deckkraft auf unterschiedlichen Ebenen reduziert wird. Das abgerundete "Hauptrechteck" hat einen weißen Strich und einen gehärteten Schlagschatten, um ihm die Illusion von Dicke zu verleihen.

Photoshop-Screenshot

Ich habe einen ähnlichen Effekt in Photoshop erstellt, aber das gleiche Konzept könnte mit CSS angewendet werden. So etwas wie das Folgende sollte es tun:

div {
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 2px 2px 0px 2px rgba(255, 255, 255, 0.3);
}

JSFiddle-Demo