[FIXED] Konvertieren von Photoshop -Schatten in CSS3 Box Shadow konvertieren

Ausgabe

Wenn ich einen Photoshop-Schlagschatten mit den folgenden Einstellungen habe

Blend Mode - rgb(0,0,0) / 
Opacity - 25% / 
Angle - 135 degrees /
Distance 4px / 
Spread - 0% / 
Size - 4px

Wie kann ich meinen CSS3-Boxschatten so einstellen, dass er mein Photoshop-Design darstellt?

Lösung

Diese CSS-Klasse ist für verschiedene Webbrowser in einer Regel ohne Transparenz zusammengefasst (bekannte Unterstützung: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+):

.shadow {
    -moz-box-shadow: 4px 4px 4px #000;
    -webkit-box-shadow: 4px 4px 4px #000;
    box-shadow: 4px 4px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

… und diese CSS-Klasse unterstützt Transparenz:

.shadow {
  -webkit-box-shadow:4px 4px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow:4px 4px 0px rgba(0, 0, 0, 0.25);
  box-shadow:4px 4px 0px rgba(0, 0, 0, 0.25);
  -webkit-transform:rotate(135deg);
  -moz-transform:rotate(135deg);
  -o-transform:rotate(135deg);
  transform:rotate(135deg);

}

Beantwortet von – Bud Damyanov

Antwort geprüft von – Pedro (FixError Volunteer)